/* ================================================================
   MOBILE / TABLET HUD
   Camada touch própria. Só ativa quando body.mobile-ui está presente.
   Desktop não herda nenhuma destas regras.
   ================================================================ */
#mobile-controls{display:none}
body.mobile-ui{overscroll-behavior:none}
body.mobile-ui #scr-game{overflow:hidden}
body.mobile-ui #map-wrap,body.mobile-ui #game{touch-action:none;-ms-touch-action:none}
body.mobile-ui #mobile-controls{
  --safe-l:max(10px,env(safe-area-inset-left));
  --safe-r:max(10px,env(safe-area-inset-right));
  --safe-b:max(10px,env(safe-area-inset-bottom));
  --mc:clamp(44px,6.2vw,62px);
  position:absolute;inset:0;z-index:30;display:block;pointer-events:none;
  font-family:Verdana,Tahoma,Arial,sans-serif;user-select:none;-webkit-user-select:none
}
body.mobile-ui #mobile-controls button{font:inherit;color:#edf6ff;-webkit-tap-highlight-color:transparent;touch-action:none}
body.mobile-ui #mobile-controls button[hidden]{display:none!important}

.mobile-left-controls{position:absolute;left:var(--safe-l);bottom:calc(var(--safe-b) + 10px);width:clamp(150px,22vw,210px);height:clamp(150px,28vh,210px);pointer-events:none}
.mobile-joystick{position:absolute;left:0;bottom:0;width:clamp(116px,16vw,154px);aspect-ratio:1;border-radius:50%;pointer-events:auto;touch-action:none;background:radial-gradient(circle,rgba(61,101,139,.22) 0 35%,rgba(8,15,25,.55) 37% 62%,rgba(255,191,78,.10) 64%,rgba(7,12,20,.28) 68%);border:1px solid rgba(131,174,219,.28);box-shadow:0 8px 24px rgba(0,0,0,.28),inset 0 0 24px rgba(42,112,170,.14)}
.mobile-joystick-ring{position:absolute;inset:17%;border-radius:50%;border:1px solid rgba(255,199,91,.22);box-shadow:inset 0 0 18px rgba(0,0,0,.38)}
.mobile-joystick::before,.mobile-joystick::after{content:"";position:absolute;left:50%;top:50%;background:rgba(174,206,236,.13);transform:translate(-50%,-50%);pointer-events:none}
.mobile-joystick::before{width:62%;height:1px}.mobile-joystick::after{height:62%;width:1px}
.mobile-joystick-knob{position:absolute;left:50%;top:50%;width:44%;aspect-ratio:1;margin:-22% 0 0 -22%;border-radius:50%;background:radial-gradient(circle at 38% 30%,rgba(116,193,246,.72),rgba(20,53,82,.92) 58%,rgba(4,12,21,.96));border:1px solid rgba(150,215,255,.64);box-shadow:0 3px 10px rgba(0,0,0,.54),0 0 12px rgba(64,174,244,.18);transition:transform .04s linear;pointer-events:none}
.mobile-joystick.active{border-color:rgba(255,201,93,.52);box-shadow:0 8px 24px rgba(0,0,0,.28),0 0 20px rgba(64,174,244,.14)}

.mobile-round,.mobile-action,.mobile-bottom-tools button{border:1px solid rgba(125,171,221,.28);background:radial-gradient(circle at 38% 28%,rgba(46,70,99,.86),rgba(5,11,19,.92) 70%);box-shadow:0 5px 14px rgba(0,0,0,.35),inset 0 1px 2px rgba(255,255,255,.08)}
.mobile-dash{position:absolute;right:0;bottom:18px;width:52px;height:52px;border-radius:50%;pointer-events:auto}
.mobile-dash b{display:block;font-size:22px;color:#77d8ff}.mobile-dash small{display:block;font-size:8px;color:#aabbd0}

.mobile-right-controls{position:absolute;right:var(--safe-r);bottom:calc(var(--safe-b) + 8px);width:clamp(230px,31vw,330px);height:clamp(190px,34vh,265px);pointer-events:none}
.mobile-action{position:absolute;width:var(--mc);height:var(--mc);border-radius:50%;display:grid;place-items:center;align-content:center;padding:3px;pointer-events:auto;touch-action:none}
.mobile-action b{font-size:15px;line-height:1;color:#eaf5ff;text-shadow:0 1px 2px #000}.mobile-action small{max-width:54px;margin-top:3px;font-size:7px;line-height:1;color:#9fb2c7;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mobile-action.holding,.mobile-action.pressed,.mobile-round.pressed,.mobile-bottom-tools button.pressed{transform:scale(.92);border-color:rgba(255,206,101,.85);filter:brightness(1.16);box-shadow:0 0 18px rgba(255,174,44,.22),inset 0 1px 3px rgba(255,255,255,.14)}
.mobile-punch{right:0;bottom:8px;width:clamp(76px,10vw,92px);height:clamp(76px,10vw,92px);border-color:rgba(255,187,78,.48);background:radial-gradient(circle at 38% 28%,rgba(128,75,29,.94),rgba(36,17,8,.96) 70%)}
.mobile-punch b{font-size:27px}.mobile-punch small{color:#ffd894;font-size:8px}
.mobile-tech.beam{right:calc(var(--mc) + 48px);bottom:10px}.mobile-tech.blast{right:calc(var(--mc) + 12px);bottom:calc(var(--mc) + 40px)}
.mobile-tech{border-color:rgba(84,185,238,.45);background:radial-gradient(circle at 40% 30%,rgba(34,111,162,.88),rgba(5,18,31,.96) 70%)}
.mobile-context{right:0;bottom:calc(var(--mc) + 64px);border-color:rgba(118,225,176,.42)}
.mobile-grab{right:calc(var(--mc) + 86px);bottom:calc(var(--mc) + 96px);width:calc(var(--mc) * .82);height:calc(var(--mc) * .82)}
.mobile-util{width:calc(var(--mc) * .78);height:calc(var(--mc) * .78);background:radial-gradient(circle at 40% 30%,rgba(77,82,118,.82),rgba(8,12,23,.94) 72%)}
.mobile-util small{max-width:46px;font-size:6.5px}
.mobile-util.util-1{right:0;bottom:calc(var(--mc) * 2 + 84px)}
.mobile-util.util-2{right:calc(var(--mc) + 6px);bottom:calc(var(--mc) * 2 + 100px)}
.mobile-util.util-3{right:calc(var(--mc) * 2 + 12px);bottom:calc(var(--mc) * 2 + 76px)}

.mobile-bottom-tools{position:absolute;left:50%;bottom:var(--safe-b);transform:translateX(-50%);display:flex;gap:6px;pointer-events:auto}
.mobile-bottom-tools button{min-width:58px;height:34px;border-radius:9px;padding:2px 8px;display:flex;align-items:center;gap:5px;justify-content:center}
.mobile-bottom-tools b{font-size:12px;color:#ffd67a}.mobile-bottom-tools span{font-size:7px;color:#9fb0c4;text-transform:uppercase;letter-spacing:.05em}

/* Status no topo esquerdo; os slots viram uma hotbar touch independente no rodapé. */
body.mobile-ui #hud #hud-unit{
  --ue:36px;position:absolute!important;left:var(--mobile-left,max(10px,env(safe-area-inset-left)))!important;top:max(8px,env(safe-area-inset-top))!important;bottom:auto!important;transform:none!important;width:clamp(240px,32vw,330px)!important;z-index:18!important;opacity:.94!important
}
body.mobile-ui #hud #hud-unit .unit-names{height:15px;font-size:9px;line-height:15px}
body.mobile-ui #hud #hud-unit .ubar{height:18px}
body.mobile-ui #hud #hud-unit .ubar span{font-size:9px}
body.mobile-ui #hud #hud-unit .ubar.stam{height:4px}
body.mobile-ui #hud #hud-unit .unit-emblem{top:calc(1px + 15px + 2px + 9px)}
body.mobile-ui #hud #hud-unit #hud-power{font-size:7px}
body.mobile-ui #hud #hud-unit .unit-slots{
  position:fixed!important;left:50%!important;bottom:calc(max(8px,env(safe-area-inset-bottom)) + 40px)!important;transform:translateX(-50%)!important;margin:0!important;z-index:31!important;width:max-content!important
}
body.mobile-ui #hud #hud-unit-hotbar{display:grid!important;grid-template-columns:repeat(5,clamp(38px,5.4vw,48px))!important;gap:4px!important}
body.mobile-ui #hud #hud-unit .uslot{--us:clamp(38px,5.4vw,48px);width:var(--us)!important;height:var(--us)!important;border-radius:7px!important;border-width:1px!important;background:linear-gradient(180deg,rgba(42,46,50,.84),rgba(16,18,21,.90))!important}
body.mobile-ui #hud #hud-unit .uslot kbd{font-size:8px!important;opacity:.72}
body.mobile-ui:not(.mobile-hotbar-page2) #hud-unit-hotbar .uslot:nth-child(n+6){display:none!important}
body.mobile-ui.mobile-hotbar-page2 #hud-unit-hotbar .uslot:nth-child(-n+5){display:none!important}
body.mobile-ui #hud #hud-unit-items{left:50%!important;right:auto!important;bottom:calc(100% + 5px)!important;transform:translateX(-50%);gap:3px!important}
body.mobile-ui #hud #hud-unit .uslot.cons{--us:30px;width:30px!important;height:30px!important}

/* minimapa */
body.mobile-ui #hud #hud-mini{right:max(8px,env(safe-area-inset-right))!important;top:max(8px,env(safe-area-inset-top))!important;transform:none!important;gap:2px!important;z-index:17!important}
body.mobile-ui #hud #hud-mini .ring{width:clamp(104px,14vw,136px)!important;padding:5px!important}
body.mobile-ui #hud #hud-loc{min-width:96px!important;max-width:136px!important;padding:3px 7px!important;background:rgba(4,10,17,.38)!important}
body.mobile-ui #hud #hud-loc b{font-size:8px!important;max-width:126px}body.mobile-ui #hud #hud-loc small{display:none}

/* Progresso compacto entre status e minimapa */
body.mobile-ui #hud #hud-quests{left:50%!important;top:max(8px,env(safe-area-inset-top))!important;transform:translateX(-50%)!important;width:clamp(220px,30vw,360px)!important;height:min(106px,22vh)!important;min-height:0!important;max-height:22vh!important;z-index:16!important;opacity:.78!important}
body.mobile-ui #hud #hud-quests .htabs{height:30px!important}
body.mobile-ui #hud #hud-quests .hbody{overflow:auto!important;font-size:9px!important}

/* Chat fica como feed curto; botão CHAT abre bottom sheet. */
body.mobile-ui #hud #hud-chat{left:max(8px,env(safe-area-inset-left))!important;top:76px!important;bottom:auto!important;width:clamp(240px,37vw,390px)!important;height:70px!important;min-width:0!important;min-height:0!important;max-width:42vw!important;max-height:none!important;z-index:15!important;opacity:.66!important;overflow:hidden!important;background:linear-gradient(180deg,rgba(7,12,18,.36),rgba(5,8,12,.07))!important;border-color:rgba(130,166,202,.11)!important}
body.mobile-ui:not(.mobile-chat-open) #hud-chat .htabs,
body.mobile-ui:not(.mobile-chat-open) #hud-chat #chat-form,
body.mobile-ui:not(.mobile-chat-open) #hud-chat .hud-resize,
body.mobile-ui:not(.mobile-chat-open) #hud-chat .hud-resize-vertical{display:none!important}
body.mobile-ui:not(.mobile-chat-open) #hud-chat #output{padding:4px 6px!important;overflow:hidden!important;font-size:9px!important;line-height:1.22!important;mask-image:linear-gradient(to bottom,transparent 0,#000 18%,#000 100%)}
body.mobile-ui.mobile-chat-open #hud #hud-chat{left:50%!important;top:auto!important;bottom:calc(max(8px,env(safe-area-inset-bottom)) + 52px)!important;transform:translateX(-50%)!important;width:min(720px,92vw)!important;max-width:92vw!important;height:min(48vh,360px)!important;max-height:52vh!important;opacity:.97!important;overflow:visible!important;z-index:60!important;background:linear-gradient(180deg,rgba(9,17,27,.94),rgba(4,9,15,.88))!important}
body.mobile-ui.mobile-chat-open #hud-chat .htabs,
body.mobile-ui.mobile-chat-open #hud-chat #chat-form{display:flex!important}

/* Menu desktop vira uma gaveta central touch. */
body.mobile-ui #hud #hud-menu{display:none!important}
body.mobile-ui.mobile-menu-open #hud #hud-menu{
  display:flex!important;position:absolute!important;left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(760px,92vw)!important;max-width:92vw!important;max-height:76vh!important;height:auto!important;padding:14px!important;gap:12px!important;justify-content:center!important;align-content:center!important;flex-wrap:wrap!important;overflow:auto!important;z-index:65!important;border:1px solid rgba(238,185,88,.34)!important;border-radius:14px!important;background:linear-gradient(180deg,rgba(9,17,28,.97),rgba(4,8,14,.96))!important;box-shadow:0 24px 60px rgba(0,0,0,.58)!important
}
body.mobile-ui.mobile-menu-open #hud #hud-menu button{width:64px!important;min-height:62px!important;flex:0 0 64px!important}
body.mobile-ui.mobile-menu-open #hud #hud-menu button img{width:42px!important;height:42px!important}
body.mobile-ui.mobile-menu-open #hud #hud-menu button span{display:block!important;font-size:8px!important;max-width:64px!important;white-space:normal!important;text-align:center!important}
body.mobile-ui.mobile-menu-open #hud #hud-menu kbd{display:none!important}

/* O cluster de ações desktop não participa do modo touch. */
body.mobile-ui #hud #hud-actions{display:none!important}
body.mobile-ui #hud #hud-quick{display:none!important}
body.mobile-ui .hud-resize,body.mobile-ui .hud-resize-vertical{display:none!important}

/* Janelas da HUD: touch-first, quase tela cheia. */
body.mobile-ui #hud #hud-win{
  left:50%!important;right:auto!important;top:50%!important;bottom:auto!important;transform:translate(-50%,-50%)!important;width:min(900px,94vw)!important;height:auto!important;max-height:86vh!important;min-width:0!important;overflow:hidden!important;z-index:70!important
}
body.mobile-ui #hud #hud-win header{min-height:44px!important}
body.mobile-ui #hud #hud-win .wbody{max-height:calc(86vh - 52px)!important;overflow:auto!important;-webkit-overflow-scrolling:touch}
body.mobile-ui #hud #hud-win button,
body.mobile-ui #hud #hud-win input:not([type=checkbox]):not([type=radio]):not([type=range]),
body.mobile-ui #hud #hud-win select{min-height:38px}

/* Overlays principais também respeitam touch e safe areas. */
body.mobile-ui #admin .adm-box,
body.mobile-ui #rp .rp-box,
body.mobile-ui .content-panel .content-shell{width:96vw!important;height:92vh!important;max-height:92vh!important}
body.mobile-ui #rp .rp-box header nav{overflow-x:auto!important;flex-wrap:nowrap!important}
body.mobile-ui #rp .rp-box header nav button{min-height:40px!important;white-space:nowrap}
body.mobile-ui .content-panel .content-tabs{overflow-x:auto}
body.mobile-ui .content-panel .content-tabs button{min-width:150px;min-height:42px}

/* Tutorial não cobre o joystick nem o ataque no landscape. */
body.mobile-ui #onboarding-guide{left:50%!important;right:auto!important;top:118px!important;bottom:auto!important;transform:translateX(-50%)!important;width:min(560px,58vw)!important}
body.mobile-ui #onboarding-guide .ob-card{grid-template-columns:118px minmax(0,1fr)!important;min-height:190px!important}
body.mobile-ui #onboarding-guide .ob-panel{padding:11px 13px 10px!important}
body.mobile-ui #onboarding-guide .ob-title{font-size:16px!important}
body.mobile-ui #onboarding-guide .ob-text{font-size:10.5px!important}

