/* =========================================================
   TOUR — Detonado Claude.OS 1.0 (tour.js)
   veu (segura os toques) < foco (escurece o resto + borda luminosa) < seta < balao
   Tudo acima de qualquer janela do app (conquista 12, compartilhar 13, faixa da vitrine 60).
   ========================================================= */
.tour-veu{position:fixed;inset:0;z-index:9000;background:transparent;cursor:default;-webkit-tap-highlight-color:transparent}

/* a sombra gigante e o escurecido; o buraco dela e o elemento em destaque */
.tour-foco{position:fixed;z-index:9001;pointer-events:none;border-radius:12px;
  box-shadow:0 0 0 200vmax rgba(6,5,4,.74);
  transition:left .35s cubic-bezier(.4,0,.2,1),top .35s cubic-bezier(.4,0,.2,1),width .35s cubic-bezier(.4,0,.2,1),
             height .35s cubic-bezier(.4,0,.2,1),border-radius .35s}
/* a BORDA LUMINOSA laranja, pulsando */
.tour-foco::after{content:'';position:absolute;inset:-2px;border-radius:inherit;border:2px solid #FF5A2A;
  box-shadow:0 0 10px 1px rgba(255,90,42,.65),inset 0 0 8px rgba(255,90,42,.25);
  animation:tour-pulso 1.5s ease-in-out infinite}
