/* GUIA AO LIBERAR ALGO — o holofote (src/ui/guia-liberacao.js, 03/10).
   Acima das janelas do jogo (1200–2600) e abaixo do aviso de cookies (9000).
   Os 4 .gl-bloq cobrem tudo menos o buraco do botão aceso: o jogador só
   toca no que o guia mostra, ou no cartão (PULAR fecha sempre). */
.gl-guia{position:fixed;inset:0;z-index:8000;pointer-events:none}
.gl-guia .gl-bloq{position:fixed;pointer-events:auto;background:rgba(6,5,9,.72);touch-action:none}
.gl-guia .gl-ring{position:fixed;border:2px solid #f3cf7a;border-radius:10px;box-shadow:0 0 22px 4px rgba(243,207,122,.55);pointer-events:none;box-sizing:border-box;animation:glPulsa 1.6s ease-in-out infinite}
.gl-guia.gl-procurando .gl-ring,.gl-guia.gl-procurando .gl-novo,.gl-guia.gl-procurando .gl-seta,.gl-guia.gl-procurando .gl-card{visibility:hidden}
.gl-guia.gl-procurando .gl-bloq{background:transparent;pointer-events:none}
.gl-guia.gl-pausa{display:none}
.gl-guia .gl-novo{position:fixed;background:#c7362f;color:#fff;font:900 10px/1 system-ui,sans-serif;letter-spacing:1px;padding:4px 7px;border-radius:9px;pointer-events:none;white-space:nowrap}
.gl-guia .gl-seta{position:fixed;left:0;top:0;pointer-events:none;overflow:visible}
.gl-guia .gl-card{position:fixed;pointer-events:auto;width:min(360px,calc(100vw - 16px));max-height:calc(100vh - 16px);max-height:calc(100dvh - 16px);overflow:auto;box-sizing:border-box;
  background:rgba(14,12,18,.97);border:1px solid #c79a4a;border-radius:10px;padding:14px 16px 12px;color:#e8dfcf;font:14px/1.45 system-ui,sans-serif;box-shadow:0 18px 50px rgba(0,0,0,.7);overflow-wrap:anywhere}
.gl-guia .gl-card.gl-chama{animation:glChama .5s ease}
.gl-guia .gl-eyebrow{color:#d8a34a;font:800 11px/1.2 system-ui,sans-serif;letter-spacing:1.8px;text-transform:uppercase;margin-bottom:6px}
.gl-guia h3{margin:0 0 6px;font:700 20px/1.2 Georgia,serif;color:#f7e6bf}
.gl-guia .gl-card p{margin:0 0 8px}
.gl-guia .gl-oque{color:#f3e5c6}
.gl-guia .gl-pe{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:6px}
.gl-guia .gl-pontos{display:flex;gap:5px;flex:1 1 auto;min-width:40px}
.gl-guia .gl-pontos i{width:16px;height:3px;border-radius:2px;background:#4a3d27}
.gl-guia .gl-pontos i.on{background:#f3cf7a}
.gl-guia .gl-btn{min-height:36px;border:1px solid #6b5426;background:transparent;color:#cbbfa8;font:800 11px/1 system-ui,sans-serif;letter-spacing:1.2px;padding:9px 12px;border-radius:6px;cursor:var(--cur-mao,pointer)}
.gl-guia .gl-btn.pri{background:var(--botao-ouro-fundo);color:var(--botao-ouro-texto);border-color:var(--botao-ouro-borda)}
.gl-guia .gl-btn[hidden],.gl-guia .gl-novo[hidden],.gl-guia .gl-oque[hidden]{display:none}
/* DESLIGAR TUTORIAIS (28/10, opção A): linha discreta no pé do cartão; tocar troca o cartão pela pergunta. */
.gl-guia .gl-desligar{display:block;width:100%;margin:10px 0 0;padding:7px 0 0;min-height:28px;border:0;border-top:1px solid #3a2f1c;background:none;color:#a99c84;
  font:600 12px/1.3 system-ui,sans-serif;text-decoration:underline;text-align:left;cursor:var(--cur-mao,pointer);overflow-wrap:anywhere}
.gl-guia .gl-desligar:hover,.gl-guia .gl-desligar:focus-visible{color:#e8dfcf}
.gl-guia .gl-desligar[hidden]{display:none}
.gl-guia .gl-pergunta{display:none}
.gl-guia .gl-card.gl-perguntando>:not(.gl-pergunta){display:none}
.gl-guia .gl-card.gl-perguntando .gl-pergunta{display:block}
.gl-guia .gl-pergunta .gl-ptexto{color:#cbbfa8}
.gl-guia .gl-pergunta .gl-sim{min-width:0}
@keyframes glPulsa{50%{box-shadow:0 0 30px 8px rgba(243,207,122,.8)}}
@keyframes glChama{30%{transform:scale(1.03);border-color:#ffe39a}}
/* Celular deitado: cartão mais largo e mais baixo, para caber em cima ou embaixo do alvo. */
@media (max-height:500px) and (min-width:600px){
  .gl-guia .gl-card{width:min(520px,calc(100vw - 16px));padding:10px 14px 8px;font-size:13px;line-height:1.38}
  .gl-guia h3{font-size:17px;margin-bottom:4px}
  .gl-guia .gl-card p{margin-bottom:6px}
  .gl-guia .gl-btn{min-height:32px;padding:7px 11px}
}
/* 26/10 (auditoria Android): na tela de Personagens o escuro só escurece, sem travar o ✕ e os botões; no celular em pé
   o cartão vira uma faixa fina no alto (lugarNaSelecao em src/ui/guia-liberacao.js). */
.gl-guia.gl-selecao .gl-bloq{pointer-events:none}
.gl-guia .gl-card.gl-faixa{padding:9px 12px 7px;font-size:13px;line-height:1.35}
.gl-guia .gl-card.gl-faixa .gl-eyebrow{margin-bottom:3px}
.gl-guia .gl-card.gl-faixa h3{font-size:17px;margin-bottom:3px}
.gl-guia .gl-card.gl-faixa p{margin-bottom:4px}
.gl-guia .gl-card.gl-faixa .gl-pe{margin-top:2px}
.gl-guia .gl-card.gl-faixa .gl-btn{min-height:32px;padding:7px 11px}
.gl-guia .gl-card.gl-faixa .gl-desligar{margin-top:5px;padding-top:4px}
@media (prefers-reduced-motion:reduce){.gl-guia .gl-ring,.gl-guia .gl-card.gl-chama{animation:none}}