/* =========================================================================
   CELULAR (css/mobile.css), 24/10/2026

   Par de js/mobile.js (comum ao /entrar e ao jogo) e de js/hud-mobile.js
   (só no jogo). Tudo aqui vale só com <html class="ccMobile">; no
   computador esta folha não muda nada.

   Leonardo: celular sempre deitado e em tela cheia desde o login; na
   esquerda o analógico e o chat em ícone; na direita as skills no padrão
   mobile (opção 1: básico grande e arco de 4 com duas páginas); a barra do
   centro sai e as notificações da direita vão para o centro de baixo.
   Mesma linguagem da HUD: ícone quadrado, moldura de metal, vidro escuro e
   fio dourado.
   ========================================================================= */

html.ccMobile{
  /* a HUD inteira encolhe pela altura da tela (js/mobile.js escreve --mobEsc);
     !important porque CC.TamanhoHud escreve o --escalaHud direto na raiz */
  --escalaHud:var(--mobEsc, .6) !important;
  --mobMg:4px;
  --mobEsq:calc(var(--mobMg) + env(safe-area-inset-left, 0px));
  --mobDir:calc(var(--mobMg) + env(safe-area-inset-right, 0px));
  --mobBaixo:calc(10px + env(safe-area-inset-bottom, 0px));
  --mobOuro:#e9c27a;
  --mobFio:rgba(226,190,120,.38);
  --mobVidro:rgba(9,11,17,.72);
  -webkit-text-size-adjust:100%;
  touch-action:manipulation;
}
html.ccMobile body{overscroll-behavior:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}
html.ccMobile canvas{touch-action:none}

