/* =====================================================================
   GUIA DO AVENTUREIRO — opção "A" escolhida pelo autor em 29/09
   ---------------------------------------------------------------------
   5 páginas: print grande do jogo com setas douradas numeradas e a
   explicação ao lado (celular: embaixo, com a barra dos botões presa no pé
   da tela). Mesmo dourado do tutorial "C" (styles/tutorial.css). Tudo aqui
   vale SÓ dentro de #guiaModal. Lógica: src/ui/guia-aventureiro.js.
   ===================================================================== */
#guiaModal{--gd-ouro:#d8a34a;--gd-ouro-claro:#f3d58b;--gd-tinta:#efe3c8;--gd-tinta-2:#b9a987;--gd-escuro:#07070a;--gd-titulo:"Cinzel",Georgia,serif;
  z-index:2600;align-items:center!important;justify-content:center!important;padding:18px!important;
  background:radial-gradient(ellipse at 50% 45%,rgba(20,14,8,.8),rgba(0,0,0,.95) 75%)!important}
#guiaModal .guia-cartao{position:relative;box-sizing:border-box;display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;gap:18px;
  width:min(1240px,100%)!important;max-width:none!important;height:min(760px,calc(100vh - 36px));max-height:none!important;overflow:hidden!important;
  padding:6px 8px!important;border:0!important;border-radius:0!important;background:none!important;box-shadow:none!important;color:var(--gd-tinta);text-align:left}
#guiaModal .guia-topo{display:flex;align-items:flex-end;gap:20px;padding-right:48px}
#guiaModal .guia-cabecalho{flex:1;min-width:0}
#guiaModal .guia-sobre{display:block;font:600 12px/1.3 var(--gd-titulo);letter-spacing:5px;text-transform:uppercase;color:var(--gd-ouro)}
#guiaModal .guia-titulo{margin:8px 0 0!important;font:700 clamp(24px,3vw,38px)/1.1 var(--gd-titulo)!important;color:#fff4dc!important;text-shadow:0 3px 22px #000;text-wrap:balance}
#guiaModal .guia-pontos{display:flex;gap:8px;padding-bottom:10px}
#guiaModal .guia-pontos i{width:34px;height:5px;border-radius:3px;background:#3a3021}
#guiaModal .guia-pontos i.on{background:var(--gd-ouro)}
#guiaModal .guia-fechar{position:absolute!important;top:0;right:0;z-index:3}

#guiaModal .guia-corpo{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:32px;align-items:center;min-height:0}
#guiaModal .guia-print{position:relative;justify-self:center;margin:0;max-width:100%;border:2px solid #8a6a32;border-radius:12px;overflow:hidden;
  box-shadow:0 0 0 1px #000,0 20px 60px #000;background:#000;line-height:0}
#guiaModal .guia-print-img{display:block;max-width:100%;max-height:calc(min(760px,100vh - 36px) - 190px);width:auto;height:auto}
#guiaModal .guia-setas{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
#guiaModal .guia-seta{fill:none;stroke:var(--gd-ouro-claro);stroke-width:3.2;filter:drop-shadow(0 0 3px #000)}
#guiaModal .guia-ponta{fill:var(--gd-ouro-claro)}
#guiaModal .guia-alvo{fill:none;stroke:var(--gd-ouro-claro);stroke-width:3}
#guiaModal .guia-alvo-pulso{fill:none;stroke:var(--gd-ouro);stroke-width:2;opacity:.6}
#guiaModal .guia-etiquetas{position:absolute;inset:0;pointer-events:none;line-height:1.15}
#guiaModal .guia-etiqueta{position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;gap:7px;padding:5px 11px 5px 5px;border-radius:999px;white-space:nowrap;
  background:rgba(16,12,6,.92);border:1.5px solid var(--gd-ouro);box-shadow:0 6px 18px #000;font:800 13px/1.15 var(--font-body,system-ui,sans-serif);color:var(--gd-tinta)}