@keyframes tour-pulso{
  0%,100%{box-shadow:0 0 8px 1px rgba(255,90,42,.55),inset 0 0 6px rgba(255,90,42,.2);border-color:#FF5A2A}
  50%{box-shadow:0 0 24px 7px rgba(255,90,42,.85),0 0 46px 12px rgba(234,179,8,.22),inset 0 0 12px rgba(255,90,42,.4);border-color:#FF8A5C}}
.tour-foco.centro::after{display:none}

/* ---------- balao ---------- */
.tour-balao{position:fixed;z-index:9002;left:10px;top:10px;width:340px;display:flex;flex-direction:column;
  background:#151412;color:#EDE7DA;border:1px solid #4a3020;border-radius:14px;
  box-shadow:0 14px 44px rgba(0,0,0,.65),0 0 0 1px rgba(255,90,42,.18);
  font-family:Inter,system-ui,sans-serif;overflow:hidden;
  transition:left .3s cubic-bezier(.4,0,.2,1),top .3s cubic-bezier(.4,0,.2,1)}
.tour-balao.chacoalha{animation:tour-chacoalha .38s}
@keyframes tour-chacoalha{20%{transform:translateX(-6px)}45%{transform:translateX(5px)}70%{transform:translateX(-3px)}}
.tour-cab{flex:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:10px 10px 6px 14px}
.tour-conta{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.14em;color:#8A857B;text-transform:uppercase}
.tour-pular{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:11px;letter-spacing:.06em;background:none;color:#b9b3a8;
  border:1px solid #2e2c28;border-radius:99px;padding:6px 11px;cursor:pointer;white-space:nowrap}
.tour-pular:hover{color:#EDE7DA;border-color:#FF5A2A}
.tour-trilho{flex:none;height:3px;margin:0 14px;background:#24221f;border-radius:99px;overflow:hidden}
.tour-trilho i{display:block;height:100%;width:0;background:linear-gradient(90deg,#FF3D1F,#FF5A2A,#EAB308);transition:width .35s}
/* so o miolo rola quando a tela e baixa: cabecalho (Pular) e botoes ficam sempre a vista */
.tour-corpo{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:10px 14px 4px}
.tour-corpo h3{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:21px;letter-spacing:.02em;line-height:1.15;margin:0 0 6px}
.tour-corpo h3 b{color:#FF5A2A;font-weight:400}
.tour-txt{font-size:14px;line-height:1.5;color:#d6d0c3}
.tour-txt b{color:#EDE7DA;font-weight:600}
.tour-txt p{margin:0 0 8px}
.tour-pes{flex:none;display:flex;gap:8px;padding:10px 14px 14px}
.tour-bt{flex:1;font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12.5px;padding:11px 10px;border-radius:9px;
  border:1px solid #2e2c28;background:#1d1c19;color:#EDE7DA;cursor:pointer;white-space:nowrap}
.tour-bt:hover{border-color:#FF5A2A}
.tour-bt.prim{background:#FF5A2A;border-color:#FF5A2A;color:#0D0D0D;font-weight:600}
.tour-bt:disabled{opacity:.3;cursor:default}
.tour-bt:disabled:hover{border-color:#2e2c28}
.tour-bt:focus-visible,.tour-pular:focus-visible{outline:2px solid #EAB308;outline-offset:2px}

/* o passo de instalar mostra o passo a passo dentro do balao: versao compacta */
.tour-balao .inst-sub{margin:0 0 8px;font-size:13px;color:#8A857B}
.tour-balao .inst-passos{gap:6px;margin-bottom:8px}
.tour-balao .inst-passo{padding:7px 9px;gap:9px}
.tour-balao .inst-ic{width:46px;height:36px;border-radius:9px}
.tour-balao .inst-pilula{font-size:8.5px}
.tour-balao .inst-ic svg{width:21px;height:21px}
.tour-balao .inst-tx{font-size:13px}
.tour-balao .inst-tx small{font-size:11.5px}
.tour-balao .inst-nota{font-size:11.5px;padding:7px 9px}
.tour-balao .inst-botao{margin:2px 0 6px}

/* ---------- seta (fora do balao: o balao corta o que passa da borda dele) ---------- */
.tour-seta{position:fixed;z-index:9003;width:14px;height:14px;background:#151412;transform:rotate(45deg);pointer-events:none;
  border:1px solid transparent;display:none;
  transition:left .3s cubic-bezier(.4,0,.2,1),top .3s cubic-bezier(.4,0,.2,1)}
.tour-seta.baixo{border-top-color:#4a3020;border-left-color:#4a3020}       /* balao abaixo do alvo: seta pra cima */
.tour-seta.cima{border-bottom-color:#4a3020;border-right-color:#4a3020}    /* balao acima: seta pra baixo */
.tour-seta.direita{border-bottom-color:#4a3020;border-left-color:#4a3020}  /* balao a direita: seta pra esquerda */
.tour-seta.esquerda{border-top-color:#4a3020;border-right-color:#4a3020}   /* balao a esquerda: seta pra direita */

/* ---------- convite da primeira entrada ---------- */
.tour-convite{position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  background:rgba(6,5,4,.8);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:tour-entra .3s ease-out;
  padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px))
          max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
@keyframes tour-entra{from{opacity:0}}
.tour-convite-caixa{width:min(380px,100%);max-height:100%;overflow:auto;text-align:center;background:#151412;
  border:1px solid #4a3020;border-radius:16px;padding:20px 18px 16px;
  box-shadow:0 18px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,90,42,.15),0 0 60px rgba(234,179,8,.08)}
.tour-convite-raio{display:block;height:58px;width:auto;margin:0 auto 8px;filter:drop-shadow(0 0 12px rgba(234,179,8,.7))}
.tour-convite h2{font-family:Anton,Impact,sans-serif;font-weight:400;font-size:23px;line-height:1.15;letter-spacing:.02em;margin:0 0 8px;color:#EDE7DA}
.tour-convite h2 b{color:#FF5A2A;font-weight:400}
.tour-convite p{font-size:14px;line-height:1.5;color:#b9b3a8;margin:0 0 16px}
.tour-convite-bts{display:flex;gap:8px}
/* deitado (pouca altura): o raio sai, sobra espaco pro texto */
@media(max-height:430px){ .tour-convite-raio{height:38px;margin-bottom:4px} .tour-convite p{margin-bottom:12px} }

@media(prefers-reduced-motion:reduce){
  .tour-foco,.tour-balao,.tour-seta{transition:none}
  .tour-foco::after{animation:none}
}