/* ---------------------------------------------------- gire o celular */
#mobGire{display:none}
@media (orientation: portrait){
  html.ccMobile #mobGire{
    position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;
    padding:24px;background:radial-gradient(ellipse at 50% 40%, #1a1712 0%, #07080c 70%);
    color:#efe6d6;text-align:center;zoom:1 !important}
  html.ccMobile #mobTelaCheia{display:none !important}
}
.mobGireCaixa{max-width:320px;display:flex;flex-direction:column;align-items:center;gap:12px}
.mobGireFone{position:relative;display:block;width:46px;height:78px;margin-bottom:10px;
  border:2px solid var(--mobOuro, #e9c27a);border-radius:9px;box-shadow:0 0 18px rgba(233,194,122,.25);
  animation:mobGira 2.4s ease-in-out infinite}
.mobGireFone::after{content:"";position:absolute;left:50%;bottom:5px;width:12px;height:2px;margin-left:-6px;
  background:var(--mobOuro, #e9c27a);border-radius:2px}
@keyframes mobGira{0%,20%{transform:rotate(0)}50%,75%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
.mobGireTit{font-family:var(--display,var(--serif));font-size:22px;letter-spacing:.06em;color:#ffe3a6}
.mobGireTxt{margin:0;font-size:15px;line-height:1.45;color:#d8cdb9}
.mobGireDica{margin:6px 0 0;padding:10px 12px;font-size:13px;line-height:1.45;color:#e9c27a;
  border:1px solid rgba(226,190,120,.34);background:rgba(9,11,17,.6)}

/* ------------------------------------------ toque para a tela cheia */
#mobTelaCheia{display:none}
html.ccMobile:not(.mobCheia) #mobTelaCheia{
  position:fixed;left:50%;bottom:calc(8px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);
  z-index:2147482000;display:block;pointer-events:none;zoom:1 !important;
  padding:7px 16px;border:1px solid var(--mobFio);background:var(--mobVidro);
  color:#ffe3a6;font:600 13px/1.2 var(--sans);letter-spacing:.02em;white-space:nowrap;
  box-shadow:0 8px 24px rgba(0,0,0,.5);animation:mobPisca 2.2s ease-in-out infinite}
@keyframes mobPisca{0%,100%{opacity:1}50%{opacity:.6}}
#mobIosDica{position:fixed;left:50%;bottom:calc(10px + env(safe-area-inset-bottom, 0px));transform:translateX(-50%);
  z-index:2147482000;display:flex;align-items:center;gap:12px;max-width:calc(100% - 32px);zoom:1 !important;
  padding:8px 10px 8px 14px;border:1px solid var(--mobFio);background:var(--mobVidro);
  color:#efe6d6;font:13px/1.35 var(--sans)}
#mobIosDica button{flex:0 0 auto;min-width:44px;min-height:34px;border:1px solid var(--mobFio);
  background:rgba(233,194,122,.16);color:#ffe3a6;font-weight:600}

/* ================================================= HUD DE TOQUE (jogo) */
#mobHud{display:none}
html.ccMobile body > #mobHud{display:block;zoom:1 !important}

/* a barra do centro sai: as teclas viram o arco da direita. Fica só a XP. */
html.ccMobile .hudBarra .skills,
html.ccMobile #hudPips,
html.ccMobile #skDica{display:none !important}
html.ccMobile .quadro > #palcoHud::before,
html.ccMobile #palcoHud::before{display:none !important}
html.ccMobile #hudXpFaixa{position:fixed !important;left:50% !important;right:auto !important;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom, 0px) / var(--escalaHud)) !important;top:auto !important;
  width:calc(36vw / var(--escalaHud)) !important;max-width:none !important}

/* chat: some e vira ícone; aberto, sobe para o canto de cima, fora do analógico */
html.ccMobile:not(.mobChatAberto) #painelChat{display:none !important}
/* 27/10/2026: aberto, o chat vai para o meio da tela, longe das missões e do personagem */
html.ccMobile.mobChatAberto #painelChat{
  left:50% !important;top:50% !important;right:auto !important;transform:translate(-50%,-50%) !important;
  bottom:auto !important;--chatSobe:0px !important;z-index:60}
/* com o chat aberto as missões saem da frente (voltam quando ele fecha) */
html.ccMobile.mobChatAberto #palcoQuests{visibility:hidden}

/* notificações da direita descem para o centro, no lugar da barra */
html.ccMobile #avisoGlobal{
  left:50% !important;right:auto !important;transform:translateX(-50%);
  bottom:calc(var(--mobBaixo) + 14px) !important;max-width:min(36vw, 420px);text-align:center}
html.ccMobile #comPilha{
  top:auto !important;right:auto !important;left:50% !important;transform:translateX(-50%);
  bottom:calc(var(--mobBaixo) + 56px) !important;align-items:center;max-width:min(36vw, 420px)}

/* missões: saem de baixo do minimapa (onde o arco mora) e vão para a
   esquerda, embaixo do retrato. A peça tem zoom, então a conta divide. */
html.ccMobile #palcoQuests{
  left:calc(var(--mobEsq) / var(--escalaHud)) !important;right:auto !important;
  top:calc(10px + var(--hjQuadroH, 96px) + 6px + 70px + 12px) !important}
/* 28/10/2026: o topo sai da conta dos ícones de baixo do retrato (top do tema-anime + 70 px do ícone + folga),
   na mesma escala deles. Antes era 122 px de tela fixos e encostava nos ícones nas telas maiores. */

/* -------------------------------------------------- o analógico */
#mobPad{position:fixed;left:0;bottom:0;width:42vw;height:56vh;z-index:40;touch-action:none;
  -webkit-user-select:none;user-select:none}
.mobPadBase,.mobPadBotao{position:absolute;left:0;top:0;display:block;border-radius:50%;pointer-events:none}
.mobPadBase{width:124px;height:124px;margin:-62px 0 0 -62px;
  background:radial-gradient(circle, rgba(9,11,17,.18) 0%, rgba(9,11,17,.46) 62%, rgba(9,11,17,.62) 100%);
  border:1.5px solid var(--mobFio);box-shadow:inset 0 0 18px rgba(0,0,0,.55), 0 0 0 1px rgba(0,0,0,.4);
  transition:opacity .15s}
