/* Vexoria — CELULAR / TABLET (Claude, 21/10 — refeito do zero).
   A HUD do celular agora É a HUD do PC (hud-corners.css + hud-tidy.css, mesmas molduras e o mesmo lugar de cada coisa),
   encolhida pelo tamanho da tela (--ui-scale, calculado em client/src/hud-tidy.js), mais os controles de toque:
   analógico (esquerda), ataque + técnicas em arco + poções (direita) e os 4 grupos de menu (Herói · Mundo · Social · Opções).
   Regra de ouro: o centro da tela é do jogador. Avisos ficam embaixo, acima da barra, pequenos, e somem sozinhos.
   Só vale com html.touch-device (marcado no <head> do index.html). Carregado por último. */
#mobile-controls{display:none}
html.touch-device{--sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--sb:env(safe-area-inset-bottom,0px);--st:env(safe-area-inset-top,0px);
  --m-pad:8px;--L:calc(var(--m-pad) + var(--sl));--R:calc(var(--m-pad) + var(--sr));--T:calc(var(--m-pad) + var(--st));--B:calc(var(--m-pad) + var(--sb));
  --hud-edge:10px;--act:1;
  -webkit-tap-highlight-color:transparent;-webkit-touch-callout:none;-webkit-text-size-adjust:100%;touch-action:none;overscroll-behavior:none}
html.touch-device body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden}
html.touch-device #game{position:fixed;inset:0}
html.touch-device :is(input,select,textarea){font-size:16px}   /* menos de 16px faz o iPhone dar zoom ao digitar */

/* ======================================================= HUD em jogo ======================================================= */
html.touch-device #help,html.touch-device #mobile-dock{display:none!important}
/* barra de baixo: só os grupos de menu (técnicas, ataque e poções ficam nos botões de toque) */
html.touch-device #hotbar :is(#skill-hotbar,#combat-hotbar,#menu-hotbar,#hotbar-toggle){display:none!important}
html.touch-device #hotbar{padding:6px 8px 8px!important;gap:0!important;bottom:var(--B)!important;z-index:35}
html.touch-device #hotbar .bar-group+.bar-group{padding-left:0!important;border:0!important}
html.touch-device #hotbar #menu-groups{gap:6px}
html.touch-device #menu-groups .mg-btn{touch-action:manipulation}
html.touch-device #menu-groups .mg-pop{max-height:calc((100dvh - 120px) / var(--ui-scale,1));overflow-y:auto;touch-action:pan-y}
html.touch-device #menu-groups .mg-pop .menu-slot{min-height:44px}