/* Portrait continua funcional, mas avisa para girar. */
.mobile-orientation-hint{display:none}
body.mobile-ui.mobile-portrait .mobile-orientation-hint{position:absolute;left:50%;top:max(74px,env(safe-area-inset-top));transform:translateX(-50%);display:flex;align-items:center;gap:7px;padding:7px 11px;border-radius:999px;border:1px solid rgba(255,190,75,.25);background:rgba(7,12,19,.58);color:#dbe8f5;font-size:9px;pointer-events:none}
body.mobile-ui.mobile-portrait .mobile-orientation-hint b{color:#ffd36b;font-size:16px}
body.mobile-ui.mobile-portrait #hud #hud-quests{display:none!important}
body.mobile-ui.mobile-portrait #hud #hud-chat{top:112px!important;max-width:58vw!important;width:58vw!important}
body.mobile-ui.mobile-portrait #hud #hud-unit{width:min(62vw,330px)!important}
body.mobile-ui.mobile-portrait #hud #hud-mini .ring{width:96px!important}
body.mobile-ui.mobile-portrait .mobile-left-controls{width:150px;height:170px}
body.mobile-ui.mobile-portrait .mobile-right-controls{width:210px;height:255px}
body.mobile-ui.mobile-portrait #onboarding-guide{top:160px!important;width:92vw!important}
body.mobile-ui.mobile-portrait #onboarding-guide .ob-art{display:none!important}
body.mobile-ui.mobile-portrait #onboarding-guide .ob-card{grid-template-columns:1fr!important}

@media (max-height:520px) and (orientation:landscape){
  body.mobile-ui #hud #hud-unit{width:250px!important}
  body.mobile-ui #hud #hud-unit .unit-slots{bottom:calc(max(5px,env(safe-area-inset-bottom)) + 34px)!important}
  body.mobile-ui #hud #hud-unit-hotbar{grid-template-columns:repeat(5,36px)!important}
  body.mobile-ui #hud #hud-unit .uslot{--us:36px!important}
  body.mobile-ui #hud #hud-mini .ring{width:104px!important}
  body.mobile-ui #hud #hud-quests{height:82px!important}
  body.mobile-ui #hud #hud-chat{top:66px!important;height:58px!important}
  body.mobile-ui #mobile-controls{--mc:46px}
  .mobile-left-controls{height:138px;width:160px}.mobile-joystick{width:112px}.mobile-right-controls{height:178px;width:245px}
}


/* Ao digitar no chat, evita toque acidental em movimento/combate. */
body.mobile-ui.mobile-chat-open #mobile-controls .mobile-left-controls,
body.mobile-ui.mobile-chat-open #mobile-controls .mobile-right-controls{
  opacity:.14;pointer-events:none;filter:saturate(.55)
}
body.mobile-ui.mobile-chat-open #mobile-controls .mobile-bottom-tools{z-index:80}

/* seletor Automático / Desktop / Mobile nas opções */
#hud #hud-win .settings-ui-layout select{
  width:min(100%,360px);height:38px;padding:0 10px;border-radius:7px;
  border:1px solid rgba(125,171,221,.22);background:rgba(4,9,16,.76);color:#eef5ff;
  font:700 11px "Trebuchet MS",sans-serif
}
#hud #hud-win .settings-ui-layout small{display:block;margin-top:5px;color:#8fa2b8;font-size:10px;line-height:1.35}


/* ================================================================
   MOBILE HUD V2 — refinado a partir de teste real 560x278
   Reforça especificidade contra o reset global #hud button.
   ================================================================ */
body.mobile-ui #hud #mobile-controls button.mobile-action,
body.mobile-ui #hud #mobile-controls button.mobile-round,
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button{
  appearance:none!important;
  -webkit-appearance:none!important;
  margin:0!important;
  padding:3px!important;
  border-style:solid!important;
  border-width:1px!important;
  border-color:rgba(128,179,226,.38)!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 36% 28%,rgba(86,125,165,.90),rgba(10,22,35,.94) 58%,rgba(3,9,16,.98) 100%)!important;
  box-shadow:
    0 4px 12px rgba(0,0,0,.42),
    inset 0 1px 2px rgba(255,255,255,.14),
    inset 0 -2px 5px rgba(0,0,0,.30)!important;
  color:#eef7ff!important;
  opacity:.92;
}
body.mobile-ui #hud #mobile-controls button.mobile-action:active,
body.mobile-ui #hud #mobile-controls button.mobile-action.holding,
body.mobile-ui #hud #mobile-controls button.mobile-round:active,
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button:active{
  transform:scale(.92)!important;
  opacity:1;
  border-color:rgba(255,211,108,.86)!important;
  box-shadow:0 0 15px rgba(255,174,48,.22),inset 0 1px 3px rgba(255,255,255,.16)!important
}
body.mobile-ui #hud #mobile-controls button.mobile-tech{
  border-color:rgba(80,196,247,.58)!important;
  background:radial-gradient(circle at 36% 27%,rgba(46,139,198,.94),rgba(6,31,50,.98) 65%)!important
}
body.mobile-ui #hud #mobile-controls button.mobile-context{
  border-color:rgba(107,230,177,.55)!important;
  background:radial-gradient(circle at 36% 27%,rgba(49,137,102,.92),rgba(7,31,27,.98) 66%)!important
}
body.mobile-ui #hud #mobile-controls button.mobile-grab,
body.mobile-ui #hud #mobile-controls button.mobile-util{
  background:radial-gradient(circle at 36% 27%,rgba(78,81,123,.92),rgba(13,15,33,.98) 67%)!important
}
body.mobile-ui #hud #mobile-controls button.mobile-punch{
  border-color:rgba(255,193,79,.72)!important;
  background:radial-gradient(circle at 35% 26%,rgba(190,114,40,.98),rgba(67,29,10,.98) 64%,rgba(25,11,5,.99))!important;
  box-shadow:0 5px 14px rgba(0,0,0,.46),0 0 11px rgba(255,158,34,.14),inset 0 1px 3px rgba(255,235,182,.20)!important
}
body.mobile-ui #hud #mobile-controls .mobile-action b{
  font-size:14px!important;font-weight:900!important;color:#fff!important;text-shadow:0 1px 2px #000,0 0 4px rgba(110,196,255,.22)
}
body.mobile-ui #hud #mobile-controls .mobile-action small{
  display:block!important;max-width:52px!important;margin-top:3px!important;font-size:6.5px!important;line-height:1.05!important;color:#c1d0df!important;text-shadow:0 1px 2px #000!important
}
body.mobile-ui #hud #mobile-controls .mobile-punch b{font-size:24px!important}
body.mobile-ui #hud #mobile-controls .mobile-punch small{font-size:7px!important;color:#ffe0a1!important}

/* Quest tracker: no mobile fica uma faixa, abre quando recebe foco/toque. */
body.mobile-ui #hud #hud-quests{
  width:clamp(150px,28vw,235px)!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  overflow:hidden!important;
  opacity:.68!important;
  background:linear-gradient(180deg,rgba(9,17,26,.55),rgba(5,10,16,.18))!important;
  border-color:rgba(130,166,202,.12)!important
}
body.mobile-ui #hud #hud-quests .htabs{
  position:relative!important;inset:auto!important;height:32px!important;min-height:32px!important;
  margin:0!important;padding:0 4px!important;gap:2px!important
}
body.mobile-ui #hud #hud-quests .htabs button{
  min-height:28px!important;height:28px!important;padding:0 7px!important;font-size:8px!important
}
body.mobile-ui #hud #hud-quests .hbody{display:none!important}
body.mobile-ui #hud #hud-quests:focus-within{
  height:min(104px,24vh)!important;max-height:24vh!important;opacity:.94!important;
  background:linear-gradient(180deg,rgba(9,17,27,.90),rgba(4,9,15,.76))!important
}
body.mobile-ui #hud #hud-quests:focus-within .hbody{
  display:block!important;height:calc(100% - 32px)!important;padding:5px 7px!important;overflow:auto!important
}

/* Feed de chat mais legível sobre grama/mapas claros. */
body.mobile-ui:not(.mobile-chat-open) #hud #hud-chat.chat-mmo{
  height:54px!important;
  background:linear-gradient(90deg,rgba(3,8,13,.52),rgba(3,8,13,.18) 78%,transparent)!important;
  border:0!important;box-shadow:none!important;opacity:.78!important
}
body.mobile-ui:not(.mobile-chat-open) #hud-chat #output{
  padding:3px 6px!important;font-size:8px!important;line-height:1.18!important;
  text-shadow:0 1px 2px #000,1px 0 1px #000!important
}

/* Hotbar touch ganha presença sem ocupar o centro do combate. */
body.mobile-ui #hud #hud-unit-hotbar{grid-template-columns:repeat(5,clamp(39px,6vw,46px))!important;gap:4px!important}
body.mobile-ui #hud #hud-unit .uslot{--us:clamp(39px,6vw,46px)!important;border-color:rgba(195,177,123,.78)!important;background:linear-gradient(180deg,rgba(53,55,51,.90),rgba(24,25,23,.94))!important}
body.mobile-ui #hud #hud-unit .uslot kbd{font-size:7px!important;opacity:.78}

/* Ferramentas inferiores compactas e separadas da hotbar. */
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools{
  bottom:max(4px,env(safe-area-inset-bottom))!important;gap:4px!important
}
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button{
  min-width:42px!important;width:auto!important;height:26px!important;border-radius:7px!important;padding:0 6px!important;
  background:linear-gradient(180deg,rgba(20,31,43,.76),rgba(6,12,19,.84))!important
}
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button b{font-size:9px!important}
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button span{font-size:5.5px!important}

/* Landscape baixo: layout específico para celulares como o teste 560x278. */
@media (max-height:360px) and (orientation:landscape){
  body.mobile-ui #mobile-controls{--mc:42px}
  body.mobile-ui #hud #hud-unit{
    width:230px!important;top:4px!important;left:max(6px,env(safe-area-inset-left))!important
  }
  body.mobile-ui #hud #hud-unit .unit-names{height:13px!important;line-height:13px!important;font-size:8px!important}
  body.mobile-ui #hud #hud-unit .ubar{height:16px!important}
  body.mobile-ui #hud #hud-unit .ubar span{font-size:8px!important}
  body.mobile-ui #hud #hud-unit .unit-emblem{--ue:32px!important;top:22px!important}
  body.mobile-ui #hud #hud-unit .unit-slots{
    bottom:calc(max(4px,env(safe-area-inset-bottom)) + 29px)!important
  }
  body.mobile-ui #hud #hud-unit-hotbar{grid-template-columns:repeat(5,38px)!important;gap:3px!important}
  body.mobile-ui #hud #hud-unit .uslot{--us:38px!important}

  body.mobile-ui #hud #hud-mini{
    right:max(5px,env(safe-area-inset-right))!important;top:4px!important
  }
  body.mobile-ui #hud #hud-mini .ring{width:86px!important;padding:4px!important}
  body.mobile-ui #hud #hud-loc{display:none!important}

  body.mobile-ui #hud #hud-quests{
    top:4px!important;width:145px!important;height:28px!important;min-height:28px!important
  }
  body.mobile-ui #hud #hud-quests .htabs{height:28px!important;min-height:28px!important}
  body.mobile-ui #hud #hud-quests .htabs button{height:25px!important;min-height:25px!important;font-size:7px!important;padding:0 5px!important}
  body.mobile-ui #hud #hud-quests:focus-within{height:82px!important}

  body.mobile-ui #hud #hud-chat.chat-mmo{
    left:max(6px,env(safe-area-inset-left))!important;top:48px!important;width:210px!important;max-width:210px!important;height:48px!important
  }

  body.mobile-ui #hud #mobile-controls .mobile-left-controls{
    left:max(6px,env(safe-area-inset-left))!important;bottom:8px!important;width:142px!important;height:126px!important
  }
  body.mobile-ui #hud #mobile-controls .mobile-joystick{width:96px!important}
  body.mobile-ui #hud #mobile-controls button.mobile-dash{
    width:38px!important;height:38px!important;right:0!important;bottom:9px!important
  }
  body.mobile-ui #hud #mobile-controls button.mobile-dash b{font-size:17px!important}
  body.mobile-ui #hud #mobile-controls button.mobile-dash small{font-size:6px!important}

  body.mobile-ui #hud #mobile-controls .mobile-right-controls{
    right:max(6px,env(safe-area-inset-right))!important;bottom:7px!important;width:206px!important;height:154px!important
  }
  body.mobile-ui #hud #mobile-controls button.mobile-punch{
    width:60px!important;height:60px!important;right:0!important;bottom:0!important
  }
  body.mobile-ui #hud #mobile-controls button.mobile-tech.beam{
    right:67px!important;bottom:2px!important
  }
  body.mobile-ui #hud #mobile-controls button.mobile-tech.blast{
    right:52px!important;bottom:49px!important
  }
  body.mobile-ui #hud #mobile-controls button.mobile-context{
    right:0!important;bottom:68px!important
  }
  body.mobile-ui #hud #mobile-controls button.mobile-grab{
    width:34px!important;height:34px!important;right:101px!important;bottom:60px!important
  }
  body.mobile-ui #hud #mobile-controls button.mobile-util{
    width:34px!important;height:34px!important
  }
  body.mobile-ui #hud #mobile-controls button.mobile-util.util-1{right:0!important;bottom:116px!important}
  body.mobile-ui #hud #mobile-controls button.mobile-util.util-2{right:43px!important;bottom:108px!important}
  body.mobile-ui #hud #mobile-controls button.mobile-util.util-3{right:86px!important;bottom:101px!important}
  body.mobile-ui #hud #mobile-controls .mobile-action small{max-width:38px!important;font-size:5.6px!important}
  body.mobile-ui #hud #mobile-controls .mobile-action b{font-size:12px!important}
  body.mobile-ui #hud #mobile-controls .mobile-punch b{font-size:21px!important}

  body.mobile-ui #onboarding-guide{
    top:44px!important;width:min(350px,62vw)!important
  }
  body.mobile-ui #onboarding-guide .ob-card{grid-template-columns:82px minmax(0,1fr)!important;min-height:140px!important}
  body.mobile-ui #onboarding-guide .ob-text{font-size:9px!important}
}


/* ================================================================
   MOBILE HUD V3 — composição dedicada, sem desktop comprimido
   ================================================================ */
body.mobile-ui #hud #mobile-hotbar-dock{
  position:absolute!important;
  left:50%!important;
  bottom:calc(max(5px,env(safe-area-inset-bottom)) + 30px)!important;
  transform:translateX(-50%)!important;
  z-index:34!important;
  width:max-content!important;
  pointer-events:auto!important
}
body.mobile-ui #hud #mobile-hotbar-dock .unit-slots{
  position:relative!important;
  inset:auto!important;
  transform:none!important;
  margin:0!important;
  width:max-content!important
}
body.mobile-ui #hud #mobile-hotbar-dock #hud-unit-hotbar{
  display:grid!important;
  grid-template-columns:repeat(5,clamp(36px,5.7vw,44px))!important;
  gap:3px!important
}
body.mobile-ui #hud #mobile-hotbar-dock .uslot{
  --us:clamp(36px,5.7vw,44px);
  position:relative!important;
  width:var(--us)!important;
  height:var(--us)!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(196,174,115,.78)!important;
  border-radius:6px!important;
  background:linear-gradient(180deg,rgba(54,55,51,.88),rgba(21,22,21,.94))!important;
  box-shadow:0 2px 6px rgba(0,0,0,.38),inset 0 1px 1px rgba(255,255,255,.05)!important;
  pointer-events:auto!important
}
body.mobile-ui #hud #mobile-hotbar-dock .uslot.empty{opacity:.72}
body.mobile-ui #hud #mobile-hotbar-dock .uslot kbd{
  position:absolute!important;left:3px!important;bottom:2px!important;
  font:800 7px/1 Verdana,Tahoma,Arial,sans-serif!important;color:#fff!important;
  text-shadow:0 1px 2px #000!important
}
body.mobile-ui #hud #mobile-hotbar-dock .uslot img.skill-ic,
body.mobile-ui #hud #mobile-hotbar-dock .uslot svg{width:82%!important;height:82%!important}
body.mobile-ui #hud #mobile-hotbar-dock #hud-unit-items{
  position:absolute!important;
  left:50%!important;right:auto!important;
  bottom:calc(100% + 4px)!important;
  transform:translateX(-50%)!important;
  display:flex!important;gap:3px!important
}
body.mobile-ui #hud #mobile-hotbar-dock #hud-unit-items[hidden]{display:none!important}
body.mobile-ui #hud #mobile-hotbar-dock .uslot.cons{--us:26px;width:26px!important;height:26px!important}

/* status vira um cartão compacto; hotbar não participa mais deste componente */
body.mobile-ui #hud #hud-unit{
  --ue:30px!important;
  left:max(5px,env(safe-area-inset-left))!important;
  top:max(5px,env(safe-area-inset-top))!important;
  bottom:auto!important;
  width:clamp(190px,34vw,250px)!important;
  transform:none!important;
  opacity:.92!important;
  z-index:20!important
}
body.mobile-ui #hud #hud-unit .unit-status{
  padding-top:0!important;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.34))
}
body.mobile-ui #hud #hud-unit .unit-names{
  height:12px!important;margin:0 0 1px!important;border-radius:4px 4px 0 0!important;
  font:700 7.5px/12px Verdana,Tahoma,Arial,sans-serif!important;
  background:linear-gradient(90deg,rgba(12,29,22,.72),rgba(18,24,22,.55) 49%,rgba(38,29,17,.55) 51%,rgba(49,36,19,.72))!important
}
body.mobile-ui #hud #hud-unit .unit-names b{padding:0 17px 0 5px!important}
body.mobile-ui #hud #hud-unit .unit-names span{padding:0 5px 0 17px!important}
body.mobile-ui #hud #hud-unit .unit-bars{gap:0!important}
body.mobile-ui #hud #hud-unit .ubar.hp,
body.mobile-ui #hud #hud-unit .ubar.ki{
  height:14px!important;min-height:14px!important
}
body.mobile-ui #hud #hud-unit .ubar span{font-size:7.5px!important;padding-top:0!important}
body.mobile-ui #hud #hud-unit .ubar.hp span{padding-right:15px!important}
body.mobile-ui #hud #hud-unit .ubar.ki span{padding-left:15px!important}
body.mobile-ui #hud #hud-unit .ubar.stam{
  height:3px!important;min-height:3px!important;max-height:3px!important;
  margin-top:1px!important;border-width:0!important;border-radius:0 0 3px 3px!important
}
body.mobile-ui #hud #hud-unit .unit-emblem{
  width:30px!important;height:30px!important;top:20px!important
}
body.mobile-ui #hud #hud-unit #hud-power{
  top:calc(100% + 2px)!important;font-size:6px!important;padding:1px 3px!important;
  background:rgba(15,11,6,.56)!important;border-color:rgba(138,100,36,.42)!important
}