.mobPadBotao{width:54px;height:54px;margin:-27px 0 0 -27px;
  background:radial-gradient(circle at 40% 35%, #fff2c8 0%, #e9c27a 38%, #8a5a14 100%);
  border:1px solid rgba(255,227,166,.85);box-shadow:0 3px 10px rgba(0,0,0,.6), inset 0 -3px 6px rgba(70,40,8,.6)}
/* parado: o analógico mostra onde mora, mais apagado. 28/10/2026: centro a 132 px da margem, para o botão do
   chat (54 px, na mesma margem) não ficar por cima. Régua: testes/mobile-hud-ajuste.mjs */
#mobPad:not(.mobPadAtivo) .mobPadBase{
  transform:translate(calc(var(--mobEsq) + 132px), calc(56vh - var(--mobBaixo) - 82px)) !important;opacity:.55}
#mobPad:not(.mobPadAtivo) .mobPadBotao{
  transform:translate(calc(var(--mobEsq) + 132px), calc(56vh - var(--mobBaixo) - 82px)) !important;opacity:.6}

/* ------------------------------------------------- o ícone do chat */
/* 27/10/2026: chapa e ícone da HUD (hudIc), em tamanho de dedo */
html.ccMobile .mobIconeBt{position:fixed;z-index:45;width:54px !important;height:54px !important;padding:0;touch-action:none}
html.ccMobile .mobIconeBt::before{width:72% !important;height:72% !important}
#mobChatBt{left:var(--mobEsq);top:max(54vh, 210px);--icone:url("icones/ui/sussurrar.png")}
/* 28/10/2026 (mobile-hud-ajuste): Menu, Bolsa e Personagem numa linha só, com o topo no topo do minimapa
   (o minimapa fica a 237 e 52 px do canto, vezes a escala da HUD). Régua: testes/mobile-hud-ajuste.mjs */
html.ccMobile #mobMenuBt,html.ccMobile #mobBolsaBt,html.ccMobile #mobStatusBt{width:48px !important;height:48px !important;
  top:calc(52px * var(--mobEsc,.6) + env(safe-area-inset-top, 0px))}
#mobMenuBt{right:calc(237px * var(--mobEsc,.6) + 6px);--icone:url("icones/ui/menu.png")}
#mobBolsaBt{right:calc(237px * var(--mobEsc,.6) + 60px);--icone:url("icones/ui/bolsa.png")}
#mobStatusBt{right:calc(237px * var(--mobEsc,.6) + 114px);--icone:url("icones/ui/status.png")}
/* os ícones em volta do minimapa saem: o botão Menu abre o menu do Esc, que tem todos */
html.ccMobile #hudIconesMini, html.ccMobile #hudIconesDir, html.ccMobile #hudIconesBaixo,
html.ccMobile #hudBotoes{display:none !important}
/* os ícones de baixo do retrato, maiores */
/* começam colados na esquerda, como o chat (o tema-anime empurra com --hjBarraX; aqui vence por especificidade) */
html[data-estilo].ccMobile.hudIcones:not(.hudFrente) #hudDestaques,
html.ccMobile.hudIcones #hudDestaques{left:calc(var(--mobEsq) / var(--escalaHud)) !important;gap:10px}
/* #palcoHud escala uns 0,6: 70 px viram uns 43 px na tela. Réguas: testes/mobile-bugs.mjs e mobile-hud-ajuste.mjs */
html.ccMobile.hudIcones #hudDestaques .hudIc{width:70px !important;height:70px !important}
/* o título em cima do nome segue a escala do celular, não a fonte grande da raiz */
html.ccMobile .tqRank{--escalaFonte:var(--mobEsc,.6)}
.mobChatPonto{position:absolute;right:3px;top:3px;width:10px;height:10px;border-radius:50%;display:none;
  background:#ff4d5e;box-shadow:0 0 6px rgba(255,77,94,.9)}
#mobChatBt.mobNovo .mobChatPonto{display:block}
html.mobChatAberto #mobChatBt{filter:brightness(1.3);box-shadow:0 0 0 1px var(--mobOuro), 0 0 12px rgba(233,194,122,.5)}
.mobIconeBt.mobApertado{filter:brightness(1.4)}

/* -------------------------------------------------- a direita */
#mobDireita{position:fixed;right:var(--mobDir);bottom:var(--mobBaixo);width:360px;height:250px;z-index:42;
  pointer-events:none}