#guiaModal .guia-etiqueta b,#guiaModal .guia-num{display:grid;place-items:center;flex:none;width:24px;height:24px;border-radius:50%;
  background:linear-gradient(#f3d58b,#c58d34);color:#1a1206;font:800 13px/1 var(--font-body,system-ui,sans-serif)}

#guiaModal .guia-texto{display:grid;gap:16px;align-content:center;min-height:0;max-height:100%;overflow:auto;padding-right:4px}
#guiaModal .guia-paragrafo{margin:0;font-size:16.5px;line-height:1.55;color:var(--gd-tinta)}
#guiaModal .guia-notas{list-style:none;margin:0;padding:0;display:grid;gap:12px}
#guiaModal .guia-notas li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start;font-size:15px;line-height:1.45;color:var(--gd-tinta)}
#guiaModal .guia-num{width:28px;height:28px;font-size:14px}
#guiaModal .guia-notas strong{color:var(--gd-ouro-claro)}
#guiaModal .guia-niveis{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;margin:0;font-size:14.5px}
#guiaModal .guia-niveis dt{font-weight:800;color:var(--gd-ouro-claro)}
#guiaModal .guia-niveis dd{margin:0;color:var(--gd-tinta)}
#guiaModal .guia-fim{margin:0;font-size:14.5px;color:var(--gd-tinta-2)}

#guiaModal .guia-rodape{display:flex;align-items:center;justify-content:space-between;gap:16px}
#guiaModal .guia-nunca{display:flex;align-items:center;gap:10px;font:700 14px/1.2 var(--font-body,system-ui,sans-serif);color:var(--gd-tinta-2);cursor:pointer;user-select:none}
#guiaModal .guia-nunca input{width:22px;height:22px;margin:0;accent-color:#d8a34a;cursor:pointer}
#guiaModal .guia-botoes{display:flex;align-items:center;gap:10px}
#guiaModal .guia-voltar{min-height:48px;padding:0 16px;background:none!important;border:0!important;box-shadow:none!important;color:var(--gd-tinta-2)!important;font:700 12px/1 var(--font-body,system-ui,sans-serif)!important;letter-spacing:2px;cursor:pointer}
#guiaModal .guia-voltar:disabled{opacity:.3;cursor:default}
#guiaModal .guia-avancar{min-height:56px;padding:0 40px;border:1px solid #e8bf6a!important;border-radius:8px!important;background:linear-gradient(180deg,#e2b056,#8a5c12)!important;color:#fff5d6!important;cursor:pointer;
  font:700 17px/1 var(--gd-titulo)!important;letter-spacing:3px!important;box-shadow:0 10px 30px rgba(0,0,0,.55),0 0 28px rgba(216,163,74,.35),inset 0 1px 0 rgba(255,236,180,.45)!important;text-shadow:0 1px 2px rgba(0,0,0,.6)}
#guiaModal button:focus-visible,#guiaModal .guia-nunca input:focus-visible{outline:2px solid var(--gd-ouro-claro);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  #guiaModal .guia-alvo-pulso{animation:guiaPulso 1.6s ease-out infinite;transform-box:fill-box;transform-origin:center}
  @keyframes guiaPulso{from{transform:scale(1);opacity:.7}to{transform:scale(1.9);opacity:0}}
}
@media (max-width:1000px) and (min-width:761px){#guiaModal .guia-corpo{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px}}

/* ---------------------------------------------------------------- celular */
@media (max-width:760px){
  #guiaModal{align-items:stretch!important;padding:0!important}
  #guiaModal .guia-cartao{height:100%;width:100%!important;gap:0;padding:0!important;grid-template-rows:auto minmax(0,1fr) auto}
  #guiaModal .guia-topo{padding:calc(14px + env(safe-area-inset-top,0px)) 56px 10px 16px;flex-wrap:wrap;gap:8px}
  #guiaModal .guia-sobre{font-size:10px;letter-spacing:3px}
  #guiaModal .guia-titulo{font-size:22px!important;margin-top:6px!important}
  #guiaModal .guia-pontos{order:3;width:100%;padding:0}
  #guiaModal .guia-pontos i{flex:1;width:auto}
  #guiaModal .guia-fechar{top:calc(10px + env(safe-area-inset-top,0px));right:10px}
  #guiaModal .guia-corpo{display:block;overflow:auto;padding:4px 16px 16px;-webkit-overflow-scrolling:touch}
  #guiaModal .guia-print{display:block;width:100%;margin:0 0 14px}
  #guiaModal .guia-print-img{width:100%;max-height:none}
  #guiaModal .guia-etiqueta{font-size:11.5px;padding:4px 9px 4px 4px;gap:5px}
  #guiaModal .guia-etiqueta b{width:20px;height:20px;font-size:11.5px}
  #guiaModal .guia-texto{overflow:visible;max-height:none;padding:0;gap:12px}
  #guiaModal .guia-paragrafo{font-size:15px}
  #guiaModal .guia-notas li{font-size:14.5px}
  #guiaModal .guia-rodape{flex-direction:column;align-items:stretch;gap:10px;padding:12px 16px calc(14px + env(safe-area-inset-bottom,0px));
    background:rgba(7,7,10,.96);border-top:1px solid rgba(216,163,74,.35)}
  #guiaModal .guia-botoes .guia-avancar{flex:1;padding:0 16px;font-size:15px!important}
}