/* rastreador compacto: só a aba ativa aparece; ao tocar, abre. */
body.mobile-ui #hud #hud-quests{
  left:50%!important;top:max(5px,env(safe-area-inset-top))!important;
  width:126px!important;height:25px!important;min-height:25px!important;max-height:25px!important;
  transform:translateX(-50%)!important;
  overflow:hidden!important;opacity:.72!important;
  border:1px solid rgba(136,169,201,.10)!important;border-radius:7px!important;
  background:linear-gradient(180deg,rgba(8,15,23,.50),rgba(4,9,14,.16))!important;
  box-shadow:none!important;transition:width .14s ease,height .14s ease,opacity .14s ease!important
}
body.mobile-ui #hud #hud-quests::before,
body.mobile-ui #hud #hud-quests::after{display:none!important}
body.mobile-ui #hud #hud-quests .htabs{
  position:relative!important;inset:auto!important;
  width:100%!important;height:25px!important;min-height:25px!important;
  margin:0!important;padding:0 3px!important;gap:2px!important
}
body.mobile-ui #hud #hud-quests .htabs button[data-tab]{
  display:none!important;height:22px!important;min-height:22px!important;
  padding:0 6px!important;border:0!important;background:none!important;
  font-size:7px!important;white-space:nowrap!important
}
body.mobile-ui #hud #hud-quests .htabs button[data-tab].on{
  display:flex!important;flex:1 1 auto!important;width:100%!important;justify-content:center!important
}
body.mobile-ui #hud #hud-quests .htabs .collapse{display:none!important}
body.mobile-ui #hud #hud-quests .hbody{display:none!important}
body.mobile-ui #hud #hud-quests:focus-within{
  width:min(230px,42vw)!important;height:92px!important;max-height:92px!important;
  opacity:.96!important;z-index:45!important;
  background:linear-gradient(180deg,rgba(8,16,26,.94),rgba(4,9,15,.85))!important;
  border-color:rgba(122,175,221,.24)!important
}
body.mobile-ui #hud #hud-quests:focus-within .htabs button[data-tab]{
  display:flex!important;flex:1 1 0!important;width:auto!important
}
body.mobile-ui #hud #hud-quests:focus-within .hbody{
  display:block!important;height:64px!important;padding:4px 6px!important;overflow:auto!important;font-size:7px!important
}

/* minimapa mobile é realmente circular (a altura antiga causava o oval). */
body.mobile-ui #hud #hud-mini{
  right:max(5px,env(safe-area-inset-right))!important;top:max(5px,env(safe-area-inset-top))!important;
  width:88px!important;height:96px!important;transform:none!important;z-index:19!important
}
body.mobile-ui #hud #hud-mini .ring{
  position:relative!important;left:auto!important;top:auto!important;
  width:82px!important;height:82px!important;padding:0!important
}
body.mobile-ui #hud #hud-mini .ring canvas{left:14%!important;top:14%!important;width:72%!important;height:72%!important}
body.mobile-ui #hud #hud-mini .ring b{font-size:8px!important}
body.mobile-ui #hud #hud-loc{display:none!important}

/* chat feed: duas linhas discretas, sem bloco grande sobre o mapa. */
body.mobile-ui:not(.mobile-chat-open) #hud #hud-chat.chat-mmo{
  left:max(5px,env(safe-area-inset-left))!important;top:40px!important;
  width:min(190px,34vw)!important;max-width:34vw!important;height:37px!important;
  min-width:0!important;min-height:0!important;overflow:hidden!important;
  opacity:.78!important;border:0!important;background:linear-gradient(90deg,rgba(3,8,13,.42),rgba(3,8,13,.10) 72%,transparent)!important;
  box-shadow:none!important
}
body.mobile-ui:not(.mobile-chat-open) #hud-chat #output{
  padding:3px 5px!important;font-size:7.5px!important;line-height:1.16!important;
  text-shadow:0 1px 2px #000,1px 0 1px #000!important
}

/* controles: hierarquia de gamepad e menos área coberta */
body.mobile-ui #hud #mobile-controls .mobile-right-controls{opacity:.90}
body.mobile-ui #hud #mobile-controls button.mobile-util{opacity:.78}
body.mobile-ui #hud #mobile-controls button.mobile-grab{opacity:.82}
body.mobile-ui #hud #mobile-controls button.mobile-context{opacity:.88}
body.mobile-ui #hud #mobile-controls .mobile-util small,
body.mobile-ui #hud #mobile-controls .mobile-grab small{display:none!important}

/* barra inferior funcional, mas visualmente secundária à hotbar */
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools{
  bottom:max(3px,env(safe-area-inset-bottom))!important;gap:3px!important
}
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button{
  height:24px!important;min-width:40px!important;border-radius:6px!important;
  padding:0 5px!important;opacity:.78!important
}
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button b{font-size:8px!important}
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button span{font-size:5px!important}

/* celulares baixos em landscape — alvo do teste 560x278 */
@media (max-height:360px) and (orientation:landscape){
  body.mobile-ui #hud #hud-unit{width:194px!important;top:3px!important;left:max(4px,env(safe-area-inset-left))!important}
  body.mobile-ui #hud #hud-unit .unit-names{height:11px!important;line-height:11px!important;font-size:7px!important}
  body.mobile-ui #hud #hud-unit .ubar.hp,
  body.mobile-ui #hud #hud-unit .ubar.ki{height:13px!important;min-height:13px!important}
  body.mobile-ui #hud #hud-unit .ubar span{font-size:7px!important}
  body.mobile-ui #hud #hud-unit .ubar.stam{height:2px!important;min-height:2px!important;max-height:2px!important}
  body.mobile-ui #hud #hud-unit .unit-emblem{width:28px!important;height:28px!important;top:18px!important}
  body.mobile-ui #hud #hud-unit #hud-power{font-size:5.5px!important}

  body.mobile-ui #hud #mobile-hotbar-dock{
    bottom:calc(max(3px,env(safe-area-inset-bottom)) + 27px)!important
  }
  body.mobile-ui #hud #mobile-hotbar-dock #hud-unit-hotbar{
    grid-template-columns:repeat(5,36px)!important;gap:3px!important
  }
  body.mobile-ui #hud #mobile-hotbar-dock .uslot{--us:36px!important}
  body.mobile-ui #hud #mobile-hotbar-dock .uslot.cons{--us:23px!important;width:23px!important;height:23px!important}

  body.mobile-ui #hud #hud-quests{
    top:3px!important;width:112px!important;height:23px!important;min-height:23px!important;max-height:23px!important
  }
  body.mobile-ui #hud #hud-quests .htabs{height:23px!important;min-height:23px!important}
  body.mobile-ui #hud #hud-quests .htabs button[data-tab]{height:20px!important;min-height:20px!important;font-size:6.5px!important}
  body.mobile-ui #hud #hud-quests:focus-within{width:205px!important;height:78px!important;max-height:78px!important}
  body.mobile-ui #hud #hud-quests:focus-within .hbody{height:52px!important}

  body.mobile-ui #hud #hud-mini{
    right:max(3px,env(safe-area-inset-right))!important;top:3px!important;width:76px!important;height:82px!important
  }
  body.mobile-ui #hud #hud-mini .ring{width:74px!important;height:74px!important}
  body.mobile-ui #hud #hud-mini .ring b{font-size:7px!important}

  body.mobile-ui:not(.mobile-chat-open) #hud #hud-chat.chat-mmo{
    left:max(4px,env(safe-area-inset-left))!important;top:36px!important;
    width:180px!important;max-width:180px!important;height:32px!important
  }
  body.mobile-ui:not(.mobile-chat-open) #hud-chat #output{font-size:7px!important;padding:2px 4px!important}

  body.mobile-ui #hud #mobile-controls{--mc:40px}
  body.mobile-ui #hud #mobile-controls .mobile-left-controls{
    left:max(5px,env(safe-area-inset-left))!important;bottom:6px!important;width:128px!important;height:116px!important
  }
  body.mobile-ui #hud #mobile-controls .mobile-joystick{width:88px!important;opacity:.84}
  body.mobile-ui #hud #mobile-controls button.mobile-dash{
    width:34px!important;height:34px!important;right:0!important;bottom:7px!important
  }

  body.mobile-ui #hud #mobile-controls .mobile-right-controls{
    right:max(4px,env(safe-area-inset-right))!important;bottom:5px!important;width:190px!important;height:136px!important
  }
  body.mobile-ui #hud #mobile-controls button.mobile-punch{
    width:56px!important;height:56px!important;right:0!important;bottom:0!important
  }
  body.mobile-ui #hud #mobile-controls button.mobile-tech.beam{right:62px!important;bottom:3px!important}
  body.mobile-ui #hud #mobile-controls button.mobile-tech.blast{right:49px!important;bottom:46px!important}
  body.mobile-ui #hud #mobile-controls button.mobile-context{right:1px!important;bottom:61px!important}
  body.mobile-ui #hud #mobile-controls button.mobile-grab{
    width:31px!important;height:31px!important;right:92px!important;bottom:49px!important
  }
  body.mobile-ui #hud #mobile-controls button.mobile-util{
    width:31px!important;height:31px!important
  }
  body.mobile-ui #hud #mobile-controls button.mobile-util.util-1{right:1px!important;bottom:101px!important}
  body.mobile-ui #hud #mobile-controls button.mobile-util.util-2{right:36px!important;bottom:99px!important}
  body.mobile-ui #hud #mobile-controls button.mobile-util.util-3{right:71px!important;bottom:96px!important}
  body.mobile-ui #hud #mobile-controls .mobile-action b{font-size:12px!important}
  body.mobile-ui #hud #mobile-controls .mobile-tech small,
  body.mobile-ui #hud #mobile-controls .mobile-context small,
  body.mobile-ui #hud #mobile-controls .mobile-punch small{font-size:5.5px!important}

  body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button{height:22px!important;min-width:37px!important}
}


/* ================================================================
   MOBILE HUD V4 — mesmos botões/skins da HUD desktop
   Mantém layout touch, mas usa os mesmos PNGs, badges e molduras.
   ================================================================ */
body.mobile-ui #hud #mobile-controls button.dbo-action-skin{
  background-color:transparent!important;
  background-repeat:no-repeat!important;
  background-position:center!important;
  background-size:contain!important;
  border:0!important;
  border-radius:50%!important;
  box-shadow:none!important;
  overflow:visible!important;
  opacity:1!important;
  filter:none!important;
  padding:0!important;
}
body.mobile-ui #hud #mobile-controls button.dbo-action-skin::before,
body.mobile-ui #hud #mobile-controls button.dbo-action-skin::after{
  content:none!important;
  display:none!important;
}

/* Mesmas artes do desktop */
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="fist"]{
  background-image:url(../assets/hud/png/action-punch.png)!important;
}
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="dumbbell"]{
  background-image:url(../assets/hud/png/action-train.png)!important;
}
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="moon"]{
  background-image:url(../assets/hud/png/action-rest.png)!important;
}
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="wing"]{
  background-image:url(../assets/hud/png/action-fly.png)!important;
}
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="up"]{
  background-image:url(../assets/hud/png/action-powerup.png)!important;
}
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="talk"]{
  background-image:url(../assets/hud/png/action-talk.png)!important;
}

/* Grab não possui PNG próprio no desktop: usa moldura coerente com o cluster. */
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="grab"]{
  background:
    radial-gradient(circle at 36% 28%,rgba(73,92,119,.95),rgba(9,18,30,.98) 66%)!important;
  border:2px solid #d98916!important;
  box-shadow:
    0 0 0 2px #07101c,
    inset 0 0 0 2px rgba(255,204,80,.38),
    0 3px 7px rgba(0,0,0,.45)!important;
}

/* X/B: mesma moldura dos combat slots desktop. */
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="combat"]{
  display:grid!important;
  place-items:center!important;
  border:2px solid #d98916!important;
  background:
    radial-gradient(circle at 37% 28%,rgba(105,190,255,.96) 0%,rgba(15,78,163,.98) 40%,rgba(2,24,73,.99) 76%,#020b20 100%)!important;
  box-shadow:
    0 0 0 2px #07101c,
    inset 0 0 0 2px rgba(255,204,80,.64),
    inset 0 0 9px rgba(72,174,255,.34),
    0 3px 7px rgba(0,0,0,.52),
    0 0 7px rgba(255,153,25,.18)!important;
}
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="combat"].holding{
  filter:brightness(1.18) saturate(1.12)!important;
  box-shadow:
    0 0 0 2px #07101c,
    inset 0 0 0 2px rgba(255,221,104,.82),
    0 0 14px rgba(86,192,255,.54)!important;
}

/* Badges de tecla idênticos ao desktop. */
body.mobile-ui #hud #mobile-controls button.dbo-action-skin > b{
  position:absolute!important;
  right:-5px!important;
  bottom:-5px!important;
  width:22px!important;
  height:22px!important;
  display:grid!important;
  place-items:center!important;
  margin:0!important;
  padding:0!important;
  background:url(../assets/hud/png/key-badge.png) no-repeat center/contain!important;
  border:0!important;
  border-radius:0!important;
  font:900 10px/1 Verdana,Tahoma,Arial,sans-serif!important;
  color:#fff!important;
  text-shadow:0 1px 2px #000!important;
  z-index:5!important;
  pointer-events:none!important;
}
body.mobile-ui #hud #mobile-controls button.dbo-action-skin > small{
  display:none!important;
}

/* Soco usa a mesma plaquinha do desktop, mas com rótulo touch. */
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="fist"] > b{
  display:none!important;
}
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="fist"] > small{
  position:absolute!important;
  left:50%!important;
  bottom:-13px!important;
  transform:translateX(-50%)!important;
  width:58px!important;
  height:20px!important;
  display:grid!important;
  place-items:center!important;
  padding:0 6px!important;
  background:url(../assets/hud/png/level-plate.png) no-repeat center/100% 100%!important;
  font:900 8px/1 Verdana,Tahoma,Arial,sans-serif!important;
  color:#fff!important;
  text-shadow:0 1px 2px #000!important;
  white-space:nowrap!important;
  z-index:5!important;
  pointer-events:none!important;
}

/* Contexto: arte desktop + badge E. */
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="talk"]{
  width:46px!important;
  height:46px!important;
}

/* Feedback touch preserva a arte em vez de desenhar botão genérico. */
body.mobile-ui #hud #mobile-controls button.dbo-action-skin.pressed,
body.mobile-ui #hud #mobile-controls button.dbo-action-skin.holding,
body.mobile-ui #hud #mobile-controls button.dbo-action-skin:active{
  transform:scale(.93)!important;
  filter:brightness(1.16)!important;
}
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="fist"].pressed,
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="fist"].holding,
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="fist"]:active{
  filter:brightness(1.12)!important;
}

/* Tamanhos proporcionais às artes desktop. */
body.mobile-ui #hud #mobile-controls .mobile-punch{
  width:72px!important;
  height:73px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-util[data-skin="wing"],