#mobDireita > *, #mobDireita .mobArco > *, #mobDireita .mobLinha > *{pointer-events:auto}
#mobDireita .mobArco{position:absolute;inset:0;pointer-events:none;transition:opacity .14s}
html:not(.mobPagB) #mobDireita .mobArcoB,
html.mobPagB #mobDireita .mobArcoA{opacity:0;visibility:hidden}

/* os ladrilhos do celular: a mesma peça da barra, maior, sem tecla e sem hint */
#mobHud .mobSk{position:absolute;width:58px !important;height:58px !important;margin:0;touch-action:none;
  -webkit-user-select:none;user-select:none}
#mobHud .mobSk kbd,#mobHud .mobSk .marca{display:none !important}
#mobHud .mobSk .cdN{left:0 !important;right:0 !important;text-align:center;font-size:13px;bottom:4px;text-shadow:0 1px 2px #000, 0 0 4px #000}
/* (27/10/2026, mobile-bugs) a carga (2/2, 3/3) vira selo no canto de cima e o número
   do tempo fica embaixo: antes os dois caíam no mesmo lugar. Régua: testes/mobile-bugs.mjs */
#mobHud .mobSk .hiCarga{position:absolute !important;left:auto !important;right:-1px !important;top:-6px !important;bottom:auto !important;
  width:auto !important;height:auto !important;min-width:0;padding:1px 5px;border-radius:9px;font-size:11px;line-height:14px;z-index:4;
  background:rgba(8,10,16,.88);border:1px solid rgba(255,255,255,.25)}
#mobHud .mobSk.mobApertado{filter:brightness(1.35) saturate(1.1);transform:scale(.94)}
#mobHud .mobSk.mobApertado.frio{filter:brightness(.6) saturate(.6)}
#mobHud .mobSk:hover{filter:none}
#mobHud .mobDe-kQ,#mobHud .mobDe-kT{background-image:url('relics/hotbar/slot-final.png')}
#mobHud .mobDe-kF,#mobHud .mobDe-kG{background-image:url('relics/hotbar/slot-consumo.png')}
#mobHud .mobDe-kShift,#mobHud .mobDe-kE,#mobHud .mobProprio{background-image:url('relics/hotbar/slot-ataque.png')}
#mobHud .mobDe-kF .skIcone,#mobHud .mobDe-kG .skIcone,#mobHud .mobDe-kShift .skIcone,
#mobHud .mobDe-kE .skIcone,#mobHud .mobProprio .skIcone{top:23%;bottom:23%}
#mobHud .mobProprio .skIcone{left:22%;right:22%;background-size:contain}
/* 25/10/2026: o tingimento (sepia + matiz) era para a arte antiga das poções; o frasco novo já traz a cor do líquido
   (vermelho e azul), e com o filtro o Fulgor saía laranja. As cores do contador (.cdN) abaixo ficam. */
#mobHud .mobDe-kF{filter:none}
#mobHud .mobDe-kG{filter:none}
#mobHud .mobDe-kF .cdN{color:#e5907e}
#mobHud .mobDe-kG .cdN{color:#7fb4e8}

