/* =====================================================================
   ASSISTENTE DE AJUDA (29/09) — src/ui/ajuda-ui.js
   Espelho do botão do CHAT no canto de baixo à ESQUERDA, com o mesmo
   vidro escuro e borda dourada (Combate B). Só existe com o jogo à vista.
   ===================================================================== */
.col-ajuda{display:none}
html.col-no-jogo .col-ajuda{position:fixed;left:14px;bottom:14px;z-index:1150;display:flex;flex-direction:column-reverse;
  align-items:flex-start;gap:6px;max-width:min(360px,calc(100vw - 24px));pointer-events:none;
  margin-bottom:var(--sa-bottom,0px);margin-left:var(--sa-left,0px)}
.col-ajuda>*{pointer-events:auto}
.col-ajuda-toggle{position:relative;min-height:34px;padding:6px 13px;border-radius:5px;border:1px solid rgba(168,146,110,.45);
  background:rgba(12,11,16,.9);color:#e0d6c6;font-weight:900;letter-spacing:1.2px;cursor:var(--cur-mao,pointer);
  font-size:calc(9px*var(--text-scale,1));backdrop-filter:blur(4px)}
.col-ajuda-toggle:hover,.col-ajuda-toggle[aria-expanded="true"]{border-color:#c79a4a;color:#fff0c4}
/* Pontinho dourado até a primeira abertura: chama o olho de quem está começando. */
.col-ajuda-nova .col-ajuda-toggle::after{content:"";position:absolute;top:-3px;right:-3px;width:10px;height:10px;border-radius:50%;
  background:#f3cf7a;box-shadow:0 0 0 2px #1a140b,0 0 10px rgba(243,207,122,.8);animation:col-ajuda-pulso 1.8s ease-in-out infinite}
@keyframes col-ajuda-pulso{50%{transform:scale(1.35);opacity:.7}}
@media (prefers-reduced-motion:reduce){.col-ajuda-nova .col-ajuda-toggle::after{animation:none}}

.col-ajuda-body{display:flex;flex-direction:column;width:min(360px,calc(100vw - 24px));height:min(460px,62dvh);
  border:1px solid rgba(168,146,110,.4);border-radius:7px;overflow:hidden;
  background:rgba(9,9,13,.95);backdrop-filter:blur(6px);box-shadow:0 18px 50px rgba(0,0,0,.6)}
.col-ajuda.is-collapsed .col-ajuda-body{display:none}
.col-ajuda-topo{display:flex;align-items:center;gap:8px;padding:8px 8px 8px 10px;border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(60,45,25,.45),rgba(20,16,10,.2))}
.col-ajuda-cabecalho{flex:1;min-width:0;display:grid;gap:1px}
.col-ajuda-cabecalho strong{color:#f3d58a;font:700 calc(11px*var(--text-scale,1)) var(--font-display,Georgia),Georgia,serif;letter-spacing:1.4px}
.col-ajuda-cabecalho small{color:#9d9283;font-size:calc(9px*var(--text-scale,1))}
.col-ajuda-voltar,.col-ajuda-fechar{flex:none;width:28px;height:28px;display:grid;place-items:center;padding:0;border-radius:4px;
  border:1px solid rgba(120,110,100,.35);background:rgba(20,19,25,.8);color:#e0d6c6;font-size:18px;line-height:1;cursor:var(--cur-mao,pointer)}
.col-ajuda-voltar:hover,.col-ajuda-fechar:hover{border-color:#c79a4a;color:#fff0c4}
.col-ajuda-voltar.hidden{display:none}
.col-ajuda-conteudo{flex:1;min-height:0;overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:6px;
  overscroll-behavior:contain;scrollbar-width:thin}
.col-ajuda-dica{margin:0 0 2px;color:#bdb2a2;font-size:calc(10px*var(--text-scale,1));line-height:1.45}
.col-ajuda-secao{margin:6px 0 0;color:#c79a4a;font-size:calc(8.5px*var(--text-scale,1));font-weight:900;letter-spacing:1.4px;text-transform:uppercase}
.col-ajuda-titulo{margin:0 0 2px;color:#f0e2cc;font:700 calc(12px*var(--text-scale,1)) var(--font-display,Georgia),Georgia,serif;line-height:1.35}
.col-ajuda-titulo i{font-style:normal}
.col-ajuda-pergunta{display:flex;align-items:center;gap:8px;width:100%;min-height:36px;padding:7px 10px;text-align:left;border-radius:5px;
  border:1px solid rgba(120,110,100,.3);background:rgba(20,19,25,.8);color:#e6dccb;cursor:var(--cur-mao,pointer);
  font-size:calc(10.5px*var(--text-scale,1));line-height:1.35}
.col-ajuda-pergunta span{flex:1;min-width:0}
.col-ajuda-pergunta i{flex:none;color:#c79a4a;font-style:normal;font-size:16px}
.col-ajuda-pergunta:hover{border-color:#c79a4a;background:rgba(60,45,25,.55)}
.col-ajuda-temas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.col-ajuda-tema{display:flex;align-items:center;gap:7px;min-height:40px;padding:6px 8px;text-align:left;border-radius:5px;
  border:1px solid rgba(168,146,110,.35);background:linear-gradient(180deg,rgba(40,32,20,.8),rgba(18,15,11,.85));color:#f0e2cc;cursor:var(--cur-mao,pointer);
  font-size:calc(10px*var(--text-scale,1));font-weight:700;line-height:1.25}
.col-ajuda-tema i{flex:none;font-style:normal;font-size:17px}
.col-ajuda-tema span{min-width:0}
.col-ajuda-tema:hover{border-color:#c79a4a;color:#fff0c4}
.col-ajuda-resposta{color:#d9cfbf;font-size:calc(10.5px*var(--text-scale,1));line-height:1.55}
.col-ajuda-resposta p{margin:0 0 7px}
.col-ajuda-resposta ul,.col-ajuda-resposta ol{margin:0 0 7px;padding-left:18px}
.col-ajuda-resposta li{margin:0 0 4px}
.col-ajuda-rodape{margin:8px 0 0;padding-top:8px;border-top:1px solid rgba(255,255,255,.07);color:#80776c;font-size:calc(9px*var(--text-scale,1));line-height:1.45}

/* Até 1700 px o CHAT vira um círculo dentro da barra do herói, à direita;
   a ajuda vira o círculo irmão à esquerda e a barra guarda o lugar dela.
   (O combate-b.css carrega depois e tem !important no padding da barra:
   o html.col-no-jogo na frente é o que faz esta regra ganhar.) */
@media (max-width:1700px){
  html.col-no-jogo .col-ajuda.is-collapsed .col-ajuda-toggle,
  html.col-no-jogo .col-ajuda .col-ajuda-toggle{width:44px;height:44px;min-height:44px;padding:0;border-radius:50%;
    font-size:0!important;letter-spacing:0;color:transparent!important;
    background:rgba(12,11,16,.92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='%23f3d58a'/%3E%3Cpath d='M9.4 9.3a2.7 2.7 0 1 1 3.9 2.4c-.8.4-1.3 1-1.3 1.9v.6' fill='none' stroke='%231a140b' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='12' cy='17.1' r='1.25' fill='%231a140b'/%3E%3C/svg%3E") 50% 50%/24px 24px no-repeat!important}
  html.col-no-jogo:not(.col-ajuda-desligada) #gameShell #battleVitalsStrip.battle-vitals-strip{padding-left:58px!important}
}
/* Celular: o círculo entra na barra de baixo, num lugar só dele à esquerda
   do BATALHA (o do chat fica à direita do MAIS). Aberta, a janela sobe
   acima da barra, na largura da tela, como o chat. */
@media (max-width:699px){
  /* 30/09 (autor, print): a regra de 1700 px acima tem o :not() e ganhava daqui por especificidade, então o
     celular guardava 58 px vazios à esquerda do painel do herói (orbe de HP deslocado). Mesma especificidade aqui. */
  html.col-no-jogo:not(.col-ajuda-desligada) #gameShell #battleVitalsStrip.battle-vitals-strip,
  html.col-no-jogo #gameShell #battleVitalsStrip.battle-vitals-strip{padding-left:10px!important}
  html.col-no-jogo:not(.col-ajuda-desligada) .bottom-nav{padding-left:48px}
  /* Os botões dividem a sobra, não a barra toda: INVENTÁRIO continua inteiro em 360 px. */
  html.col-no-jogo .bottom-nav>button{flex:1 1 auto;letter-spacing:0}
  html.col-no-jogo .col-ajuda{left:4px;bottom:10px}
  html.col-no-jogo .col-ajuda .col-ajuda-toggle{border-color:#6b5426;width:42px;height:42px;min-height:42px;background-size:22px 22px!important}
  html.col-no-jogo .col-ajuda:not(.is-collapsed){left:8px;right:8px;max-width:none;align-items:stretch}
  html.col-no-jogo .col-ajuda:not(.is-collapsed) .col-ajuda-toggle{display:none}
  html.col-no-jogo .col-ajuda:not(.is-collapsed) .col-ajuda-body{width:auto;height:min(460px,calc(var(--tela-h,100dvh) - 150px));margin-bottom:64px}
  body.nav-folha-aberta .col-ajuda,
  body.conta-menu-aberto .col-ajuda{display:none!important}
}
/* CELULAR DEITADO (03/10, achado da conversa dos Sets): preso no canto de baixo, o círculo cobria
   texto em toda tela (abas da Loja, Missões, Ranking, MUNDO...), e a página rola por baixo dele. Deitado,
   fechado, ele mora no TOPO, entre o logo e os ícones, e rola junto com a página: nunca fica por cima
   de nada. Aberta, a janela continua no canto de baixo, como antes. */
@media (min-width:700px) and (max-height:520px){
  html.col-no-jogo .col-ajuda.is-collapsed{position:absolute;top:10px;bottom:auto;left:calc(var(--sa-left,0px) + 172px);margin:0}
  /* O lugar que a barra do herói guardava para o círculo (regra de 1700 px) não é mais preciso. */
  html.col-no-jogo:not(.col-ajuda-desligada) #gameShell #battleVitalsStrip.battle-vitals-strip{padding-left:10px!important}
}
/* 26/10 (auditoria Android, opção A): deitado até 900 px o topo é o compacto de 52 px do celular
   (combate-b.css), e o círculo de 44 px a 10 px do topo saía dele por 2 px. */
@media (min-width:700px) and (max-width:900px) and (max-height:520px){
  html.col-no-jogo .col-ajuda.is-collapsed{top:4px}
}
/* Janela do jogo ou banner abertos no celular: sai do caminho, como o chat. */
@media (max-width:760px), (max-height:520px){
  html.col-com-janela .col-ajuda,
  html.col-com-banners .col-ajuda{display:none!important}
}
/* Guia do Aventureiro: "Rever o guia" no começo da ajuda (29/09). */
.col-ajuda-rever-guia{border:1px solid rgba(216,163,74,.5)!important;margin-bottom:6px}

/* Opções > "Botão de ajuda (❔)" desligado: o botão some e a barra do herói e a
   barra de baixo do celular não guardam mais o lugar dele (regras acima com :not). */
html.col-ajuda-desligada .col-ajuda{display:none!important}

/* BOTÃO "?" DAS TELAS (04/10): aberta por um data-ajuda-abrir, a janela aparece mesmo
   com a janela do jogo aberta no celular ou com o ❔ desligado nas Opções. Fechou, volta
   ao normal (a classe sai no fechar). */
html .col-ajuda.col-ajuda-por-botao:not(.is-collapsed){display:flex!important;flex-direction:column;position:fixed!important;top:auto;right:auto;
  left:max(8px,var(--sa-left,0px));bottom:max(8px,var(--sa-bottom,0px));margin:0;z-index:1200;max-width:calc(100vw - 16px);pointer-events:none}
html .col-ajuda.col-ajuda-por-botao:not(.is-collapsed) .col-ajuda-toggle{display:none!important}
html .col-ajuda.col-ajuda-por-botao:not(.is-collapsed) .col-ajuda-body{width:min(380px,calc(100vw - 16px));height:min(460px,calc(var(--tela-h,100dvh) - 24px));margin:0}
/* O "?" pequeno que as telas usam (o mesmo desenho em todas). */
.col-ajuda-mini{display:inline-grid;place-items:center;width:28px;height:28px;min-width:28px;min-height:28px;padding:0;border-radius:50%;
  border:1px solid rgba(216,163,74,.7);background:rgba(14,11,7,.85);color:#f3cf7a;font:800 15px system-ui,sans-serif;line-height:1;cursor:var(--cur-mao,pointer);vertical-align:middle;flex:0 0 auto}
.col-ajuda-mini:hover,.col-ajuda-mini:focus-visible{background:#2a2012;color:#fff1c9;outline:none;box-shadow:0 0 0 2px rgba(243,207,122,.35)}