body.mobile-ui #hud #mobile-controls .mobile-util[data-skin="moon"],
body.mobile-ui #hud #mobile-controls .mobile-util[data-skin="dumbbell"]{
  width:48px!important;
  height:49px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-util[data-skin="up"]{
  width:44px!important;
  height:45px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-tech{
  width:44px!important;
  height:44px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-grab{
  width:38px!important;
  height:38px!important;
}

/* Reposicionamento do arco para acomodar as artes maiores. */
body.mobile-ui #hud #mobile-controls .mobile-right-controls{
  width:228px!important;
  height:176px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-punch{right:0!important;bottom:0!important}
body.mobile-ui #hud #mobile-controls .mobile-tech.beam{right:82px!important;bottom:7px!important}
body.mobile-ui #hud #mobile-controls .mobile-tech.blast{right:66px!important;bottom:59px!important}
body.mobile-ui #hud #mobile-controls .mobile-context{right:5px!important;bottom:82px!important}
body.mobile-ui #hud #mobile-controls .mobile-grab{right:119px!important;bottom:64px!important}
body.mobile-ui #hud #mobile-controls .mobile-util.util-1{right:7px!important;bottom:128px!important}
body.mobile-ui #hud #mobile-controls .mobile-util.util-2{right:61px!important;bottom:118px!important}
body.mobile-ui #hud #mobile-controls .mobile-util.util-3{right:114px!important;bottom:110px!important}

/* Tela baixa real (ex.: 560x278): mantém as mesmas artes, só reduz. */
@media (max-height:360px) and (orientation:landscape){
  body.mobile-ui #hud #mobile-controls .mobile-right-controls{
    width:196px!important;
    height:147px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-punch{
    width:60px!important;
    height:61px!important;
    right:0!important;
    bottom:0!important;
  }
  body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="fist"] > small{
    width:50px!important;
    height:17px!important;
    bottom:-11px!important;
    font-size:7px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-tech{
    width:38px!important;
    height:38px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-tech.beam{right:68px!important;bottom:4px!important}
  body.mobile-ui #hud #mobile-controls .mobile-tech.blast{right:55px!important;bottom:49px!important}
  body.mobile-ui #hud #mobile-controls .mobile-context{
    width:39px!important;
    height:39px!important;
    right:4px!important;
    bottom:67px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-grab{
    width:32px!important;
    height:32px!important;
    right:99px!important;
    bottom:53px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-util[data-skin="wing"],
  body.mobile-ui #hud #mobile-controls .mobile-util[data-skin="moon"],
  body.mobile-ui #hud #mobile-controls .mobile-util[data-skin="dumbbell"]{
    width:40px!important;
    height:41px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-util[data-skin="up"]{
    width:37px!important;
    height:38px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-util.util-1{right:4px!important;bottom:104px!important}
  body.mobile-ui #hud #mobile-controls .mobile-util.util-2{right:47px!important;bottom:97px!important}
  body.mobile-ui #hud #mobile-controls .mobile-util.util-3{right:89px!important;bottom:91px!important}
  body.mobile-ui #hud #mobile-controls button.dbo-action-skin > b{
    width:19px!important;
    height:19px!important;
    right:-4px!important;
    bottom:-4px!important;
    font-size:8px!important;
  }
}


/* ================================================================
   MOBILE HUD V5 — cluster exatamente na ordem da referência
   T / R / G / F + X/B configuráveis + Soco grande.
   ================================================================ */

/* Anula as posições do cluster das versões anteriores. */
body.mobile-ui #hud #mobile-controls .mobile-right-controls{
  width:250px!important;
  height:215px!important;
  right:max(5px,env(safe-area-inset-right))!important;
  bottom:max(6px,env(safe-area-inset-bottom))!important;
}
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action{
  right:auto!important;
  bottom:auto!important;
  margin:0!important;
}

/* Botões clássicos do desktop com proporção touch. */
body.mobile-ui #hud #mobile-controls .mobile-fixed{
  width:52px!important;
  height:53px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-tech{
  width:48px!important;
  height:48px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-punch{
  width:86px!important;
  height:87px!important;
}

/* Coordenadas inspiradas diretamente na referência enviada:
   T topo-direita, R centro-superior, G esquerda, F centro-inferior,
   X/B coluna esquerda, Soco grande embaixo à direita. */
body.mobile-ui #hud #mobile-controls .mobile-train{
  left:82%!important;top:19%!important;transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-meditate{
  left:60%!important;top:37%!important;transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-power{
  left:36%!important;top:49%!important;transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-fly{
  left:55%!important;top:71%!important;transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-tech.beam{
  left:16%!important;top:55%!important;transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-tech.blast{
  left:17%!important;top:83%!important;transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-punch{
  left:82%!important;top:79%!important;transform:translate(-50%,-50%)!important;
}

/* X/B exibem a arte real da técnica selecionada pelo jogador. */
body.mobile-ui #hud #mobile-controls .mobile-tech .mobile-skill-ic{
  position:absolute!important;
  left:50%!important;top:50%!important;
  width:64%!important;height:64%!important;
  transform:translate(-50%,-50%)!important;
  object-fit:contain!important;
  border-radius:50%!important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.75))!important;
  pointer-events:none!important;
  z-index:2!important;
}
body.mobile-ui #hud #mobile-controls .mobile-tech > b{z-index:6!important}

/* Os ícones fixos usam as mesmas imagens do desktop; o badge fica visível. */
body.mobile-ui #hud #mobile-controls .mobile-fixed > b{
  width:23px!important;height:23px!important;
  right:-5px!important;bottom:-5px!important;
  font-size:10px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-tech > b{
  width:22px!important;height:22px!important;
  right:-5px!important;bottom:-5px!important;
  font-size:10px!important;
}

/* Interação e Grab ficam fora do desenho principal e só aparecem quando existem. */
body.mobile-ui #hud #mobile-controls .mobile-contextual{
  width:34px!important;
  height:34px!important;
  top:-7px!important;
  opacity:.90!important;
  z-index:8!important;
}
body.mobile-ui #hud #mobile-controls .mobile-context{
  left:69%!important;
  transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-grab{
  left:51%!important;
  transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-contextual > b{
  width:18px!important;height:18px!important;
  right:-4px!important;bottom:-4px!important;
  font-size:8px!important;
}

/* Soco mantém a placa do desktop, mas o texto mobile é Soco. */
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="fist"] > small{
  width:68px!important;
  height:22px!important;
  bottom:-14px!important;
  font-size:8px!important;
}

/* Se um verbo não existe, o espaço fica vazio sem rearranjar os demais.
   Isso mantém memória muscular: F/G/R/T sempre moram no mesmo lugar. */
body.mobile-ui #hud #mobile-controls .mobile-fixed[hidden],
body.mobile-ui #hud #mobile-controls .mobile-contextual[hidden]{
  display:none!important;
}

/* Ajuste para o tamanho real do teste (560x278 / celulares landscape baixos). */
@media (max-height:360px) and (orientation:landscape){
  body.mobile-ui #hud #mobile-controls .mobile-right-controls{
    width:205px!important;
    height:172px!important;
    right:max(4px,env(safe-area-inset-right))!important;
    bottom:max(5px,env(safe-area-inset-bottom))!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-fixed{
    width:43px!important;
    height:44px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-tech{
    width:41px!important;
    height:41px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-punch{
    width:70px!important;
    height:71px!important;
  }

  body.mobile-ui #hud #mobile-controls .mobile-train{left:82%!important;top:19%!important}
  body.mobile-ui #hud #mobile-controls .mobile-meditate{left:60%!important;top:37%!important}
  body.mobile-ui #hud #mobile-controls .mobile-power{left:36%!important;top:49%!important}
  body.mobile-ui #hud #mobile-controls .mobile-fly{left:55%!important;top:71%!important}
  body.mobile-ui #hud #mobile-controls .mobile-tech.beam{left:16%!important;top:55%!important}
  body.mobile-ui #hud #mobile-controls .mobile-tech.blast{left:17%!important;top:83%!important}
  body.mobile-ui #hud #mobile-controls .mobile-punch{left:82%!important;top:79%!important}

  body.mobile-ui #hud #mobile-controls .mobile-fixed > b,
  body.mobile-ui #hud #mobile-controls .mobile-tech > b{
    width:19px!important;height:19px!important;
    right:-4px!important;bottom:-4px!important;
    font-size:8px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-contextual{
    width:29px!important;height:29px!important;
    top:-5px!important;
  }
  body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="fist"] > small{
    width:56px!important;height:18px!important;bottom:-12px!important;font-size:7px!important;
  }
}

/* Em tablets, mantém o mesmo desenho, apenas cresce sem espalhar. */
body.mobile-ui.tablet-ui #hud #mobile-controls .mobile-right-controls{
  width:290px!important;height:245px!important;
}
body.mobile-ui.tablet-ui #hud #mobile-controls .mobile-fixed{width:58px!important;height:59px!important}
body.mobile-ui.tablet-ui #hud #mobile-controls .mobile-tech{width:54px!important;height:54px!important}
body.mobile-ui.tablet-ui #hud #mobile-controls .mobile-punch{width:96px!important;height:97px!important}


/* edição dos slots X/B no touch, mesma ideia da caneta desktop */
body.mobile-ui #hud #mobile-controls .mobile-slot-edit{
  position:absolute!important;
  left:-5px!important;
  top:-5px!important;
  z-index:8!important;
  width:18px!important;
  height:18px!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  border:1px solid #dc8f1b!important;
  background:#09111f!important;
  color:#ffe1a0!important;
  font:900 9px/1 Verdana,Tahoma,Arial,sans-serif!important;
  text-shadow:0 1px 2px #000!important;
  box-shadow:0 2px 5px rgba(0,0,0,.55)!important;
  opacity:.88!important;
  pointer-events:auto!important;
  touch-action:none!important;
}
body.mobile-ui #hud #mobile-controls .mobile-slot-edit:active{
  transform:scale(.9)!important;
  color:#fff3c8!important;
  opacity:1!important;
}
@media (max-height:360px) and (orientation:landscape){
  body.mobile-ui #hud #mobile-controls .mobile-slot-edit{
    width:16px!important;height:16px!important;
    left:-4px!important;top:-4px!important;font-size:8px!important;
  }
}


/* ================================================================
   MOBILE HUD V7 — polimento a partir do teste real
   Cluster mais unido, hotbar translúcida e utilidades fora do centro.
   ================================================================ */

/* Hotbar: 10 slots em duas linhas, mais discreta e sem faixa auxiliar abaixo. */
body.mobile-ui #hud #mobile-hotbar-dock{
  bottom:max(5px,env(safe-area-inset-bottom))!important;
  opacity:.86!important;
}
body.mobile-ui #hud #mobile-hotbar-dock #hud-unit-hotbar{
  grid-template-columns:repeat(5,clamp(34px,5.4vw,40px))!important;
  grid-template-rows:repeat(2,clamp(34px,5.4vw,40px))!important;
  gap:3px!important;
}
body.mobile-ui #hud #mobile-hotbar-dock #hud-unit-hotbar .uslot{
  --us:clamp(34px,5.4vw,40px)!important;
  display:grid!important;
  border-color:rgba(196,174,115,.42)!important;
  background:
    radial-gradient(circle at 50% 38%,rgba(255,255,255,.035),transparent 67%),
    linear-gradient(180deg,rgba(47,48,45,.48),rgba(18,19,18,.58))!important;
  box-shadow:
    0 1px 4px rgba(0,0,0,.24),
    inset 0 1px 1px rgba(255,255,255,.035)!important;
  backdrop-filter:blur(1.5px);
  -webkit-backdrop-filter:blur(1.5px);
}
body.mobile-ui #hud #mobile-hotbar-dock #hud-unit-hotbar .uslot.empty{
  opacity:.58!important;
  border-color:rgba(151,136,91,.34)!important;
  background:linear-gradient(180deg,rgba(40,40,38,.34),rgba(17,17,16,.42))!important;
}
body.mobile-ui #hud #mobile-hotbar-dock #hud-unit-hotbar .uslot kbd{
  opacity:.82!important;
}
body.mobile-ui #hud #mobile-hotbar-dock #hud-unit-items{
  bottom:calc(100% + 3px)!important;
  opacity:.78!important;
}

/* Todos os 10 slots ficam disponíveis; o seletor 1–5 deixa de ser necessário. */
body.mobile-ui #hud #mobile-hotbar-dock #hud-unit-hotbar .uslot:nth-child(n){
  display:grid!important;
}
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools{
  position:absolute!important;
  inset:0!important;
  transform:none!important;
  display:block!important;
  pointer-events:none!important;
}
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button{
  position:absolute!important;
  width:30px!important;
  min-width:30px!important;
  height:30px!important;
  padding:0!important;
  border-radius:50%!important;
  display:grid!important;
  place-items:center!important;
  pointer-events:auto!important;
  opacity:.62!important;
  background:rgba(5,11,18,.48)!important;
  border:1px solid rgba(122,164,205,.18)!important;
  box-shadow:0 2px 8px rgba(0,0,0,.20)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button span{
  display:none!important;
}
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button b{
  font-size:10px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button[data-role="page"]{
  display:none!important;
}
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button[data-role="chat"]{
  left:max(7px,env(safe-area-inset-left))!important;
  top:76px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button[data-role="menu"]{
  right:max(7px,env(safe-area-inset-right))!important;
  top:88px!important;
}

/* Progresso/Por perto sai do centro e acompanha a área de status. */
body.mobile-ui #hud #hud-quests{
  left:calc(max(5px,env(safe-area-inset-left)) + clamp(200px,35vw,260px))!important;
  transform:none!important;
  top:max(5px,env(safe-area-inset-top))!important;
  width:116px!important;
}

/* Cluster direito mais compacto, preservando exatamente a ordem T/R/G/F/X/B/Soco. */
body.mobile-ui #hud #mobile-controls .mobile-right-controls{
  width:210px!important;
  height:184px!important;
  right:max(4px,env(safe-area-inset-right))!important;
  bottom:max(5px,env(safe-area-inset-bottom))!important;
}
body.mobile-ui #hud #mobile-controls .mobile-fixed{
  width:48px!important;
  height:49px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-tech{
  width:45px!important;
  height:45px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-punch{
  width:79px!important;
  height:80px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-train{left:82%!important;top:16%!important}
body.mobile-ui #hud #mobile-controls .mobile-meditate{left:60%!important;top:34%!important}
body.mobile-ui #hud #mobile-controls .mobile-power{left:35%!important;top:47%!important}
body.mobile-ui #hud #mobile-controls .mobile-fly{left:55%!important;top:68%!important}
body.mobile-ui #hud #mobile-controls .mobile-tech.beam{left:14%!important;top:54%!important}
body.mobile-ui #hud #mobile-controls .mobile-tech.blast{left:15%!important;top:82%!important}
body.mobile-ui #hud #mobile-controls .mobile-punch{left:82%!important;top:78%!important}

/* Landscape baixo real: junta ainda mais os botões e libera o centro da tela. */
@media (max-height:360px) and (orientation:landscape){
  body.mobile-ui #hud #mobile-hotbar-dock{
    bottom:max(4px,env(safe-area-inset-bottom))!important;
  }
  body.mobile-ui #hud #mobile-hotbar-dock #hud-unit-hotbar{
    grid-template-columns:repeat(5,34px)!important;
    grid-template-rows:repeat(2,34px)!important;
    gap:3px!important;
  }
  body.mobile-ui #hud #mobile-hotbar-dock #hud-unit-hotbar .uslot{
    --us:34px!important;
  }

  body.mobile-ui #hud #hud-quests{
    left:202px!important;
    top:3px!important;
    width:102px!important;
    height:22px!important;
    min-height:22px!important;
    max-height:22px!important;
  }
  body.mobile-ui #hud #hud-quests .htabs{
    height:22px!important;
    min-height:22px!important;
  }
  body.mobile-ui #hud #hud-quests .htabs button[data-tab]{
    height:19px!important;
    min-height:19px!important;
    font-size:6px!important;
  }
  body.mobile-ui #hud #hud-quests:focus-within{
    width:190px!important;
    height:74px!important;
    max-height:74px!important;
  }

  body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button[data-role="chat"]{
    left:max(5px,env(safe-area-inset-left))!important;
    top:72px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button[data-role="menu"]{
    right:max(5px,env(safe-area-inset-right))!important;
    top:80px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button{
    width:27px!important;
    min-width:27px!important;
    height:27px!important;
  }

  body.mobile-ui #hud #mobile-controls .mobile-right-controls{
    width:176px!important;
    height:150px!important;
    right:max(3px,env(safe-area-inset-right))!important;
    bottom:max(5px,env(safe-area-inset-bottom))!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-fixed{
    width:39px!important;
    height:40px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-tech{
    width:39px!important;
    height:39px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-punch{
    width:66px!important;
    height:67px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-train{left:83%!important;top:15%!important}
  body.mobile-ui #hud #mobile-controls .mobile-meditate{left:61%!important;top:34%!important}
  body.mobile-ui #hud #mobile-controls .mobile-power{left:37%!important;top:46%!important}
  body.mobile-ui #hud #mobile-controls .mobile-fly{left:56%!important;top:67%!important}
  body.mobile-ui #hud #mobile-controls .mobile-tech.beam{left:14%!important;top:54%!important}
  body.mobile-ui #hud #mobile-controls .mobile-tech.blast{left:15%!important;top:82%!important}
  body.mobile-ui #hud #mobile-controls .mobile-punch{left:82%!important;top:77%!important}

  body.mobile-ui #hud #mobile-controls .mobile-fixed > b,
  body.mobile-ui #hud #mobile-controls .mobile-tech > b{
    width:18px!important;
    height:18px!important;
    right:-4px!important;
    bottom:-4px!important;
    font-size:8px!important;
  }
  body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="fist"] > small{
    width:53px!important;
    height:17px!important;
    bottom:-11px!important;
    font-size:7px!important;
  }
}


/* ================================================================
   MOBILE HUD V8 — shell mobile definitivo para chat e janelas
   Tudo abaixo exige body.mobile-ui: desktop permanece intocado.
   ================================================================ */

/* ---------- BOTÕES DE AÇÃO: feedback sem deslocar coordenadas ---------- */
body.mobile-ui #hud #mobile-controls .mobile-right-controls > button.mobile-action,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > button.mobile-action:active,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > button.mobile-action.pressed,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > button.mobile-action.holding{
  transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-right-controls > button.mobile-action:active,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > button.mobile-action.pressed,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > button.mobile-action.holding{
  filter:brightness(1.15) saturate(1.06)!important;
}
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="combat"]:active,
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="combat"].pressed,
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="combat"].holding{
  transform:translate(-50%,-50%)!important;
}

/* ---------- CHAT ABERTO: painel touch real + X para fechar ---------- */
#hud-chat .mobile-chat-close{display:none}