/* o básico, grande, no canto */
#mobHud .mobAtk{right:6px;bottom:6px;width:90px !important;height:90px !important;
  filter:drop-shadow(0 0 8px rgba(233,194,122,.35))}
#mobHud .mobAtk .cdN{font-size:15px}
/* 28/10/2026: a arma inteira dentro do botão. O ladrilho do celular herdava cover e cortava a ponta da espada. */
#mobHud .mobAtk.kAtkArma .skIcone{left:12%;right:12%;top:12%;bottom:12%;border-radius:0;
  background-size:contain !important;background-position:center !important;background-repeat:no-repeat !important}

/* as skills (28/10/2026, Leonardo: "as skill deixa alinhadas"): uma fileira reta de 54 em cima do básico,
   6 px entre elas, a última alinhada à direita com o básico. Régua: testes/mobile-hud-ajuste.mjs */
#mobHud .mobArco .mobSk{width:54px !important;height:54px !important}
#mobHud .mobArc0{left:120px;top:94px}
#mobHud .mobArc1{left:180px;top:94px}
#mobHud .mobArc2{left:240px;top:94px}
#mobHud .mobArc3{left:300px;top:94px}

/* troca de página: entre o arco e o básico */
.mobTroca{position:absolute;left:316px;top:44px;width:38px;height:30px;padding:0;
  border:1px solid var(--mobFio);background:var(--mobVidro);display:flex;align-items:center;justify-content:center;gap:3px;
  touch-action:none}
