/* =====================================================================
   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: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: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: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: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 #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){
  html.col-no-jogo #gameShell #battleVitalsStrip.battle-vitals-strip{padding-left:10px!important}
  html.col-no-jogo .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}
}
/* 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}
}