body.mobile-ui.mobile-chat-open #hud #hud-chat.chat-mmo{
  position:absolute!important;
  left:max(7px,env(safe-area-inset-left))!important;
  right:auto!important;
  top:auto!important;
  bottom:max(7px,env(safe-area-inset-bottom))!important;
  transform:none!important;
  width:min(330px,62vw)!important;
  max-width:62vw!important;
  min-width:250px!important;
  height:min(196px,72dvh)!important;
  max-height:72dvh!important;
  min-height:150px!important;
  padding:0!important;
  opacity:.98!important;
  overflow:hidden!important;
  border:1px solid rgba(214,178,112,.24)!important;
  border-radius:10px!important;
  background:
    linear-gradient(180deg,rgba(19,15,10,.94),rgba(7,10,15,.95))!important;
  box-shadow:0 16px 36px rgba(0,0,0,.50),inset 0 1px rgba(255,226,170,.05)!important;
  z-index:95!important;
}
body.mobile-ui.mobile-chat-open #hud-chat.chat-mmo .mobile-chat-close{
  position:absolute!important;
  display:grid!important;
  place-items:center!important;
  right:5px!important;
  top:4px!important;
  z-index:20!important;
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
  min-height:26px!important;
  padding:0!important;
  border:1px solid rgba(217,184,116,.28)!important;
  border-radius:7px!important;
  background:rgba(8,11,16,.78)!important;
  color:#e7d7b5!important;
  font:800 11px/1 Arial,sans-serif!important;
  box-shadow:none!important;
  touch-action:manipulation!important;
}
body.mobile-ui.mobile-chat-open #hud-chat.chat-mmo .mobile-chat-close:active{
  color:#fff!important;
  border-color:rgba(224,87,87,.70)!important;
  background:rgba(117,31,37,.48)!important;
}
body.mobile-ui.mobile-chat-open #hud-chat.chat-mmo .chat-side-tabs{
  position:absolute!important;
  left:6px!important;
  right:37px!important;
  top:4px!important;
  bottom:auto!important;
  width:auto!important;
  height:28px!important;
  min-height:28px!important;
  padding:0!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:2px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  border:0!important;
  border-bottom:1px solid rgba(214,178,112,.10)!important;
  background:transparent!important;
  scrollbar-width:none!important;
}
body.mobile-ui.mobile-chat-open #hud-chat.chat-mmo .chat-side-tabs::-webkit-scrollbar{display:none!important}
body.mobile-ui.mobile-chat-open #hud-chat.chat-mmo .chat-side-tabs button{
  flex:0 0 26px!important;
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
  min-height:26px!important;
  transform:none!important;
}
body.mobile-ui.mobile-chat-open #hud-chat.chat-mmo .chat-side-tabs button:hover,
body.mobile-ui.mobile-chat-open #hud-chat.chat-mmo .chat-side-tabs button.on{
  transform:none!important;
}
body.mobile-ui.mobile-chat-open #hud-chat.chat-mmo .chat-side-tabs .collapse{
  display:none!important;
}
body.mobile-ui.mobile-chat-open #hud-chat.chat-mmo #output{
  position:absolute!important;
  left:7px!important;
  right:7px!important;
  top:36px!important;
  bottom:38px!important;
  padding:3px 5px!important;
  overflow-y:auto!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
  font-size:9px!important;
  line-height:1.22!important;
}
body.mobile-ui.mobile-chat-open #hud-chat.chat-mmo #chat-form{
  position:absolute!important;
  display:flex!important;
  left:7px!important;
  right:7px!important;
  bottom:6px!important;
  height:27px!important;
  gap:4px!important;
}
body.mobile-ui.mobile-chat-open #hud-chat.chat-mmo #chat-form select,
body.mobile-ui.mobile-chat-open #hud-chat.chat-mmo #chat-form input{
  height:27px!important;
  min-height:27px!important;
  font-size:9px!important;
}
body.mobile-ui.mobile-chat-open #hud-chat.chat-mmo #chat-form select{
  width:62px!important;
  flex-basis:62px!important;
}
body.mobile-ui.mobile-chat-open #hud-chat.chat-mmo #chat-emoji{
  width:27px!important;
  min-width:27px!important;
  height:27px!important;
}

/* ---------- MENU PRINCIPAL: grid compacto, não um retângulo gigante ---------- */
body.mobile-ui.mobile-menu-open #hud #hud-menu{
  display:grid!important;
  grid-template-columns:repeat(5,56px)!important;
  grid-auto-rows:58px!important;
  justify-content:center!important;
  align-content:center!important;
  gap:8px 10px!important;
  left:50%!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translate(-50%,-50%)!important;
  width:min(360px,86vw)!important;
  max-width:86vw!important;
  height:auto!important;
  max-height:78dvh!important;
  padding:14px 16px!important;
  overflow:auto!important;
  border:1px solid rgba(217,184,116,.28)!important;
  border-radius:12px!important;
  background:
    radial-gradient(100% 80% at 50% 0%,rgba(217,184,116,.07),transparent 58%),
    linear-gradient(180deg,rgba(9,14,22,.97),rgba(4,8,13,.97))!important;
  box-shadow:0 18px 42px rgba(0,0,0,.58)!important;
}
body.mobile-ui.mobile-menu-open #hud #hud-menu button{
  width:56px!important;
  height:58px!important;
  min-height:58px!important;
  flex:none!important;
  display:grid!important;
  grid-template-rows:40px 14px!important;
  place-items:center!important;
  padding:0!important;
}
body.mobile-ui.mobile-menu-open #hud #hud-menu button img{
  width:38px!important;
  height:38px!important;
}
body.mobile-ui.mobile-menu-open #hud #hud-menu button span{
  display:block!important;
  max-width:56px!important;
  font-size:7px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  text-align:center!important;
}

/* ---------- JANELAS: shell touch isolado do desktop ---------- */
body.mobile-ui #hud #hud-win{
  position:absolute!important;
  left:max(5px,env(safe-area-inset-left))!important;
  right:max(5px,env(safe-area-inset-right))!important;
  top:max(5px,env(safe-area-inset-top))!important;
  bottom:max(5px,env(safe-area-inset-bottom))!important;
  width:auto!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  min-width:0!important;
  min-height:0!important;
  transform:none!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
  border-radius:10px!important;
  z-index:110!important;
}
body.mobile-ui #hud #hud-win[hidden]{display:none!important}
body.mobile-ui #hud #hud-win::before,
body.mobile-ui #hud #hud-win::after{display:none!important}
body.mobile-ui #hud #hud-win > header{
  position:relative!important;
  flex:0 0 40px!important;
  min-height:40px!important;
  height:40px!important;
  padding:0 7px 0 11px!important;
  gap:7px!important;
  overflow:hidden!important;
}
body.mobile-ui #hud #hud-win > header > b{
  flex:0 0 auto!important;
  max-width:34vw!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  font-size:11px!important;
  letter-spacing:.10em!important;
}
body.mobile-ui #hud #hud-win .wtabs{
  flex:1 1 auto!important;
  min-width:0!important;
  height:40px!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
}
body.mobile-ui #hud #hud-win .wtabs::-webkit-scrollbar{display:none!important}
body.mobile-ui #hud #hud-win .wtabs button{
  flex:0 0 auto!important;
  height:38px!important;
  min-height:38px!important;
  padding:0 8px!important;
  font-size:9px!important;
  white-space:nowrap!important;
}
body.mobile-ui #hud #hud-win > header .x{
  flex:0 0 30px!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  margin-left:2px!important;
  border-radius:7px!important;
}
body.mobile-ui #hud #hud-win > .wbody{
  flex:1 1 auto!important;
  min-width:0!important;
  min-height:0!important;
  height:auto!important;
  max-height:none!important;
  padding:8px 10px 10px!important;
  overflow:auto!important;
  overscroll-behavior:contain!important;
  -webkit-overflow-scrolling:touch!important;
  font-size:10px!important;
}

/* Ao abrir uma janela, gameplay touch sai do caminho. */
body.mobile-ui.mobile-window-open #mobile-controls{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
body.mobile-ui.mobile-window-open #hud-unit,
body.mobile-ui.mobile-window-open #hud-mini,
body.mobile-ui.mobile-window-open #hud-quests,
body.mobile-ui.mobile-window-open #hud-chat{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* ---------- MAPA DO MUNDO: ocupa a janela, em vez de canvas minúsculo ---------- */
body.mobile-ui #hud #hud-win.win-map > .wbody{
  display:grid!important;
  grid-template-rows:minmax(0,1fr) auto!important;
  align-items:stretch!important;
  overflow:hidden!important;
  padding:7px 8px 6px!important;
  background:#020304!important;
}
body.mobile-ui #hud #hud-win.win-map #bigmap{
  display:block!important;
  place-self:center!important;
  width:100%!important;
  height:100%!important;
  max-width:100%!important;
  max-height:100%!important;
  min-width:0!important;
  min-height:0!important;
  object-fit:contain!important;
  image-rendering:pixelated!important;
  background:#000!important;
}
body.mobile-ui #hud #hud-win.win-map #bigmap-info{
  min-height:18px!important;
  margin:5px 2px 0!important;
  padding:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:8px!important;
  line-height:18px!important;
}

/* ---------- CONTEÚDO DAS JANELAS: densidade touch ---------- */
body.mobile-ui #hud #hud-win .mm-sec,
body.mobile-ui #hud #hud-win .verbcat,
body.mobile-ui #hud #hud-win .settings-section-head h3{
  margin:8px 0 5px!important;
  font-size:9px!important;
}
body.mobile-ui #hud #hud-win .mm-columns,
body.mobile-ui #hud #hud-win .mm-attr-grid,
body.mobile-ui #hud #hud-win .mm-title-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
}
body.mobile-ui #hud #hud-win .mm-attr-card,
body.mobile-ui #hud #hud-win .mm-title,
body.mobile-ui #hud #hud-win .settings-toggle-card,
body.mobile-ui #hud #hud-win .guide-card,
body.mobile-ui #hud #hud-win .visual-filter-card,
body.mobile-ui #hud #hud-win .game-menu-card,
body.mobile-ui #hud #hud-win .sound-setting{
  padding:7px 8px!important;
}
body.mobile-ui #hud #hud-win .mm-kv,
body.mobile-ui #hud #hud-win .mm-vital,
body.mobile-ui #hud #hud-win .mm-attr-mini,
body.mobile-ui #hud #hud-win .mm-foot-row{
  font-size:9px!important;
}
body.mobile-ui #hud #hud-win .settings-section-head p,
body.mobile-ui #hud #hud-win .settings-section > p,
body.mobile-ui #hud #hud-win .mm-hint,
body.mobile-ui #hud #hud-win .hint{
  font-size:8px!important;
}

/* Habilidades: busca fixa e cards em duas colunas no landscape. */
body.mobile-ui #hud #hud-win .skills-toolbar{
  position:sticky!important;
  top:0!important;
  z-index:8!important;
  display:grid!important;
  grid-template-columns:minmax(120px,1fr) minmax(0,1.5fr)!important;
  gap:5px!important;
  margin:0 0 6px!important;
  padding:0 0 5px!important;
  background:linear-gradient(180deg,var(--mm-bg) 78%,transparent)!important;
}
body.mobile-ui #hud #hud-win .skills-search{
  min-height:32px!important;
  width:100%!important;
  padding:0 8px!important;
}
body.mobile-ui #hud #hud-win .skills-filters{
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  margin:0!important;
  gap:3px!important;
  scrollbar-width:none!important;
}
body.mobile-ui #hud #hud-win .skills-filters::-webkit-scrollbar{display:none!important}
body.mobile-ui #hud #hud-win .skills-filters button{
  flex:0 0 auto!important;
  min-height:30px!important;
  padding:0 8px!important;
  font-size:8px!important;
}
body.mobile-ui #hud #hud-win .skills{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:5px!important;
}
body.mobile-ui #hud #hud-win .skill{
  min-height:46px!important;
  padding:5px 7px!important;
}
body.mobile-ui #hud #hud-win .skill .si{
  width:32px!important;
  height:32px!important;
}
body.mobile-ui #hud #hud-win .skill-text b{font-size:9px!important}
body.mobile-ui #hud #hud-win .skill-text small{font-size:7px!important}

/* Personagem e Inventário preservam duas colunas no landscape touch. */
body.mobile-ui #hud #hud-win .mm-char{
  grid-template-columns:minmax(150px,34%) minmax(0,1fr)!important;
  gap:8px!important;
}
body.mobile-ui #hud #hud-win .mm-portrait-stage{
  height:min(48dvh,180px)!important;
  min-height:120px!important;
}
body.mobile-ui #hud #hud-win .mm-portrait{
  width:100%!important;
  height:100%!important;
  max-width:180px!important;
  object-fit:contain!important;
}
body.mobile-ui #hud #hud-win .mm-nameplate{padding:6px 8px 8px!important}
body.mobile-ui #hud #hud-win .mm-nameplate h2{font-size:15px!important;margin:2px 0 4px!important}
body.mobile-ui #hud #hud-win .mm-title-line{font-size:7px!important}
body.mobile-ui #hud #hud-win .mm-chips{gap:3px!important}
body.mobile-ui #hud #hud-win .mm-chips span{padding:1px 5px!important;font-size:7px!important}
body.mobile-ui #hud #hud-win .mm-bp-block{padding:7px 9px!important}
body.mobile-ui #hud #hud-win .mm-bp-block strong{font-size:20px!important}
body.mobile-ui #hud #hud-win .mm-bp-block small{font-size:7px!important}

body.mobile-ui #hud #hud-win .mm-inv{
  grid-template-columns:minmax(170px,40%) minmax(0,1fr)!important;
  gap:8px!important;
}
body.mobile-ui #hud #hud-win .mm-equip{padding:7px!important}
body.mobile-ui #hud #hud-win .mm-doll{
  grid-template-columns:44px minmax(0,1fr) 44px!important;
  gap:4px!important;
}
body.mobile-ui #hud #hud-win .mm-doll-stage{
  min-height:0!important;
  height:min(50dvh,180px)!important;
}
body.mobile-ui #hud #hud-win .mm-doll-cv{
  width:100%!important;
  height:100%!important;
  max-width:150px!important;
  object-fit:contain!important;
}
body.mobile-ui #hud #hud-win .mm-slot,
body.mobile-ui #hud #hud-win .mm-cell{
  width:44px!important;
  height:44px!important;
}
body.mobile-ui #hud #hud-win .mm-slot canvas,
body.mobile-ui #hud #hud-win .mm-cell canvas{
  width:31px!important;
  height:31px!important;
}
body.mobile-ui #hud #hud-win .mm-grid{
  grid-template-columns:repeat(auto-fill,44px)!important;
  gap:4px!important;
  margin-top:7px!important;
}
body.mobile-ui #hud #hud-win .mm-filters,
body.mobile-ui #hud #hud-win .mm-bag-tools{
  flex-wrap:nowrap!important;
  overflow-x:auto!important;
  margin-top:6px!important;
  scrollbar-width:none!important;
}
body.mobile-ui #hud #hud-win .mm-filters::-webkit-scrollbar,
body.mobile-ui #hud #hud-win .mm-bag-tools::-webkit-scrollbar{display:none!important}
body.mobile-ui #hud #hud-win .mm-filters button,
body.mobile-ui #hud #hud-win .mm-bag-tools button{
  flex:0 0 auto!important;
  min-height:30px!important;
  padding:0 8px!important;
  font-size:8px!important;
}

/* Opções / conta / cards gerais. */
body.mobile-ui #hud #hud-win .settings-option-grid,
body.mobile-ui #hud #hud-win .settings-hud-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:6px!important;
}
body.mobile-ui #hud #hud-win .account-summary{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:5px!important;
}
body.mobile-ui #hud #hud-win .account-password-grid{
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:5px!important;
}
body.mobile-ui #hud #hud-win .account-card{padding:8px!important;margin:5px 0!important}
body.mobile-ui #hud #hud-win .build-premium-lock{
  max-width:90%!important;
  margin:10px auto!important;
  padding:14px!important;
}

/* Landscape baixo: aproveita cada pixel sem virar desktop espremido. */
@media (max-height:420px) and (orientation:landscape){
  body.mobile-ui #hud #hud-win{
    left:max(3px,env(safe-area-inset-left))!important;
    right:max(3px,env(safe-area-inset-right))!important;
    top:max(3px,env(safe-area-inset-top))!important;
    bottom:max(3px,env(safe-area-inset-bottom))!important;
    border-radius:7px!important;
  }
  body.mobile-ui #hud #hud-win > header{
    flex-basis:34px!important;
    min-height:34px!important;
    height:34px!important;
  }
  body.mobile-ui #hud #hud-win > header > b{
    max-width:29vw!important;
    font-size:9px!important;
  }
  body.mobile-ui #hud #hud-win .wtabs{height:34px!important}
  body.mobile-ui #hud #hud-win .wtabs button{
    height:32px!important;
    min-height:32px!important;
    padding:0 7px!important;
    font-size:8px!important;
  }
  body.mobile-ui #hud #hud-win > header .x{
    width:27px!important;height:27px!important;min-width:27px!important;min-height:27px!important;
  }
  body.mobile-ui #hud #hud-win > .wbody{padding:6px 7px 7px!important}
  body.mobile-ui #hud #hud-win.win-map #bigmap-info{font-size:7px!important;line-height:15px!important;min-height:15px!important}

  body.mobile-ui.mobile-menu-open #hud #hud-menu{
    grid-template-columns:repeat(5,50px)!important;
    grid-auto-rows:52px!important;
    gap:6px 8px!important;
    width:min(322px,82vw)!important;
    padding:10px 12px!important;
  }
  body.mobile-ui.mobile-menu-open #hud #hud-menu button{
    width:50px!important;height:52px!important;min-height:52px!important;
    grid-template-rows:36px 12px!important;
  }
  body.mobile-ui.mobile-menu-open #hud #hud-menu button img{width:34px!important;height:34px!important}
  body.mobile-ui.mobile-menu-open #hud #hud-menu button span{max-width:50px!important;font-size:6px!important}

  body.mobile-ui.mobile-chat-open #hud #hud-chat.chat-mmo{
    width:min(315px,60vw)!important;
    max-width:60vw!important;
    height:min(185px,72dvh)!important;
    min-height:142px!important;
  }
}