.mobTroca b{font:600 11px/1 var(--mono);color:#8a8174;padding:2px 3px}
html:not(.mobPagB) .mobTroca .mobTrocaA,html.mobPagB .mobTroca .mobTrocaB{color:#1a1208;background:var(--mobOuro)}
.mobTroca.mobApertado{filter:brightness(1.3)}

/* poções e recolher (28/10/2026, "aproxima os outros de poção"): fileira colada à esquerda do básico, embaixo
   das skills (vida do lado do básico), deixando o centro de baixo livre para as notificações */
.mobLinha{position:absolute;left:96px;bottom:6px;display:flex;flex-direction:row;gap:6px;pointer-events:none}
#mobHud .mobLinha .mobDe-kF{order:3}
#mobHud .mobLinha .mobDe-kG{order:2}
#mobHud .mobLinha .mobProprio{order:1}
#mobHud .mobLinha .mobSk{position:relative;width:48px !important;height:48px !important}
#mobHud .mobLinha .mobSk .cdN{font-size:11px}

/* AUTO (28/10/2026, mobile-hud-ajuste): botão redondo de 48 no vão em cima do arco, ponto em cima e rótulo
   embaixo, sem encostar em nenhum outro. Régua: testes/mobile-hud-ajuste.mjs */
.mobAuto{position:absolute;left:258px;top:34px;width:48px;height:48px;padding:0;border-radius:50%;box-sizing:border-box;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1.5px solid var(--mobFio);background:radial-gradient(circle at 50% 35%, rgba(60,52,40,.85), var(--mobVidro) 70%);
  color:#a99f8e;font:800 10px/1 var(--mono);letter-spacing:calc(.06em * var(--rotulo-espaco,1));touch-action:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 6px rgba(0,0,0,.45)}
.mobAuto .hudAutoPt{position:static;display:block;width:9px;height:9px;border-radius:50%;background:#5a5348}
.mobAuto.mobApertado{transform:scale(.94);filter:brightness(1.3)}
.mobAuto.on{color:#ffe3a6;border-color:rgba(240,206,140,.85);box-shadow:0 0 10px rgba(233,194,122,.35)}
.mobAuto.on .hudAutoPt{background:#9be36a;box-shadow:0 0 6px #9be36a}

/* tela baixa (celular pequeno deitado): tudo um degrau menor */
@media (max-height: 360px){
  #mobDireita{transform:scale(.86);transform-origin:right bottom}
  /* tela baixa: acima da fileira de skills não cabe nada sem bater no minimapa; AUTO e troca vão para a esquerda dela */
  .mobAuto{left:64px;top:97px}
  .mobTroca{left:22px;top:106px}
  .mobPadBase{width:108px;height:108px;margin:-54px 0 0 -54px}
}

/* ================================================== /entrar no celular */
/* As telas do /entrar foram desenhadas para 720 px de altura ou mais. Deitado,
   o celular tem uns 360 a 430: cada tela encolhe inteira pelo mesmo número da
   HUD do jogo (--mobEsc), e se ainda sobrar, rola por dentro. */
html.ccMobile body.emAcesso #telaAcesso,
html.ccMobile #telaServidor,
html.ccMobile #telaPersonagens,
html.ccMobile #telaPacto{zoom:var(--mobEsc, .6)}
html.ccMobile #telaAcesso,
html.ccMobile #telaServidor,
html.ccMobile #telaPersonagens,
html.ccMobile #telaPacto{max-height:calc(100vh / var(--mobEsc, .6));overflow-y:auto;overscroll-behavior:contain}

/* ================================================== janelas no celular */
/* (24/10/2026, mobile-fim) Janela aberta: a HUD de toque sai da frente (o X da
   janela fecha, e ela volta). As janelas soltas (bolsa, status, forja, skills,
   configurações) ficam no meio da tela e um degrau maiores que a HUD, para o
   dedo acertar; as grandes (mapa, códex, loja, diário, clã) já ocupam a tela.
   O --escalaHud da própria janela muda o zoom e as contas de dentro juntos. */
html.ccMobile body:has(.hudToggle.on, .ipPainel.on) > #mobHud{display:none !important}
html.ccMobile .hudToggle.janSolta{--escalaHud:min(1, calc(var(--mobEsc, .6) * 1.3)) !important}
html.ccMobile .hudToggle.janSolta.on{
  left:0 !important;right:0 !important;top:0 !important;bottom:0 !important;margin:auto !important;
  width:fit-content !important;height:fit-content !important;transform:none !important;
  max-width:calc(100vw / var(--escalaHud)) !important;max-height:calc(100vh / var(--escalaHud)) !important;
  overflow:auto;overscroll-behavior:contain}

/* (25/10/2026, mobile-sobras) Tela pequena, janela do Personagem (V).
   Antes, a partir de 1100 px de largura a janela empilhava (boneco em cima, painel
   embaixo) com o boneco sem altura propria (min-height:0) e o canvas dele, que e
   absoluto, caia por cima dos numeros. Deitado o celular tem de 700 a 930 px de
   largura util (ja descontado o zoom), e 240 + 512 + padding cabem lado a lado:
   boneco a esquerda, painel a direita, cada um com a altura --cvAlt, sem sobrepor. */
html.ccMobile #palcoStatus.janSolta{--cvDollL:240px;--cvPainelL:460px}
html.ccMobile #palcoStatus.janSolta .cvCorpo{
  grid-template-columns:var(--cvDollL) calc(var(--cvMenuL) + var(--cvPainelL));align-items:start}
html.ccMobile #palcoStatus.janSolta .cvDoll{min-height:var(--cvAlt);margin:0;position:relative;overflow:hidden}
html.ccMobile #palcoStatus.janSolta .cvLado{min-height:var(--cvAlt);position:relative;z-index:1}

/* Texto minimo de 14 px na tela, nas janelas soltas abertas. A letra da HUD e
   10,5 px x --escalaFonte x o zoom da janela (--escalaHud); aqui --fonteHud passa a
   ser 14 / (10,5 x zoom), e a base de 10,5 px fica em 14 px visiveis. Vale para o que
   usa --escalaFonte; texto em px fixo fora dessa conta nao muda. */
html.ccMobile .hudToggle.janSolta.on{
  --fonteHud:calc(1.334 / var(--escalaHud));
  --escalaFonte:var(--fonteHud)}