/* ---------- controles de toque ---------- */
html.touch-device #mobile-controls{display:block;position:fixed;inset:0;z-index:34;pointer-events:none}
html.touch-device #mobile-controls img{image-rendering:pixelated;pointer-events:none;-webkit-user-drag:none}
html.touch-device #mobile-stick-zone{position:absolute;left:0;bottom:0;width:42vw;height:58vh;pointer-events:auto;touch-action:none}
.mobile-stick{position:absolute;width:120px;height:120px;background:url(/client/assets/ui/mobile/analogico.png) 0 0/100% 100%;image-rendering:pixelated;transform:translate(-50%,-50%) scale(var(--act));transition:opacity .15s}
.mobile-stick.rest{opacity:.55}
.mobile-stick i{position:absolute;width:48px;height:48px;left:36px;top:36px;background:url(/client/assets/ui/mobile/pino.png) 0 0/100% 100%;image-rendering:pixelated;filter:drop-shadow(0 3px 0 #0c0812aa)}

/* ataque (grande) + técnicas em arco + poções, canto direito */
html.touch-device #mobile-actions{position:absolute;right:var(--R);bottom:var(--B);width:216px;height:214px;pointer-events:none;transform:scale(var(--act));transform-origin:100% 100%}
html.touch-device #mobile-actions button{pointer-events:auto;touch-action:manipulation;padding:0;margin:0;border:0;border-radius:0;box-shadow:none;image-rendering:pixelated;filter:drop-shadow(0 3px 0 #0c0812aa)}
html.touch-device #mobile-attack{position:absolute;right:4px;bottom:4px;width:80px;height:80px;background:url(/client/assets/ui/mobile/ataque.png) 0 0/100% 100%;display:grid;place-items:center}
html.touch-device #mobile-attack img{width:48px;height:48px;filter:drop-shadow(2px 2px 0 #1a1126)}
html.touch-device #mobile-attack:active{transform:translateY(2px) scale(.96);filter:brightness(1.2)}
html.touch-device #mobile-skills{position:absolute;inset:0;display:block;pointer-events:none}
html.touch-device #mobile-skills button{position:absolute;width:52px;height:52px;background:url(/client/assets/ui/mobile/tecnica.png) 0 0/100% 100%;display:grid;place-items:center}
html.touch-device #mobile-skills button:nth-child(1){right:110px;bottom:18px}
html.touch-device #mobile-skills button:nth-child(2){right:93px;bottom:71px}
html.touch-device #mobile-skills button:nth-child(3){right:49px;bottom:104px}
html.touch-device #mobile-skills button:nth-child(4){right:0;bottom:108px}
html.touch-device #mobile-skills button:nth-child(5){right:150px;bottom:110px;width:44px;height:44px}   /* técnicas da evolução (5 e 6) */
html.touch-device #mobile-skills button:nth-child(6){right:96px;bottom:152px;width:44px;height:44px}
html.touch-device #mobile-skills img{width:32px;height:32px}
html.touch-device #mobile-skills b{position:absolute;top:3px;left:6px;font:9px Pix;color:#f7d77a;text-shadow:1px 1px 0 #1a1126}
html.touch-device #mobile-consumables{position:absolute;right:170px;bottom:4px;display:flex;flex-direction:column-reverse;gap:6px}
html.touch-device #mobile-consumables button{position:relative;width:40px;height:40px;background:url(/client/assets/ui/mobile/pocao.png) 0 0/100% 100%;display:grid;place-items:center}
html.touch-device #mobile-consumables img{width:24px;height:24px}
html.touch-device #mobile-consumables b{position:absolute;right:-3px;bottom:-3px;font:10px Pix;color:#efe6d6;text-shadow:1px 1px 0 #1a1126,-1px -1px 0 #1a1126}
html.touch-device #mobile-consumables button:active{transform:translateY(2px)}
html.touch-device #mobile-consumables button.hidden{display:none}
/* Interação junto das poções, sem ocupar o arco de técnicas. A barra de menus é respeitada por placeInteractions(). */
html.touch-device :is(#mobile-talk,#mobile-player){position:absolute;right:218px;bottom:4px;width:112px;height:44px;display:flex!important;align-items:center;gap:2px;padding:4px 8px 4px 4px!important;
  border:6px solid transparent!important;border-image:var(--hud-trim) 10 / 10px / 2px stretch!important;background:linear-gradient(120deg,#241b2af7,#130f1af7 75%) padding-box!important;animation:none}
html.touch-device #mobile-player{bottom:54px}
html.touch-device :is(#mobile-talk,#mobile-player) img{width:28px;height:28px}
html.touch-device :is(#mobile-talk,#mobile-player) small{font:12px Pix;color:#f7d77a}
html.touch-device :is(#mobile-talk,#mobile-player) small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
html.touch-device :is(#mobile-talk,#mobile-player).hidden{display:none!important}
@keyframes talk-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}

/* janela aberta: some com os controles (cada janela tem o ✕) */
html.touch-device.ui-open #mobile-controls,html.touch-device.ui-open #hotbar{display:none!important}

/* ---------- conversa: botão na barra de baixo (ao lado dos grupos) e janela no alto à esquerda ---------- */
html.touch-device #hotbar{display:flex;align-items:flex-end}
html.touch-device #hotbar #chat-launcher{position:static!important;zoom:1!important;margin:0 8px 0 0!important;height:auto!important;min-height:52px;padding:4px 10px!important;
  border:0!important;border-right:1px solid #4e3548!important;background:none!important;box-shadow:none!important;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
html.touch-device #hotbar #chat-launcher kbd,html.touch-device #hotbar #chat-launcher .chat-key{display:none}
html.touch-device #chat{left:var(--L)!important;top:calc(var(--T) + 92px * var(--ui-scale,1) / .6)!important;bottom:auto!important;right:auto!important;
  width:min(520px,calc((100vw - var(--L) - 240px) / var(--ui-scale,1)))!important;height:min(300px,calc((100dvh - 120px) / var(--ui-scale,1)))!important;z-index:45!important}
html.touch-device #chatlog{touch-action:pan-y}

/* ---------- tutorial: cartão pequeno na esquerda, embaixo do retrato (antes cobria o meio da tela) ---------- */
html.touch-device #tutorial{left:var(--L)!important;top:calc(var(--T) + 90px * var(--ui-scale,1) / .6)!important;right:auto!important;bottom:auto!important;transform:none!important;
  zoom:var(--ui-scale,1);width:min(360px,calc(38vw / var(--ui-scale,1)))!important;max-width:none!important;z-index:36}
html.touch-device #hud:has(#tutorial:not(.hidden)) #quest-tracker{display:block}

/* ---------- avisos: faixa pequena EMBAIXO, logo acima da barra (client/src/mobile-hud.js > notices/placeNotices) ----------
   Eventos, chefe mundial, hordas, entrada de zona e mensagens do servidor vão para #m-notices: coluna centrada, entre o analógico
   e os botões de técnica, que cresce para cima e some sozinha. Nada fica em cima da HUD nem no meio da tela. */
#m-notices{display:none}
html.touch-device #m-notices{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:3px;position:fixed;left:50%;bottom:90px;transform:translateX(-50%);
  width:46vw;max-height:30vh;overflow:hidden;z-index:33;pointer-events:none}
html.touch-device.ui-open #m-notices{display:none}
html.touch-device #m-notices>*{position:static!important;inset:auto!important;transform:none!important;margin:0!important;max-width:100%!important;box-sizing:border-box;pointer-events:none!important;zoom:1!important}
html.touch-device #m-notices>#toast{order:5;display:flex;flex-direction:column;align-items:center;font-size:11px!important;line-height:1.25;text-shadow:1px 1px 0 #1a1126}
html.touch-device #m-notices>#toast div{padding:1px 7px;background:#130f1ad9;border:1px solid #42313d;margin-top:2px;font-size:10px!important;line-height:13px;max-width:100%}
html.touch-device #m-notices>#toast div:nth-last-child(n+3){display:none}   /* no máximo 2 avisos de uma vez */
html.touch-device #m-notices>#world-boss{order:4;width:min(100%,300px)!important;font-size:9px!important;padding:2px 6px 1px!important;box-shadow:none!important}
html.touch-device #m-notices>#world-boss .wb-title{font-size:9px;letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.touch-device #m-notices>#world-boss .wb-title small{font-size:8px}
html.touch-device #m-notices>#world-boss .wb-bar{height:10px;margin:2px 0 1px}html.touch-device #m-notices>#world-boss .wb-bar span{font-size:9px;line-height:8px}
html.touch-device #m-notices>#world-boss .wb-time{display:none}
html.touch-device #m-notices>#dmech-banner{order:3;background:#130f1ad9;padding:2px 10px}
html.touch-device #m-notices>#dmech-banner b{font-size:14px!important;letter-spacing:1px}html.touch-device #m-notices>#dmech-banner small{font-size:10px!important;margin-top:1px}
html.touch-device #m-notices>#zone-banner{order:2;font-size:14px!important;padding:3px 14px!important;text-shadow:2px 2px #160f22}
html.touch-device #m-notices>.announcement{order:1;font-size:13px!important;padding:4px 10px!important;border-width:1px!important}
html.touch-device #m-notices>.hidden{display:none!important}
html.touch-device #wevent-reward{top:calc(var(--T) + 60px)!important;zoom:var(--ui-scale,1)}
html.touch-device #wevent-tracker{zoom:var(--ui-scale,1);top:auto!important;bottom:calc(var(--B) + 230px)!important;right:var(--R)!important}
html.touch-device #freeze-notice{zoom:var(--ui-scale,1)}
html.touch-device #dur-warn{zoom:var(--ui-scale,1);left:var(--L)!important;top:auto!important;bottom:calc(var(--B) + 60vh)!important}
html.touch-device :is(#status-effects,#party-frame,#party-bars,#party-invite,#npc-hint){zoom:var(--ui-scale,1)}
/* painéis com botões no lado esquerdo ficam ACIMA da área do analógico (#mobile-controls, z 34): o toque vai para o botão */
html.touch-device :is(#party-frame,#party-invite,#dur-warn,#quest-tracker,#status-effects,#cash-shop-open){z-index:36}

/* ---------- em pé no jogo: pede para deitar ---------- */
#rotate-hint{display:none}
html.touch-device.portrait:not(.rotate-ok) #rotate-hint{display:flex;position:fixed;left:50%;top:42%;transform:translate(-50%,-50%);z-index:2000;pointer-events:auto;max-width:calc(100vw - 32px);box-sizing:border-box;flex-direction:column;align-items:center;gap:8px;
  padding:16px 22px;text-align:center;font:16px Pix,monospace;color:#f7d77a;border:6px solid transparent;border-image:var(--hud-trim) 10 / 10px / 2px stretch;background:linear-gradient(120deg,#241b2af7,#130f1af7 75%) padding-box}
html.touch-device #rotate-hint b{font-size:38px;animation:rot 1.6s ease-in-out infinite}
html.touch-device #rotate-hint button{font:14px Pix,monospace;padding:8px 22px;color:#ffe9aa;background:linear-gradient(#694624,#372219);border:2px solid #e6b96a}
@keyframes rot{50%{transform:rotate(90deg)}}

/* ---------- janelas (NPCs, mapa, loja, diário…): menos borda em volta, cabem na altura ---------- */
html.touch-device .game-dialog{padding:6px;place-items:safe center}
html.touch-device .game-window{max-height:calc(100dvh - 12px)}
html.touch-device #world-map canvas{width:auto;max-width:100%;max-height:calc(100dvh - 150px);display:block;margin:0 auto}
html.touch-device #sndpanel{max-height:calc(100dvh - 20px)!important;overflow-y:auto;touch-action:pan-y}

/* ======================================================= ENTRADA (conta · heróis · criação) =======================================================
   A cena de pixel art preenche a tela (main.js corta as bordas em vez de encolher) e os painéis saem dela:
   camadas em px de verdade, letras grandes, campos de 44px+, nada de "zoom do iPhone". Funciona deitado E em pé. */
html.touch-device #login::after{display:none!important}
html.touch-device #login .lobby-scene{transform:none!important;box-shadow:none}
html.touch-device #login :is(button,input){touch-action:manipulation}
/* logo, som, sair */
html.touch-device #login .lobby-logo{position:fixed;left:var(--L);top:var(--T);--u:1.6px}
html.touch-device #login .lobby-logo small{font-size:10px}
html.touch-device #login .lobby-sound{position:fixed;right:var(--R);top:var(--T);--u:2.6px;font-size:12px!important}
html.touch-device #login #account-logout{position:fixed;right:var(--R);bottom:var(--B);font-size:13px;padding:10px}
html.touch-device #login .lobby-err{position:fixed;bottom:calc(var(--B) + 64px);font-size:14px;white-space:normal;text-align:center;width:90vw}
html.touch-device #login.mode-create .lobby-logo{display:none}

/* ---------- conta: cartão "Jogue como app" + formulário ---------- */
html.touch-device #login:not(.mode-auth) .lobby-auth{display:none!important}
html.touch-device #login .lobby-auth{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:12px;overflow-y:auto;touch-action:pan-y;
  padding:calc(var(--T) + 54px) calc(var(--R) + 4px) calc(var(--B) + 12px) calc(var(--L) + 4px);background:#0b071255}
html.touch-device #login .account-tablet{--u:3.1px;width:min(420px,100%);max-height:none;overflow:visible;flex:none;padding:14px 18px;border-width:14px;border-image-width:14px}
html.touch-device #login .account-tablet h1{font-size:26px}
html.touch-device #login .account-tablet p{font-size:14px}
html.touch-device #login .account-tablet label{font-size:13px;margin-top:4px}
html.touch-device #login .account-tablet input{height:50px;font-size:16px;padding:0 14px}
html.touch-device #login .account-tabs button{min-height:46px;font-size:15px}
html.touch-device #login #account-submit{min-height:54px;font-size:18px}
html.touch-device #login #account-hint{font-size:12px}
html.touch-device #login #account-error{font-size:14px;min-height:0}
@media (orientation:landscape){
  html.touch-device #login .lobby-auth{flex-direction:row;align-items:safe center;gap:18px;padding-top:calc(var(--T) + 8px)}
  html.touch-device #login .lobby-auth #pwa-install{align-self:center;width:300px;margin-top:40px}
  html.touch-device #login .account-tablet{--u:2.7px;width:400px;padding:10px 16px}
  html.touch-device #login .account-tablet :is(.account-kicker,#account-description){display:none}
  html.touch-device #login .account-tablet h1{font-size:22px}
  html.touch-device #login .account-tablet input{height:44px}
  html.touch-device #login .account-tabs{margin:4px 0}
  html.touch-device #login .account-tabs button{min-height:40px}
  html.touch-device #login #account-submit{min-height:48px}
}
@media (orientation:portrait){
  html.touch-device #login .lobby-logo{left:50%;transform:translateX(-50%);text-align:center;--u:1.9px}
  html.touch-device #login:not(.mode-auth) .lobby-logo{display:none}
}
/* cartão do app: grande, com o ícone e dois botões (instalar · compartilhar) */
html.touch-device #pwa-install{flex:none;width:min(420px,100%);margin:0;grid-template-columns:60px 1fr;gap:10px 12px;padding:14px;border-width:8px;animation:pwa-in .5s ease-out}
html.touch-device #pwa-install .pwa-icon{width:60px;height:60px;filter:drop-shadow(0 0 10px #e0283f88)}
html.touch-device #pwa-install strong{font-size:19px;letter-spacing:1px}
html.touch-device #pwa-install .pwa-txt span{display:block;margin-top:4px;font-size:14px;line-height:18px}
html.touch-device #pwa-install .pwa-btns{grid-column:1 / -1;display:grid;grid-template-columns:1.3fr 1fr;gap:8px}
html.touch-device #pwa-install button{min-height:48px;font-size:15px;padding:6px 8px}
@keyframes pwa-in{from{opacity:0;transform:translateY(-8px)}}

/* passo a passo de instalar (abre por cima de tudo; vale também no PC) */
#pwa-guide{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:12px;background:#0b0712d9;touch-action:pan-y}
#pwa-guide .pwa-card{position:relative;width:min(460px,100%);max-height:calc(100dvh - 24px);overflow-y:auto;padding:16px 18px;color:#efe6d6;text-align:center;
  border:14px solid transparent;border-image:url(/client/assets/ui/login/moldura2.png) 16 / 14px stretch;background:#1a1226f7 padding-box;image-rendering:pixelated}
#pwa-guide .pwa-big{width:72px;height:72px;image-rendering:pixelated;filter:drop-shadow(0 0 12px #e0283f99)}
#pwa-guide h2{margin:6px 0 4px;font:24px Pix,monospace;color:#f7d77a;text-shadow:2px 2px 0 #523316}
#pwa-guide p{margin:0 0 10px;font:15px/1.35 Txt,sans-serif;color:#c4bccf}
#pwa-guide .pwa-close{position:absolute;right:4px;top:4px;width:44px;height:44px;font:18px Pix,monospace;color:#c4bccf;background:none;border:0;cursor:pointer}
#pwa-guide .pwa-tabs{display:flex;gap:8px;margin:4px 0 12px}
#pwa-guide .pwa-tabs button{flex:1;min-height:46px;font:15px Pix,monospace;color:#c4bccf;background:#100b18;border:3px solid #594268;cursor:pointer}
#pwa-guide .pwa-tabs button[aria-pressed=true]{color:#f7d77a;border-color:#d69a34;background:#3d291e}
#pwa-guide .pwa-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left}
#pwa-guide .pwa-list li{display:flex;align-items:center;gap:12px;padding:10px;background:#0b0712;border:2px solid #3d2c56}
#pwa-guide .pwa-list i{flex:none;display:grid;place-items:center;width:46px;height:46px;font:24px/1 Txt,sans-serif;font-style:normal;color:#fff3cf;background:#3d2c56;border:2px solid #d69a34}
#pwa-guide .pwa-list i svg{width:26px;height:26px}#pwa-guide .pwa-list i img{width:38px;height:38px;image-rendering:pixelated}
#pwa-guide .pwa-list span{font:16px/1.35 Txt,sans-serif;color:#efe6d6}
#pwa-guide .pwa-list em{display:inline-block;margin-right:6px;font:15px Pix,monospace;font-style:normal;color:#f7d77a}
#pwa-guide .pwa-list b{color:#f7d77a}
#pwa-guide .pwa-note{margin:10px 0 0;font-size:14px;color:#ffb04a}
#pwa-guide :is(.pwa-ok,.pwa-now){width:100%;min-height:52px;margin-top:14px;font:17px Pix,monospace;color:#ffe9aa;background:linear-gradient(#694624,#372219);border:3px solid #e6b96a;cursor:pointer}
#pwa-guide .pwa-now{margin:0 0 12px;color:#fff3e6;background:linear-gradient(#ff6b6b 0 18%,#e0283f 18% 62%,#a8162f 62%)}

/* ---------- títulos das telas de herói ---------- */
html.touch-device #login .lobby-title{position:fixed;top:var(--T);white-space:normal;width:min(70vw,520px)}
html.touch-device #login .lobby-title small{font-size:10px}
html.touch-device #login .lobby-title b{font-size:20px;margin-top:3px}

/* ---------- seus heróis (fogueira) ---------- */
html.touch-device #login .sel-plate b{font-size:14px}
html.touch-device #login .sel-hero.on .sel-plate b{font-size:16px}
html.touch-device #login .sel-plate small{font-size:11px}
html.touch-device #login .sel-hero.empty .sel-plate b{font-size:12px}
html.touch-device #login .sel-bar{position:fixed;left:50%;top:auto;bottom:var(--B);--u:2.6px;gap:10px;padding:4px 10px;white-space:nowrap;max-width:calc(100vw - 16px)}
html.touch-device #login .sel-enter{width:auto;min-width:200px;height:50px!important;padding:0 14px;font-size:16px}
html.touch-device #login .sel-enter small{font-size:11px}
html.touch-device #login .sel-bar .lobby-link{font-size:13px;padding:12px 6px}
html.touch-device #login.mode-select #account-logout{bottom:calc(var(--B) + 70px)}
@media (orientation:portrait){
  html.touch-device #login .sel-hero{transform-origin:50% 100%;transform:translate(-50%,-100%) scale(.72)}
  html.touch-device #login .sel-hero.pos-0{left:calc(50% - 30vw)}
  html.touch-device #login .sel-hero.pos-2{left:calc(50% + 30vw)}
  html.touch-device #login .sel-plate b,html.touch-device #login .sel-hero.on .sel-plate b{font-size:20px}
  html.touch-device #login .sel-plate small{font-size:15px}
  html.touch-device #login .sel-bar{flex-wrap:wrap;justify-content:center;white-space:normal;width:calc(100vw - 16px)}
  html.touch-device #login .sel-enter{flex:1 1 100%}
}

/* ---------- criação ---------- */
html.touch-device #login .lobby-classes{position:fixed;--u:1.55px}
html.touch-device #login .medal-name b{font-size:13px}
html.touch-device #login .medal-name small{font-size:9px}
html.touch-device #login .medal kbd{display:none}
html.touch-device #login .lobby-forge{position:fixed;--u:2.6px;width:auto}
html.touch-device #login .lobby-tablet{position:fixed;--u:2.2px;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;max-height:none}
html.touch-device #login .tab-desc{font-size:12px}
html.touch-device #login .tab-head span{font-size:10px}
html.touch-device #login :is(.tab-bar,.tab-pips){font-size:10px}
html.touch-device #login .tab-skill b{font-size:9px}
html.touch-device #login .tab-evo>b{font-size:12px}
html.touch-device #login .tab-evo>span{font-size:9px}
html.touch-device #login .lobby-confirm{position:fixed;gap:8px}
html.touch-device #login .lobby-confirm input{height:48px;font-size:16px;border-width:8px;border-image-width:8px}
html.touch-device #login #btnplay{height:52px;font-size:17px}
html.touch-device #login #lobby-back{position:fixed;left:var(--L);top:var(--T);font-size:13px;padding:10px 6px}
@media (orientation:landscape){
  html.touch-device #login .lobby-classes{left:var(--L);top:calc(var(--T) + 44px)}
  html.touch-device #login .lobby-classes{max-height:calc(100dvh - 180px);touch-action:pan-y}
  html.touch-device #login .lobby-forge{left:var(--L);bottom:var(--B);top:auto}
  html.touch-device #login .lobby-tablet{right:var(--R);left:auto;top:calc(var(--T) + 44px);bottom:calc(var(--B) + 120px);width:min(330px,38vw)}
  html.touch-device #login .lobby-confirm{right:var(--R);left:auto;top:auto;bottom:var(--B);width:min(330px,38vw)}
  html.touch-device #login .lobby-create .lobby-title{left:50%}
}
@media (orientation:portrait){
  html.touch-device #login .lobby-create .lobby-title{top:calc(var(--T) + 34px)}
  html.touch-device #login .lobby-classes{left:var(--L);right:var(--R);top:calc(var(--T) + 92px);width:auto;--u:2px}
  /* A lista termina antes do canvas do herói (top - 95 × --u).
     Mais classes devem rolar dentro dela, sem passar por trás da prévia. */
  html.touch-device #login .lobby-classes{max-height:calc(130px + 22dvh - min(209px,24.7dvh));touch-action:pan-y;scrollbar-width:thin}
  html.touch-device #login #classes{display:grid!important;grid-template-columns:repeat(3,1fr);gap:6px!important}
  html.touch-device #login #classes .medal{flex-direction:column;height:auto!important;gap:2px;padding:4px 0}
  html.touch-device #login #classes .medal-ring{width:calc(var(--u)*24)!important;height:calc(var(--u)*24)!important;background-size:calc(var(--u)*48) calc(var(--u)*24)!important}
  html.touch-device #login #classes .medal.sel .medal-ring{background-position:calc(var(--u)*-24) 0!important}
  html.touch-device #login #classes .medal-name{padding:3px 4px!important;width:100%;text-align:center}
  html.touch-device #login #classes .medal-name small{display:none}
  html.touch-device #login .medal.sel::before{display:none}
  html.touch-device #login .lobby-hero{position:fixed;left:50%;top:calc(var(--T) + 230px + 22dvh);--u:min(2.2px,.26dvh)}
  html.touch-device #login .lobby-forge{left:var(--L);right:var(--R);bottom:calc(var(--B) + 112px);top:auto;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:4px 14px}
  html.touch-device #login .forge-row>span{width:auto;font-size:11px}
  html.touch-device #login .lobby-tablet{left:var(--L);right:var(--R);width:auto;top:calc(var(--T) + 250px + 22dvh);bottom:calc(var(--B) + 180px);--u:2.4px}
  html.touch-device #login .lobby-confirm{left:var(--L);right:var(--R);width:auto;top:auto;bottom:var(--B)}
}
html.touch-device #login.mode-create #account-logout{display:none}
@media (orientation:portrait){html.touch-device #login .sel-hero.empty .sel-plate b{font-size:17px}}
@media (orientation:landscape){
  html.touch-device #login .lobby-auth{padding-right:calc(var(--R) + 104px);padding-left:calc(var(--L) + 104px);gap:14px}
  html.touch-device #login .lobby-auth #pwa-install{width:260px}
  html.touch-device #login .account-tablet{width:370px}
}

/* ---------- letras legíveis no celular (21/10) ----------
   A HUD do PC é encolhida por --ui-scale; os textos pequenos dela (12–13 px) chegavam a 7 px na tela do celular.
   Aqui eles ganham um tamanho-base maior, que depois de encolhido fica com ~10–11 px. */
html.touch-device #frame :is(#hptext,#mptext){font-size:16px!important}
html.touch-device #quest-tracker small{font-size:17px!important;line-height:21px!important}
html.touch-device #quest-tracker b{font-size:20px!important;line-height:23px!important}
html.touch-device :is(#clock-chip,#weather-chip){font-size:17px!important;line-height:20px!important}
html.touch-device #cash-shop-open :is(#cash-enter,.cash-enter,button){font-size:15px!important}

/* ---------- mochila deitado: equipamento à esquerda e mochila à direita (antes a mochila ficava escondida embaixo e só
   aparecia 1 fileira sem rolar) ---------- */
@media (orientation:landscape){
  html.touch-device #inv .inv-cols{grid-template-columns:minmax(0,1fr) min-content!important;gap:10px}
  html.touch-device #inv .inv-left{border-right:2px solid #3d2c56;padding-right:10px}
  html.touch-device #inv #dollprev,html.touch-device #dollimg{width:120px!important;height:140px!important}
}
/* a mochila herdava do PC "altura da tela − 172 px − barra" (≈ 170 px num celular deitado) e cortava quase tudo */
html.touch-device #inv{top:6px!important;max-height:calc(100dvh - 12px)!important;overflow-y:auto;touch-action:pan-y}
html.touch-device #inv .inv-right{position:static}

/* ---------- grupo compacto no celular (21/10): o quadro crescia por cima do analógico e o "Sair do grupo" ficava embaixo
   do dedo que anda. Agora o botão vai para o cabeçalho, sem barra de mana e sem ícones de efeito: o quadro fica baixinho. ---------- */
html.touch-device #party-frame{width:170px!important;padding:4px 5px!important}
html.touch-device #party-frame header{padding-right:58px;margin-bottom:3px}
html.touch-device #party-frame .pf-leave{position:absolute;top:5px;right:5px;width:auto;margin:0;padding:3px 7px;font-size:12px;line-height:14px;min-height:0}
html.touch-device #party-frame :is(.pf-bar.mp,.party-buffs){display:none}
html.touch-device #party-frame .pf-row{padding:2px 3px;margin-bottom:2px}
html.touch-device #party-frame .pf-bar{height:12px;margin-top:2px}
html.touch-device #party-frame .pf-bar span{font-size:11px;inset:-1px 0 0}
html.touch-device #party-frame .pf-top b{font-size:15px}html.touch-device #party-frame .pf-top small{font-size:12px}

/* criação de herói em celular deitado BAIXO (≤ 440 px de altura, ex.: iPhone SE/8): as 6 classes passavam por baixo do
   quadro de pele/cabelo e o Pistoleiro não podia ser tocado. Medalhas e quadro menores para caber tudo. */
@media (orientation:landscape) and (max-height:440px){
  html.touch-device #login .lobby-classes{--u:1.2px;top:calc(var(--T) + 36px)}
  html.touch-device #login .medal-name small{display:none}
  html.touch-device #login .lobby-forge{--u:2.1px}
}

/* nome da zona e "próximo destino" no alto, centralizados entre o retrato e o minimapa (em telas ≤ 700 px o CSS do PC os
   mandava para a esquerda e a escala os empurrava para fora da tela, por cima do retrato) */
html.touch-device #hud #zone,html.touch-device #hud #walk-guide{left:50%!important;transform:translateX(-50%) scale(var(--ui-scale,1))!important;transform-origin:50% 0!important;
  max-width:calc((100vw - 2 * (var(--hud-player-width,280px) + 30px) * var(--ui-scale,1)) / var(--ui-scale,1))!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
html.touch-device #hud #zone{top:var(--T)!important}
html.touch-device #hud #walk-guide{top:calc(var(--T) + 42px * var(--ui-scale,1))!important}

/* celular deitado baixo: missões sem a linha de detalhe; interação continua junto das poções. */
@media (orientation:landscape) and (max-height:440px){
  html.touch-device #quest-tracker small{display:none}
}
/* em pé não sobra espaço entre o retrato e o minimapa: o nome da zona aparece só na faixa de entrada (e no minimapa) */
@media (orientation:portrait){ html.touch-device #hud :is(#zone,#walk-guide){display:none!important} }

/* teclado aberto (mobile-hud.js > keyboard): a conversa vai para o topo e cabe na parte visível acima do teclado */
html.touch-device.kb-open #chat{top:var(--T)!important;height:calc((var(--vvh,100dvh) - var(--T) - 6px) / var(--ui-scale,1))!important;min-height:0!important}
/* ---------- ESQUIVA (26/10): botão de rolamento de todas as classes, acima da técnica 4 ---------- */
#mobile-dodge{display:none}
html.touch-device #mobile-dodge{display:grid;place-items:center;position:absolute;right:2px;bottom:166px;width:48px;height:48px;padding:0;border:0;pointer-events:auto;touch-action:none;
  background:url(/client/assets/ui/mobile/tecnica.png) 0 0/100% 100%;overflow:hidden}
html.touch-device #mobile-dodge img{width:26px;height:26px;image-rendering:pixelated;position:relative;z-index:1}
html.touch-device #mobile-dodge small{position:absolute;left:0;right:0;bottom:2px;z-index:1;font:7px Pix,monospace;color:#d8f2ff;text-align:center;text-shadow:1px 1px 0 #1a1126}
html.touch-device #mobile-dodge::after{content:"";position:absolute;inset:4px;border-radius:50%;background:conic-gradient(#0b0712c8 calc(var(--cd,0)*360deg),transparent 0);pointer-events:none;z-index:2}
html.touch-device #mobile-dodge:active{transform:translateY(2px)}
html.touch-device #mobile-dodge.nope{animation:dodge-nope .18s}
@keyframes dodge-nope{25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
html.touch-device.mhud2.mobile-clean #mobile-dodge:not([data-hud-custom]){right:0;bottom:152px;width:44px;height:44px}