/* Portrait: grids voltam a uma coluna onde leitura vertical é melhor. */
@media (orientation:portrait){
  body.mobile-ui.mobile-menu-open #hud #hud-menu{
    grid-template-columns:repeat(3,64px)!important;
    grid-auto-rows:66px!important;
    width:min(260px,84vw)!important;
  }
  body.mobile-ui #hud #hud-win .mm-char,
  body.mobile-ui #hud #hud-win .mm-inv,
  body.mobile-ui #hud #hud-win .settings-option-grid,
  body.mobile-ui #hud #hud-win .settings-hud-grid,
  body.mobile-ui #hud #hud-win .account-password-grid{
    grid-template-columns:1fr!important;
  }
  body.mobile-ui #hud #hud-win .mm-columns,
  body.mobile-ui #hud #hud-win .mm-attr-grid,
  body.mobile-ui #hud #hud-win .mm-title-grid{
    grid-template-columns:1fr!important;
  }
  body.mobile-ui #hud #hud-win .skills-toolbar{grid-template-columns:1fr!important}
  body.mobile-ui #hud #hud-win .skills{grid-template-columns:1fr!important}
  body.mobile-ui.mobile-chat-open #hud #hud-chat.chat-mmo{
    left:50%!important;
    bottom:max(8px,env(safe-area-inset-bottom))!important;
    transform:translateX(-50%)!important;
    width:92vw!important;
    max-width:92vw!important;
    height:min(360px,55dvh)!important;
  }
}


/* Menu principal aberto: mantém apenas o próprio menu e os dois atalhos laterais. */
body.mobile-ui.mobile-menu-open #mobile-controls .mobile-left-controls,
body.mobile-ui.mobile-menu-open #mobile-controls .mobile-right-controls,
body.mobile-ui.mobile-menu-open #mobile-controls #mobile-hotbar-dock{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}


/* ================================================================
   MOBILE HUD V9 — opções completas e leitura clara das configurações
   ================================================================ */
body.mobile-ui #hud #hud-win.win-opts .mobile-fx-restore{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:9px!important;
  margin:0 0 8px!important;
  padding:8px 9px!important;
  border:1px solid rgba(255,181,62,.28)!important;
  border-radius:8px!important;
  background:linear-gradient(135deg,rgba(255,159,34,.10),rgba(7,18,31,.62))!important;
}
body.mobile-ui #hud #hud-win.win-opts .mobile-fx-restore b{
  display:block!important;
  color:#ffe0a0!important;
  font-size:10px!important;
}
body.mobile-ui #hud #hud-win.win-opts .mobile-fx-restore small{
  display:block!important;
  margin-top:2px!important;
  color:#aebdce!important;
  font-size:7.5px!important;
  line-height:1.25!important;
}
body.mobile-ui #hud #hud-win.win-opts .mobile-fx-restore button{
  min-height:31px!important;
  padding:0 9px!important;
  white-space:nowrap!important;
  font-size:8px!important;
}

/* Em landscape, todas as categorias de Opções ficam visíveis no cabeçalho. */
@media (orientation:landscape){
  body.mobile-ui #hud #hud-win.win-opts > header > b{
    flex:0 0 74px!important;
    max-width:74px!important;
    font-size:8px!important;
  }
  body.mobile-ui #hud #hud-win.win-opts .wtabs{
    overflow:visible!important;
    gap:1px!important;
  }
  body.mobile-ui #hud #hud-win.win-opts .wtabs button{
    flex:1 1 0!important;
    min-width:0!important;
    padding:0 3px!important;
    font-size:7px!important;
    letter-spacing:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
}

/* Portrait mantém swipe horizontal, mas torna evidente que existem mais abas. */
@media (orientation:portrait){
  body.mobile-ui #hud #hud-win.win-opts .wtabs{
    overflow-x:auto!important;
    border-bottom:1px solid rgba(217,184,116,.10)!important;
  }
  body.mobile-ui #hud #hud-win.win-opts .wtabs button{
    min-width:72px!important;
  }
  body.mobile-ui #hud #hud-win.win-opts .mobile-fx-restore{
    grid-template-columns:1fr!important;
  }
}

/* O joystick fica visualmente suave; a direção real agora alimenta o predictor local. */
body.mobile-ui #mobile-controls .mobile-joystick-knob{
  transition:transform .025s linear!important;
  will-change:transform!important;
}


/* ================================================================
   MOBILE HUD V10 — cluster compacto sem badges de teclado
   Referência: botões quase encaixados/encostados, preservando imagens.
   ================================================================ */

/* No mobile, não mostramos letras de teclado. Desktop continua intacto. */
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action > b{
  display:none!important;
}

/* X/B continuam configuráveis e mostram somente a imagem da técnica. */
body.mobile-ui #hud #mobile-controls .mobile-tech .mobile-skill-ic{
  width:72%!important;
  height:72%!important;
}
body.mobile-ui #hud #mobile-controls .mobile-slot-edit{
  width:16px!important;
  height:16px!important;
  left:-3px!important;
  top:-3px!important;
  font-size:8px!important;
}

/* Drag/Grab usa um ícone próprio; Falar continua usando action-talk.png. */
body.mobile-ui #hud #mobile-controls .mobile-grab .mobile-context-icon{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  z-index:4!important;
  color:#ffe6a3!important;
  font-size:18px!important;
  line-height:1!important;
  text-shadow:0 2px 3px rgba(0,0,0,.85)!important;
  pointer-events:none!important;
}
body.mobile-ui #hud #mobile-controls .mobile-context .mobile-context-icon{display:none!important}

/* Botões contextuais fazem parte do mesmo bloco, mas são menores. */
body.mobile-ui #hud #mobile-controls .mobile-contextual{
  width:31px!important;
  height:31px!important;
  opacity:.92!important;
  z-index:9!important;
}
body.mobile-ui #hud #mobile-controls .mobile-grab{
  border:2px solid #d98916!important;
}

/* Agrupamento principal: propositalmente próximo/levemente sobreposto. */
body.mobile-ui #hud #mobile-controls .mobile-right-controls{
  width:184px!important;
  height:162px!important;
  right:max(4px,env(safe-area-inset-right))!important;
  bottom:max(5px,env(safe-area-inset-bottom))!important;
}
body.mobile-ui #hud #mobile-controls .mobile-fixed{
  width:43px!important;
  height:44px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-tech{
  width:44px!important;
  height:44px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-punch{
  width:69px!important;
  height:70px!important;
}

/* Ordem e encaixe seguindo a referência do jogador. */
body.mobile-ui #hud #mobile-controls .mobile-tech.beam{
  left:17%!important;
  top:48%!important;
  transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-tech.blast{
  left:19%!important;
  top:78%!important;
  transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-power{
  left:45%!important;
  top:39%!important;
  transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-meditate{
  left:67%!important;
  top:31%!important;
  transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-train{
  left:88%!important;
  top:15%!important;
  transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-fly{
  left:62%!important;
  top:67%!important;
  transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-punch{
  left:87%!important;
  top:77%!important;
  transform:translate(-50%,-50%)!important;
}

/* Falar e Pegar/Drag ficam encaixados à esquerda do conjunto. */
body.mobile-ui #hud #mobile-controls .mobile-context{
  left:3%!important;
  top:19%!important;
  transform:translate(-50%,-50%)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-grab{
  left:5%!important;
  top:29%!important;
  transform:translate(-50%,-50%)!important;
}

/* Soco mantém o nome, pois é ação do jogo e não tecla física. */
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="fist"] > small{
  display:grid!important;
  width:55px!important;
  height:18px!important;
  bottom:-11px!important;
  font-size:7px!important;
}

/* O feedback touch não muda posição nem escala do cluster. */
body.mobile-ui #hud #mobile-controls .mobile-right-controls > button.mobile-action,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > button.mobile-action:active,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > button.mobile-action.pressed,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > button.mobile-action.holding{
  transform:translate(-50%,-50%)!important;
}

/* Celulares baixos (como os prints 560x278) ficam ainda mais fechados. */
@media (max-height:360px) and (orientation:landscape){
  body.mobile-ui #hud #mobile-controls .mobile-right-controls{
    width:160px!important;
    height:140px!important;
    right:max(3px,env(safe-area-inset-right))!important;
    bottom:max(4px,env(safe-area-inset-bottom))!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-fixed{
    width:38px!important;
    height:39px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-tech{
    width:39px!important;
    height:39px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-punch{
    width:61px!important;
    height:62px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-contextual{
    width:27px!important;
    height:27px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-grab .mobile-context-icon{
    font-size:15px!important;
  }

  body.mobile-ui #hud #mobile-controls .mobile-tech.beam{left:18%!important;top:49%!important}
  body.mobile-ui #hud #mobile-controls .mobile-tech.blast{left:20%!important;top:79%!important}
  body.mobile-ui #hud #mobile-controls .mobile-power{left:46%!important;top:40%!important}
  body.mobile-ui #hud #mobile-controls .mobile-meditate{left:68%!important;top:32%!important}
  body.mobile-ui #hud #mobile-controls .mobile-train{left:88%!important;top:16%!important}
  body.mobile-ui #hud #mobile-controls .mobile-fly{left:63%!important;top:68%!important}
  body.mobile-ui #hud #mobile-controls .mobile-punch{left:87%!important;top:78%!important}
  body.mobile-ui #hud #mobile-controls .mobile-context{left:3%!important;top:18%!important}
  body.mobile-ui #hud #mobile-controls .mobile-grab{left:5%!important;top:29%!important}

  body.mobile-ui #hud #mobile-controls .mobile-slot-edit{
    width:14px!important;
    height:14px!important;
    font-size:7px!important;
  }
  body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="fist"] > small{
    width:49px!important;
    height:16px!important;
    bottom:-10px!important;
    font-size:6.5px!important;
  }
}

/* Tablet: mesma composição compacta, apenas um pouco maior. */
body.mobile-ui.tablet-ui #hud #mobile-controls .mobile-right-controls{
  width:218px!important;
  height:190px!important;
}
body.mobile-ui.tablet-ui #hud #mobile-controls .mobile-fixed{
  width:50px!important;
  height:51px!important;
}
body.mobile-ui.tablet-ui #hud #mobile-controls .mobile-tech{
  width:50px!important;
  height:50px!important;
}
body.mobile-ui.tablet-ui #hud #mobile-controls .mobile-punch{
  width:79px!important;
  height:80px!important;
}
body.mobile-ui.tablet-ui #hud #mobile-controls .mobile-contextual{
  width:35px!important;
  height:35px!important;
}


/* ================================================================
   MOBILE HUD V11 — cluster encaixado + indicadores fora da cabeça
   ================================================================ */

/* Indicadores/status do próprio player ficam na HUD, não sobre a sprite. */
body.mobile-ui #mobile-self-indicators{
  position:absolute;
  right:86px;
  top:max(7px,env(safe-area-inset-top));
  z-index:44;
  display:flex;
  flex-direction:row-reverse;
  align-items:center;
  gap:4px;
  max-width:120px;
  min-height:30px;
  pointer-events:none;
}
body.mobile-ui #mobile-self-indicators .mobile-self-indicator{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  translate:none!important;
  scale:1!important;
  flex:0 0 auto;
  min-width:28px;
  min-height:28px;
  display:grid;
  place-items:center;
  padding:4px 7px;
  border-radius:8px;
  border:1px solid rgba(112,168,225,.22);
  background:rgba(5,10,17,.72);
  box-shadow:0 3px 10px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.05);
  font-size:15px!important;
  line-height:1!important;
  text-shadow:0 1px 2px #000!important;
  animation:none!important;
}
body.mobile-ui #mobile-self-indicators .mobile-self-indicator.fl-status{
  color:#eaf5ff!important;
}
body.mobile-ui #mobile-self-indicators .mobile-self-indicator.fl-reaction{
  color:#ffe28b!important;
}
body:not(.mobile-ui) #mobile-self-indicators{display:none!important}

/* Cluster principal extremamente compacto: centros baseados na referência enviada. */
body.mobile-ui #hud #mobile-controls .mobile-right-controls{
  width:170px!important;
  height:150px!important;
  right:max(3px,env(safe-area-inset-right))!important;
  bottom:max(4px,env(safe-area-inset-bottom))!important;
}
body.mobile-ui #hud #mobile-controls .mobile-fixed{
  width:40px!important;
  height:41px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-tech{
  width:42px!important;
  height:42px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-punch{
  width:66px!important;
  height:67px!important;
}

/* posição dos centros: X/B esquerda, G/R/T arco superior, F encaixado, Soco direita */
body.mobile-ui #hud #mobile-controls .mobile-tech.beam{
  left:11%!important;
  top:48%!important;
}
body.mobile-ui #hud #mobile-controls .mobile-tech.blast{
  left:13%!important;
  top:80%!important;
}
body.mobile-ui #hud #mobile-controls .mobile-power{
  left:39%!important;
  top:37%!important;
}
body.mobile-ui #hud #mobile-controls .mobile-meditate{
  left:61%!important;
  top:28%!important;
}
body.mobile-ui #hud #mobile-controls .mobile-train{
  left:87%!important;
  top:15%!important;
}
body.mobile-ui #hud #mobile-controls .mobile-fly{
  left:61%!important;
  top:65%!important;
}
body.mobile-ui #hud #mobile-controls .mobile-punch{
  left:87%!important;
  top:79%!important;
}

/* Falar e Pegar/Drag encaixam na borda esquerda, sem badge de teclado. */
body.mobile-ui #hud #mobile-controls .mobile-contextual{
  width:28px!important;
  height:28px!important;
}
body.mobile-ui #hud #mobile-controls .mobile-context{
  left:-1%!important;
  top:16%!important;
}
body.mobile-ui #hud #mobile-controls .mobile-grab{
  left:0!important;
  top:30%!important;
}
body.mobile-ui #hud #mobile-controls .mobile-grab .mobile-context-icon{
  font-size:15px!important;
}

/* Letras do teclado nunca aparecem no mobile; edição X/B permanece como caneta. */
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action > b{
  display:none!important;
}

/* Sem deslocamento/escala quando toca. */
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action:active,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action.pressed,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action.holding{
  transform:translate(-50%,-50%)!important;
}

/* Tela baixa: ainda mais fechado, preservando alcance do polegar. */
@media (max-height:360px) and (orientation:landscape){
  body.mobile-ui #hud #mobile-controls .mobile-right-controls{
    width:154px!important;
    height:134px!important;
    right:max(2px,env(safe-area-inset-right))!important;
    bottom:max(3px,env(safe-area-inset-bottom))!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-fixed{
    width:36px!important;
    height:37px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-tech{
    width:38px!important;
    height:38px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-punch{
    width:60px!important;
    height:61px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-contextual{
    width:25px!important;
    height:25px!important;
  }
  body.mobile-ui #hud #mobile-controls .mobile-slot-edit{
    width:13px!important;
    height:13px!important;
    left:-2px!important;
    top:-2px!important;
    font-size:6.5px!important;
  }
  body.mobile-ui #mobile-self-indicators{
    right:80px!important;
    top:5px!important;
    gap:3px!important;
  }
  body.mobile-ui #mobile-self-indicators .mobile-self-indicator{
    min-width:24px!important;
    min-height:24px!important;
    padding:3px 5px!important;
    font-size:13px!important;
  }
}

/* Tablet só aumenta o conjunto, sem voltar a espalhar os botões. */
body.mobile-ui.tablet-ui #hud #mobile-controls .mobile-right-controls{
  width:195px!important;
  height:170px!important;
}
body.mobile-ui.tablet-ui #hud #mobile-controls .mobile-fixed{
  width:46px!important;
  height:47px!important;
}
body.mobile-ui.tablet-ui #hud #mobile-controls .mobile-tech{
  width:47px!important;
  height:47px!important;
}
body.mobile-ui.tablet-ui #hud #mobile-controls .mobile-punch{
  width:74px!important;
  height:75px!important;
}


/* ================================================================
   MOBILE HUD V12 — cluster travado por pixels (sem dispersão)
   ================================================================ */

/*
  Percentuais acumulados nas versões anteriores ainda deixavam o conjunto
  visualmente espalhado. A partir daqui o phone usa centros em pixels,
  iguais em qualquer resolução landscape, mantendo os círculos encostados.
*/
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-right-controls{
  width:142px!important;
  height:126px!important;
  right:max(4px,env(safe-area-inset-right))!important;
  bottom:max(5px,env(safe-area-inset-bottom))!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-fixed{
  width:39px!important;
  height:40px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-tech{
  width:40px!important;
  height:40px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-punch{
  width:62px!important;
  height:63px!important;
}

/* Centros exatos do conjunto */
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-tech.beam{
  left:27px!important;
  top:58px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-tech.blast{
  left:28px!important;
  top:96px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-power{
  left:59px!important;
  top:49px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-meditate{
  left:89px!important;
  top:38px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-train{
  left:119px!important;
  top:23px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-fly{
  left:89px!important;
  top:80px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-punch{
  left:117px!important;
  top:98px!important;
}

/* Contextuais encaixados no ombro esquerdo do cluster */
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-contextual{
  width:27px!important;
  height:27px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-context{
  left:4px!important;
  top:27px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-grab{
  left:5px!important;
  top:43px!important;
}

/* Sem badge de teclado no mobile; só arte/ação. */
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action > b{
  display:none!important;
}

/* A posição não muda quando o dedo pressiona. */
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action:active,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action.pressed,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action.holding{
  transform:translate(-50%,-50%)!important;
}

/* Landscape curto: mesmos centros, apenas 8% menores. */
@media (max-height:360px) and (orientation:landscape){
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-right-controls{
    width:136px!important;
    height:121px!important;
  }
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-fixed{
    width:37px!important;
    height:38px!important;
  }
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-tech{
    width:38px!important;
    height:38px!important;
  }
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-punch{
    width:59px!important;
    height:60px!important;
  }

  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-tech.beam{left:25px!important;top:56px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-tech.blast{left:26px!important;top:91px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-power{left:56px!important;top:47px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-meditate{left:84px!important;top:36px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-train{left:113px!important;top:22px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-fly{left:84px!important;top:76px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-punch{left:112px!important;top:94px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-context{left:3px!important;top:26px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-grab{left:4px!important;top:41px!important}
}

/* Portrait usa o mesmo desenho compacto em vez de reespalhar por porcentagens. */
@media (orientation:portrait){
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-right-controls{
    width:142px!important;
    height:126px!important;
  }
}


/* ================================================================
   MOBILE HUD V13 — confirmação acima de tudo + cluster compacto estável
   ================================================================ */

/* Confirmações de trocar personagem/sair sempre acima da janela de opções. */
body.mobile-ui #hud #hud-confirm{
  position:fixed!important;
  inset:0!important;
  z-index:2000!important;
  display:grid!important;
  place-items:center!important;
  padding:12px!important;
  background:rgba(0,0,0,.68)!important;
}
body.mobile-ui #hud #hud-confirm[hidden]{
  display:none!important;
}
body.mobile-ui #hud #hud-confirm .hud-confirm-card{
  width:min(380px,88vw)!important;
  max-width:88vw!important;
  padding:18px 20px 16px!important;
  border-radius:10px!important;
}
body.mobile-ui #hud #hud-confirm .hud-confirm-card h3{
  font-size:14px!important;
  margin:5px 0 7px!important;
}
body.mobile-ui #hud #hud-confirm .hud-confirm-card p{
  max-width:320px!important;
  margin:0 auto 14px!important;
  font-size:9px!important;
}
body.mobile-ui #hud #hud-confirm .hud-confirm-actions{
  gap:7px!important;
}
body.mobile-ui #hud #hud-confirm .hud-confirm-actions button{
  min-width:104px!important;
  min-height:34px!important;
  padding:0 12px!important;
  font-size:9px!important;
}

/*
  Cluster sem sobreposição:
  - X/B: coluna esquerda
  - G/R/T: arco superior
  - F: centro inferior
  - Soco: canto inferior direito
  - Falar/Grab: contextuais pequenos fora do miolo
*/
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-right-controls{
  width:190px!important;
  height:150px!important;
  right:max(4px,env(safe-area-inset-right))!important;
  bottom:max(5px,env(safe-area-inset-bottom))!important;
  overflow:visible!important;
}

body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-fixed{
  width:40px!important;
  height:41px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-tech{
  width:40px!important;
  height:40px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-punch{
  width:62px!important;
  height:63px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-contextual{
  width:27px!important;
  height:27px!important;
}

/* posições absolutas, com folga mínima entre os círculos */
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-context{
  left:8px!important;
  top:20px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-grab{
  left:8px!important;
  top:50px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-tech.beam{
  left:40px!important;
  top:72px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-tech.blast{
  left:40px!important;
  top:113px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-power{
  left:78px!important;
  top:58px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-meditate{
  left:115px!important;
  top:42px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-train{
  left:153px!important;
  top:24px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-fly{
  left:116px!important;
  top:88px!important;
}
body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-punch{
  left:158px!important;
  top:120px!important;
}

/* sem letras de teclado no mobile */
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action > b{
  display:none!important;
}

/* feedback sem mudar posição */
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action:active,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action.pressed,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action.holding{
  transform:translate(-50%,-50%)!important;
}

/* bandeja dos status do próprio jogador: longe da cabeça e do minimapa */
body.mobile-ui #mobile-self-indicators{
  position:absolute!important;
  left:max(8px,env(safe-area-inset-left))!important;
  right:auto!important;
  top:54px!important;
  z-index:48!important;
  display:flex!important;
  flex-direction:row!important;
  gap:4px!important;
  max-width:160px!important;
  pointer-events:none!important;
}
body.mobile-ui #mobile-self-indicators .mobile-self-indicator{
  position:relative!important;
  left:auto!important;
  top:auto!important;
  transform:none!important;
  min-width:26px!important;
  min-height:26px!important;
  padding:3px 6px!important;
  border-radius:7px!important;
  background:rgba(5,10,17,.78)!important;
  border:1px solid rgba(123,170,216,.22)!important;
  box-shadow:0 3px 10px rgba(0,0,0,.28)!important;
  font-size:14px!important;
  line-height:1!important;
  animation:none!important;
}

/* em telas muito baixas reduz tudo levemente sem empilhar */
@media (max-height:360px) and (orientation:landscape){
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-right-controls{
    width:182px!important;
    height:144px!important;
  }
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-fixed{
    width:38px!important;
    height:39px!important;
  }
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-tech{
    width:38px!important;
    height:38px!important;
  }
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-punch{
    width:59px!important;
    height:60px!important;
  }
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-contextual{
    width:25px!important;
    height:25px!important;
  }

  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-context{left:7px!important;top:19px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-grab{left:7px!important;top:47px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-tech.beam{left:38px!important;top:69px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-tech.blast{left:38px!important;top:108px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-power{left:75px!important;top:56px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-meditate{left:110px!important;top:40px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-train{left:146px!important;top:23px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-fly{left:111px!important;top:84px!important}
  body.mobile-ui:not(.tablet-ui) #hud #mobile-controls .mobile-punch{left:151px!important;top:115px!important}

  body.mobile-ui #mobile-self-indicators{
    left:7px!important;
    top:48px!important;
  }
}


/* ================================================================
   MOBILE HUD V14 — GEOMETRIA DO DESKTOP 1:1
   Não redesenha os botões individualmente. Replica as proporções e
   coordenadas originais do #hud-actions e escala o conjunto inteiro.
   ================================================================ */

body.mobile-ui #hud #mobile-controls .mobile-right-controls{
  --ma:.55px;
  width:calc(540 * var(--ma))!important;
  height:calc(470 * var(--ma))!important;
  right:max(3px,env(safe-area-inset-right))!important;
  bottom:max(3px,env(safe-area-inset-bottom))!important;
  overflow:visible!important;
}

/* Todas as ações usam posicionamento desktop: right/bottom + dimensões originais. */
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action{
  left:auto!important;
  top:auto!important;
  transform:none!important;
  margin:0!important;
}

/* Soco: desktop 176x178; right 8; bottom 54. */
body.mobile-ui #hud #mobile-controls .mobile-punch{
  width:calc(176 * var(--ma))!important;
  height:calc(178 * var(--ma))!important;
  right:calc(8 * var(--ma))!important;
  bottom:calc(54 * var(--ma))!important;
}

/* Treinar: desktop 116x118; right 30; bottom 268. */
body.mobile-ui #hud #mobile-controls .mobile-train{
  width:calc(116 * var(--ma))!important;
  height:calc(118 * var(--ma))!important;
  right:calc(30 * var(--ma))!important;
  bottom:calc(268 * var(--ma))!important;
}

/* Meditar: desktop 116x118; right 146; bottom 204. */
body.mobile-ui #hud #mobile-controls .mobile-meditate{
  width:calc(116 * var(--ma))!important;
  height:calc(118 * var(--ma))!important;
  right:calc(146 * var(--ma))!important;
  bottom:calc(204 * var(--ma))!important;
}

/* Voar: desktop 120x122; right 202; bottom 76. */
body.mobile-ui #hud #mobile-controls .mobile-fly{
  width:calc(120 * var(--ma))!important;
  height:calc(122 * var(--ma))!important;
  right:calc(202 * var(--ma))!important;
  bottom:calc(76 * var(--ma))!important;
}

/* Power Up: desktop 104x106; right 262; bottom 194. */
body.mobile-ui #hud #mobile-controls .mobile-power{
  width:calc(104 * var(--ma))!important;
  height:calc(106 * var(--ma))!important;
  right:calc(262 * var(--ma))!important;
  bottom:calc(194 * var(--ma))!important;
}

/* X/B: desktop 96x96 e posições finais do HUD original. */
body.mobile-ui #hud #mobile-controls .mobile-tech{
  width:calc(96 * var(--ma))!important;
  height:calc(96 * var(--ma))!important;
}
body.mobile-ui #hud #mobile-controls .mobile-tech.beam{
  right:calc(356 * var(--ma))!important;
  bottom:calc(152 * var(--ma))!important;
}
body.mobile-ui #hud #mobile-controls .mobile-tech.blast{
  right:calc(324 * var(--ma))!important;
  bottom:calc(44 * var(--ma))!important;
}

/* Falar ocupa a posição desktop original; aparece apenas quando disponível. */
body.mobile-ui #hud #mobile-controls .mobile-context{
  width:calc(100 * var(--ma))!important;
  height:calc(100 * var(--ma))!important;
  right:calc(150 * var(--ma))!important;
  bottom:calc(334 * var(--ma))!important;
}

/* Grab/Drag fica ao lado de Falar sem alterar a geometria principal. */
body.mobile-ui #hud #mobile-controls .mobile-grab{
  width:calc(78 * var(--ma))!important;
  height:calc(78 * var(--ma))!important;
  right:calc(260 * var(--ma))!important;
  bottom:calc(334 * var(--ma))!important;
}
body.mobile-ui #hud #mobile-controls .mobile-grab .mobile-context-icon{
  font-size:calc(30 * var(--ma))!important;
}

/* Mantém as imagens de X/B grandes como no desktop. */
body.mobile-ui #hud #mobile-controls .mobile-tech .mobile-skill-ic{
  width:70%!important;
  height:70%!important;
}

/* Caneta dos slots continua visível — ela não é tecla, é edição do poder. */
body.mobile-ui #hud #mobile-controls .mobile-slot-edit{
  width:calc(29 * var(--ma))!important;
  height:calc(29 * var(--ma))!important;
  left:calc(-5 * var(--ma))!important;
  top:calc(-5 * var(--ma))!important;
  font-size:calc(15 * var(--ma))!important;
}

/* Mobile não mostra teclado: X/B/F/G/R/T/E/Z/Espaço/Soco-texto somem. */
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action > b,
body.mobile-ui #hud #mobile-controls button.dbo-action-skin[data-skin="fist"] > small{
  display:none!important;
}

/* Pressionar só ilumina; NUNCA move ou escala o botão. */
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action:active,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action.pressed,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action.holding{
  transform:none!important;
}
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action:active,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action.pressed,
body.mobile-ui #hud #mobile-controls .mobile-right-controls > .mobile-action.holding{
  filter:brightness(1.14) saturate(1.05)!important;
}

/* Landscape muito baixo ainda preserva a geometria; reduz o BLOCO, não os botões isolados. */
@media (max-height:300px) and (orientation:landscape){
  body.mobile-ui #hud #mobile-controls .mobile-right-controls{
    --ma:.50px;
  }
}

/* Tablet mantém exatamente a mesma composição, apenas 10% maior. */
body.mobile-ui.tablet-ui #hud #mobile-controls .mobile-right-controls{
  --ma:.60px;
}


/* ================================================================
   MOBILE HUD V15 — USA O #hud-actions REAL DO DESKTOP
   ================================================================ */

/*
  O clone mobile nunca ficou 1:1. A partir daqui o celular usa o próprio
  cluster desktop: mesmas artes, mesmas dimensões relativas, mesmas posições
  e os mesmos estados no-up/no-fly para X/B.
*/
body.mobile-ui #hud #mobile-controls .mobile-right-controls{
  display:none!important;
}

/* Reativa o cluster desktop que as regras mobile antigas escondiam. */
body.mobile-ui #hud #hud-actions{
  display:block!important;
  position:absolute!important;
  right:max(3px,env(safe-area-inset-right))!important;
  bottom:max(3px,env(safe-area-inset-bottom))!important;
  width:calc(var(--u) * 540)!important;
  height:calc(var(--u) * 470)!important;
  transform:none!important;
  transform-origin:bottom right!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:none!important;
  z-index:42!important;
}

/* Os botões continuam touch/click normalmente. */
body.mobile-ui #hud #hud-actions .act{
  pointer-events:auto!important;
  touch-action:none!important;
}

/* Mobile não precisa mostrar atalhos de teclado. */
body.mobile-ui #hud #hud-actions .act kbd{
  display:none!important;
}

/* A caneta de X/B continua porque é edição da técnica, não tecla. */
body.mobile-ui #hud #hud-actions .act.combat-slot .act-edit{
  display:grid!important;
}

/* Pegar/Drag/Grab: aparência coerente quando o contextual existir. */
body.mobile-ui #hud #hud-actions .act[data-act="bag"]{
  left:auto!important;
  top:auto!important;
  right:calc(var(--u) * 258)!important;
  bottom:calc(var(--u) * 326)!important;
  width:calc(var(--u) * 82)!important;
  height:calc(var(--u) * 82)!important;
  border:calc(var(--u) * 4) solid #d98916!important;
  border-radius:50%!important;
  background:
    radial-gradient(circle at 38% 28%,#2c86c8 0%,#0c447f 44%,#04162e 78%,#020912 100%)!important;
  box-shadow:
    0 0 0 calc(var(--u) * 2) #07101c,
    inset 0 0 0 calc(var(--u) * 2) rgba(255,204,80,.55),
    0 calc(var(--u) * 4) calc(var(--u) * 9) rgba(0,0,0,.48)!important;
}
body.mobile-ui #hud #hud-actions .act[data-act="bag"] svg{
  display:none!important;
}
body.mobile-ui #hud #hud-actions .act[data-act="bag"]::before{
  content:"✋"!important;
  display:grid!important;
  place-items:center!important;
  position:absolute!important;
  inset:0!important;
  color:#ffe6a3!important;
  font-size:calc(var(--u) * 42)!important;
  line-height:1!important;
  text-shadow:0 calc(var(--u) * 3) calc(var(--u) * 5) rgba(0,0,0,.85)!important;
  pointer-events:none!important;
}

/* Ao abrir menu/janela, o cluster original também sai do caminho. */
body.mobile-ui.mobile-menu-open #hud #hud-actions,
body.mobile-ui.mobile-window-open #hud #hud-actions{
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/*
  O layout desejado usa o tamanho natural de --u:.55px dos celulares.
  Cancela explicitamente todos os scale(.64/.66/.70/.78) dos CSS desktop.
*/
@media (max-width:720px){
  body.mobile-ui #hud #hud-actions{
    transform:none!important;
    right:max(3px,env(safe-area-inset-right))!important;
    bottom:max(3px,env(safe-area-inset-bottom))!important;
  }
}
@media (max-height:520px) and (orientation:landscape){
  body.mobile-ui #hud #hud-actions{
    transform:none!important;
    right:max(3px,env(safe-area-inset-right))!important;
    bottom:max(3px,env(safe-area-inset-bottom))!important;
  }
}


/* ================================================================
   MOBILE MINIMAP V2 — maior, legível e mais translúcido
   Override final proposital para neutralizar reduções antigas de 74/82/96px.
   ================================================================ */
body.mobile-ui #hud #hud-mini{
  width:146px!important;
  height:152px!important;
  right:max(7px,env(safe-area-inset-right))!important;
  top:max(6px,env(safe-area-inset-top))!important;
  opacity:.82!important;
  filter:drop-shadow(0 5px 12px rgba(0,0,0,.28))!important;
  transition:opacity .18s ease!important;
}
body.mobile-ui #hud #hud-mini .ring{
  width:138px!important;
  height:138px!important;
  padding:0!important;
  opacity:1!important;
}
body.mobile-ui #hud #hud-mini .ring canvas{
  left:12%!important;
  top:12%!important;
  width:76%!important;
  height:76%!important;
  opacity:.92!important;
  background:rgba(0,0,0,.72)!important;
}
body.mobile-ui #hud #hud-mini .ring b{
  font-size:9px!important;
  opacity:.90!important;
  text-shadow:0 1px 3px #000,0 0 4px #000!important;
}
body.mobile-ui #hud #hud-mini .radar-side{
  opacity:.78!important;
}

/* Retrato: continua grande, mas sem ocupar uma faixa enorme da tela. */
body.mobile-ui.mobile-portrait #hud #hud-mini{
  width:134px!important;
  height:140px!important;
}
body.mobile-ui.mobile-portrait #hud #hud-mini .ring{
  width:126px!important;
  height:126px!important;
}

/* Landscape extremamente baixo: ainda legível; não volta aos antigos 74px. */
@media (max-height:360px) and (orientation:landscape){
  body.mobile-ui #hud #hud-mini{
    width:130px!important;
    height:136px!important;
    right:max(5px,env(safe-area-inset-right))!important;
    top:4px!important;
    opacity:.80!important;
  }
  body.mobile-ui #hud #hud-mini .ring{
    width:124px!important;
    height:124px!important;
  }
  body.mobile-ui #hud #hud-mini .ring canvas{
    left:12%!important;
    top:12%!important;
    width:76%!important;
    height:76%!important;
  }
  body.mobile-ui #hud #hud-mini .ring b{
    font-size:8px!important;
  }
}


/* ---------------------------------------------------------------
   Performance governor (mobile/PWA)
   Ativado só quando o cliente mede queda sustentada de FPS.
   Mantém layout e jogabilidade, retirando composição GPU cara.
---------------------------------------------------------------- */
body.mobile-ui.mobile-perf-auto #game{
  /* O modo automático de desempenho não pode apagar o filtro visual escolhido.
     O filtro é parte da preferência do jogador; apenas removemos transições caras. */
  transition:none!important;
}
body.mobile-ui.mobile-perf-auto #hud-win,
body.mobile-ui.mobile-perf-auto #hud #hud-chat,
body.mobile-ui.mobile-perf-auto #hud #hud-quests,
body.mobile-ui.mobile-perf-auto #pwa-install-card{
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
body.mobile-ui.mobile-perf-auto .fl{
  text-shadow:0 1px 1px rgba(0,0,0,.9)!important;
}
body.mobile-ui.mobile-perf-auto #hud .unit-emblem svg,
body.mobile-ui.mobile-perf-auto #hud-menu img,
body.mobile-ui.mobile-perf-auto #hud .uslot img{
  filter:none!important;
}


/* ================================================================
   MOBILE HUD V13 — polimento de interação
   ================================================================ */

/* O atalho do menu fica logo à esquerda do minimapa, sem sobrepor a moldura. */
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button[data-role="menu"]{
  right:calc(max(7px,env(safe-area-inset-right)) + clamp(138px,16vw,154px))!important;
  top:88px!important;
  opacity:.90!important;
  color:#fff1c9!important;
  background:radial-gradient(circle at 38% 28%,rgba(62,83,109,.94),rgba(7,14,23,.88) 72%)!important;
  border-color:rgba(238,190,91,.42)!important;
  box-shadow:0 3px 10px rgba(0,0,0,.36),0 0 9px rgba(255,183,55,.10)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button[data-role="menu"] b{
  color:#ffd986!important;
  text-shadow:0 1px 2px #000!important;
}

/* Feed compacto: se não existe mensagem, não deixa uma caixa vazia.
   Quando há conteúdo, as últimas linhas ficam realmente legíveis. */
body.mobile-ui:not(.mobile-chat-open) #hud #hud-chat.chat-mmo{
  width:min(310px,38vw)!important;
  max-width:38vw!important;
  height:84px!important;
  min-height:84px!important;
  opacity:.90!important;
  border:1px solid rgba(153,177,205,.16)!important;
  border-radius:7px!important;
  background:linear-gradient(90deg,rgba(5,10,16,.72),rgba(5,10,16,.47) 76%,rgba(5,10,16,.10))!important;
  box-shadow:0 4px 15px rgba(0,0,0,.18)!important;
}
body.mobile-ui:not(.mobile-chat-open) #hud #hud-chat.chat-mmo:has(#output:empty){
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
body.mobile-ui:not(.mobile-chat-open) #hud #hud-chat.chat-mmo #output{
  position:absolute!important;
  inset:5px 7px!important;
  padding:0!important;
  overflow:hidden!important;
  font-size:10px!important;
  line-height:1.32!important;
  color:#edf4ff!important;
  text-shadow:0 1px 2px rgba(0,0,0,.95)!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}
body.mobile-ui:not(.mobile-chat-open) #hud #hud-chat.chat-mmo #output .chat-line{
  margin:0 0 2px!important;
  opacity:.96!important;
}

/* Construir: garante a mesma ordem visual dos demais menus, com X no extremo direito. */
body.mobile-ui #hud #hud-win.win-build > header > b{order:1!important}
body.mobile-ui #hud #hud-win.win-build > header > .wtabs{order:2!important}
body.mobile-ui #hud #hud-win.win-build > header > .x{
  order:3!important;
  margin-left:auto!important;
  margin-right:0!important;
}


/* ================================================================
   MOBILE HUD V14 — atalhos rápidos de visibilidade
   Reaproveita exatamente P/C/S/M/◉ do desktop.
   ================================================================ */
body.mobile-ui #hud #hud-quick{
  display:flex!important;
  position:absolute!important;
  left:auto!important;
  right:calc(max(7px,env(safe-area-inset-right)) + 154px)!important;
  top:max(8px,env(safe-area-inset-top))!important;
  bottom:auto!important;
  transform:none!important;
  z-index:52!important;
  gap:3px!important;
  padding:3px!important;
  border-radius:8px!important;
  background:rgba(5,10,17,.30)!important;
  border:1px solid rgba(125,171,221,.09)!important;
  box-shadow:0 3px 10px rgba(0,0,0,.17)!important;
  opacity:.70!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
body.mobile-ui #hud #hud-quick:hover{opacity:.76!important}
body.mobile-ui #hud #hud-quick button{
  width:26px!important;
  height:26px!important;
  min-width:26px!important;
  min-height:26px!important;
  padding:0!important;
  border-radius:6px!important;
  color:#d7e6f7!important;
  background:linear-gradient(180deg,rgba(31,48,68,.72),rgba(7,14,23,.74))!important;
  border:1px solid rgba(136,177,219,.19)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.035),0 2px 5px rgba(0,0,0,.18)!important;
  font:900 8px/1 Arial,sans-serif!important;
  text-decoration:none!important;
  opacity:.84!important;
  -webkit-tap-highlight-color:transparent!important;
}
body.mobile-ui #hud #hud-quick button:active{
  transform:scale(.93)!important;
  color:#fff2c3!important;
  border-color:rgba(255,190,75,.62)!important;
  background:linear-gradient(180deg,rgba(73,58,32,.96),rgba(24,18,10,.96))!important;
}
body.mobile-ui #hud #hud-quick button.off{
  opacity:.40!important;
  color:#8290a0!important;
  border-color:rgba(112,125,140,.24)!important;
  text-decoration:line-through!important;
}
body.mobile-ui #hud #hud-quick button.on-clean{
  opacity:.92!important;
  color:#ffd86e!important;
  border-color:rgba(255,194,70,.72)!important;
  box-shadow:0 0 9px rgba(255,182,54,.28),inset 0 1px rgba(255,255,255,.08)!important;
}

/* O minimapa é um pouco menor no portrait; aproxima o grupo sem encostar. */
body.mobile-ui.mobile-portrait #hud #hud-quick{
  right:calc(max(7px,env(safe-area-inset-right)) + 142px)!important;
  gap:3px!important;
}
body.mobile-ui.mobile-portrait #hud #hud-quick button{
  width:25px!important;
  height:25px!important;
  min-width:25px!important;
  min-height:25px!important;
}

/* Em landscape muito baixo mantém os atalhos no topo sem invadir o radar. */
@media (max-height:360px) and (orientation:landscape){
  body.mobile-ui #hud #hud-quick{
    right:calc(max(5px,env(safe-area-inset-right)) + 136px)!important;
    top:max(4px,env(safe-area-inset-top))!important;
    padding:3px!important;
    gap:3px!important;
  }
  body.mobile-ui #hud #hud-quick button{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
    font-size:7.5px!important;
  }
}


/* ================================================================
   MOBILE HUD V15 — chat, clean mode, joystick e minimapa
   ================================================================ */

/* 1) O controle de recolher/expandir do chat fica ABAIXO do feed compacto. */
body.mobile-ui:not(.mobile-chat-open) #hud #hud-chat.chat-mmo{
  overflow:visible!important;
}
body.mobile-ui:not(.mobile-chat-open) #hud #hud-chat.chat-mmo .chat-side-tabs{
  display:block!important;
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  pointer-events:none!important;
  overflow:visible!important;
}
body.mobile-ui:not(.mobile-chat-open) #hud #hud-chat.chat-mmo .chat-side-tabs button:not(.collapse){
  display:none!important;
}
body.mobile-ui:not(.mobile-chat-open) #hud #hud-chat.chat-mmo .chat-side-tabs .collapse{
  display:grid!important;
  place-items:center!important;
  position:absolute!important;
  right:8px!important;
  left:auto!important;
  top:calc(100% + 5px)!important;
  bottom:auto!important;
  width:25px!important;
  height:22px!important;
  min-width:25px!important;
  min-height:22px!important;
  margin:0!important;
  padding:0!important;
  border:1px solid rgba(183,199,217,.16)!important;
  border-radius:7px!important;
  background:rgba(7,13,20,.48)!important;
  color:rgba(225,235,245,.72)!important;
  box-shadow:0 2px 6px rgba(0,0,0,.18)!important;
  font:900 15px/1 Arial,sans-serif!important;
  opacity:.72!important;
  transform:none!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
body.mobile-ui:not(.mobile-chat-open) #hud #hud-chat.chat-mmo .chat-side-tabs .collapse:active{
  opacity:.94!important;
  background:rgba(20,35,50,.68)!important;
  border-color:rgba(149,190,229,.32)!important;
}

/* 2) P/C/S/M/◉ ficam ainda mais discretos. */
body.mobile-ui #hud #hud-quick{
  background:rgba(5,10,17,.22)!important;
  border-color:rgba(125,171,221,.065)!important;
  box-shadow:0 3px 8px rgba(0,0,0,.13)!important;
  opacity:.63!important;
}
body.mobile-ui #hud #hud-quick:hover{opacity:.68!important}
body.mobile-ui #hud #hud-quick button{
  background:linear-gradient(180deg,rgba(31,48,68,.56),rgba(7,14,23,.58))!important;
  border-color:rgba(136,177,219,.14)!important;
  box-shadow:inset 0 1px rgba(255,255,255,.025),0 2px 4px rgba(0,0,0,.13)!important;
  opacity:.80!important;
}
body.mobile-ui #hud #hud-quick button.off{opacity:.30!important}
body.mobile-ui #hud #hud-quick button.on-clean{opacity:.86!important}

/* O ◉ é o clean mode total no mobile: some HUD, joystick e cluster de ataque.
   O próprio ◉ continua visível para restaurar tudo com um toque. */
body.mobile-ui.hud-clean-all #hud #hud-unit,
body.mobile-ui.hud-clean-all #hud #hud-quests,
body.mobile-ui.hud-clean-all #hud #hud-chat,
body.mobile-ui.hud-clean-all #hud #hud-mini,
body.mobile-ui.hud-clean-all #hud #hud-actions,
body.mobile-ui.hud-clean-all #hud #hud-buffs,
body.mobile-ui.hud-clean-all #hud #hud-menu,
body.mobile-ui.hud-clean-all #hud #mobile-controls,
body.mobile-ui.hud-clean-all #mobile-self-indicators,
body.mobile-ui.hud-clean-all #onboarding-guide{
  display:none!important;
}
body.mobile-ui.hud-clean-all #hud #hud-quick{
  display:flex!important;
  opacity:.50!important;
  background:rgba(4,8,13,.14)!important;
  border-color:rgba(130,160,190,.04)!important;
}
body.mobile-ui.hud-clean-all #hud #hud-quick button:not([data-hud-toggle="all"]){
  display:none!important;
}
body.mobile-ui.hud-clean-all #hud #hud-quick button[data-hud-toggle="all"]{
  display:grid!important;
  opacity:.74!important;
}

/* 3) Joystick e Dash: mais clean, leves e transparentes (sem blur caro de GPU). */
body.mobile-ui #hud #mobile-controls .mobile-joystick{
  background:
    radial-gradient(circle at 50% 50%,rgba(67,119,165,.12) 0 34%,rgba(8,16,26,.30) 36% 62%,rgba(129,169,205,.06) 64%,rgba(4,9,15,.10) 70%)!important;
  border:1px solid rgba(150,184,216,.17)!important;
  box-shadow:
    0 5px 15px rgba(0,0,0,.18),
    inset 0 0 18px rgba(74,132,181,.07)!important;
  opacity:.69!important;
}
body.mobile-ui #hud #mobile-controls .mobile-joystick-ring{
  border-color:rgba(188,207,225,.13)!important;
  box-shadow:inset 0 0 12px rgba(0,0,0,.20)!important;
  opacity:.76!important;
}
body.mobile-ui #hud #mobile-controls .mobile-joystick::before,
body.mobile-ui #hud #mobile-controls .mobile-joystick::after{
  background:rgba(188,211,231,.075)!important;
}
body.mobile-ui #hud #mobile-controls .mobile-joystick-knob{
  background:
    radial-gradient(circle at 36% 30%,rgba(116,193,246,.62),rgba(30,79,120,.72) 55%,rgba(7,22,36,.78) 100%)!important;
  border:1px solid rgba(157,211,245,.40)!important;
  box-shadow:
    0 3px 8px rgba(0,0,0,.30),
    inset 0 1px 4px rgba(255,255,255,.09),
    0 0 8px rgba(71,165,223,.09)!important;
  opacity:.88!important;
}
body.mobile-ui #hud #mobile-controls .mobile-joystick.active{
  opacity:.82!important;
  border-color:rgba(157,202,237,.26)!important;
  box-shadow:0 5px 15px rgba(0,0,0,.18),0 0 12px rgba(74,161,220,.08)!important;
}
body.mobile-ui #hud #mobile-controls button.mobile-dash{
  width:50px!important;
  height:50px!important;
  border-radius:50%!important;
  opacity:.68!important;
  color:#d8efff!important;
  background:
    radial-gradient(circle at 36% 28%,rgba(78,138,190,.54),rgba(14,38,64,.58) 66%,rgba(4,13,23,.62) 100%)!important;
  border:1px solid rgba(146,194,232,.17)!important;
  box-shadow:
    0 3px 8px rgba(0,0,0,.17),
    inset 0 1px 3px rgba(255,255,255,.045)!important;
}
body.mobile-ui #hud #mobile-controls button.mobile-dash b{
  color:rgba(160,220,255,.84)!important;
  text-shadow:0 1px 2px rgba(0,0,0,.42)!important;
}
body.mobile-ui #hud #mobile-controls button.mobile-dash small{
  color:rgba(201,219,235,.66)!important;
}
body.mobile-ui #hud #mobile-controls button.mobile-dash:active{
  opacity:.88!important;
  border-color:rgba(157,211,244,.34)!important;
  background:radial-gradient(circle at 36% 28%,rgba(94,163,216,.68),rgba(17,48,79,.72) 68%)!important;
}

/* 4) Minimapa e moldura ficam um pouco mais transparentes no mobile/PWA. */
body.mobile-ui #hud #hud-mini{
  opacity:.74!important;
  filter:drop-shadow(0 4px 9px rgba(0,0,0,.20))!important;
}
body.mobile-ui #hud #hud-mini .ring{
  opacity:.95!important;
}
body.mobile-ui #hud #hud-mini .ring canvas{
  opacity:.92!important;
  background:rgba(0,0,0,.60)!important;
}
body.mobile-ui #hud #hud-mini .radar-side{
  opacity:.62!important;
}
body.mobile-ui #hud #hud-mini .ring b{
  opacity:.76!important;
}
body.mobile-ui #hud #hud-loc{
  opacity:.72!important;
}

/* Dia + clima reais da área, só no mobile/PWA e sem ocupar espaço extra. */
#mobile-env-meta{display:none}
body.mobile-ui #hud #mobile-env-meta{
  position:absolute!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:flex-end!important;
  gap:1px!important;
  right:8px!important;
  top:8px!important;
  z-index:8!important;
  pointer-events:none!important;
  color:rgba(237,244,250,.72)!important;
  font:700 7px/1.15 Arial,sans-serif!important;
  letter-spacing:.15px!important;
  text-align:right!important;
  text-shadow:0 1px 2px rgba(0,0,0,.78)!important;
  opacity:.80!important;
}
body.mobile-ui #hud #mobile-env-meta span{
  display:block!important;
  max-width:72px!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
body.mobile-ui #hud #mobile-env-weather{
  color:rgba(205,224,239,.66)!important;
  font-size:6.5px!important;
}

/* Em landscape muito baixo mantém o Dash proporcional e o texto de ambiente mínimo. */
@media (max-height:360px) and (orientation:landscape){
  body.mobile-ui #hud #mobile-controls button.mobile-dash{
    width:46px!important;
    height:46px!important;
  }
  body.mobile-ui #hud #mobile-env-meta{
    right:7px!important;
    top:6px!important;
    font-size:6.5px!important;
  }
  body.mobile-ui #hud #mobile-env-weather{font-size:6px!important}
}


/* ================================================================
   MOBILE HUD V16 — chat collapse stability
   ================================================================ */

/* O estado collapsed do chat desktop não pode empurrar Progresso/Por perto
   para o meio da tela no mobile. Mantém exatamente a posição mobile. */
body.mobile-ui #hud:has(#hud-chat.chat-mmo.collapsed) #hud-quests{
  left:calc(max(5px,env(safe-area-inset-left)) + clamp(200px,35vw,260px))!important;
  right:auto!important;
  top:max(5px,env(safe-area-inset-top))!important;
  transform:none!important;
  width:116px!important;
}
@media (max-height:360px) and (orientation:landscape){
  body.mobile-ui #hud:has(#hud-chat.chat-mmo.collapsed) #hud-quests{
    left:202px!important;
    top:3px!important;
    width:102px!important;
    height:22px!important;
    min-height:22px!important;
    max-height:22px!important;
  }
}

/* O botão redondo que abre o chat completo fica sempre abaixo do mini-chat.
   A posição exata é sincronizada por JS para acompanhar altura/collapse. */
body.mobile-ui #hud #mobile-controls .mobile-bottom-tools button[data-role="chat"]{
  z-index:22!important;
  opacity:.72!important;
}

/* Opções no celular: em tela estreita as abas vão para a 2ª linha do cabeçalho (hud-rebuild.css); com a altura
   travada em 40 px elas ficavam escondidas e não dava para trocar de aba. */
@media (max-width:720px){
  body.mobile-ui #hud #hud-win.win-opts > header{
    height:auto!important;
    flex:0 0 auto!important;
    overflow:visible!important;
    padding-bottom:4px!important;
  }
}
/* caixinhas de marcar no tamanho certo (a regra de toque de 38 px esticava a caixa) */
body.mobile-ui #hud #hud-win input[type=checkbox],
body.mobile-ui #hud #hud-win input[type=radio]{min-height:0!important;width:20px!important;height:20px!important;flex:0 0 20px!important}