/* Horda em 7 dias: BOTÕES COM CARA DE BOTÃO (2026-11-05, pedido do usuário: "brilho atrás dos botões, para a pessoa
   ver que dá para clicar", e os outros botões, como o voltar, também parecerem botão). Vem por último.
   1. relevo: todo botão tem uma borda mais escura embaixo (espessura) e afunda ao tocar;
   2. o botão principal de cada tela respira (brilho lento atrás) até a pessoa usar ele uma vez (o botoes.js guarda);
   3. o que tem novidade (.pode: missão pronta, profissão, prêmio) respira sempre, devagar, no lugar do pisca rápido;
   4. DEFENDER: além do brilho, uma faixa de luz passa por ele de vez em quando;
   5. voltar: um desenho só em todas as telas;
   6. aviso não tem cara de botão (sem borda em volta, só uma faixa do lado);
   7. linhas que abrem alguma coisa ganham a seta ›;
   8. no PC o botão clareia e sobe um pouquinho com o mouse em cima.
   Quem pediu ao celular para reduzir o movimento fica sem brilho piscando e sem a faixa. */

/* ---------- 1. relevo ---------- */
button, a.e-link {
  --bt-relevo: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 16px 18px -12px rgba(255, 255, 255, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.45), 0 2px 0 rgba(0, 0, 0, 0.4);
  box-shadow: var(--bt-relevo);
  transition: translate 0.08s ease-out, box-shadow 0.08s ease-out, filter 0.15s;
}
/* os que já tinham sombra por fora ficam com ela e com o relevo */
#j-mapa-lado button { --bt-relevo: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 16px 18px -12px rgba(255, 255, 255, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.45), 0 2px 0 rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.5); box-shadow: var(--bt-relevo); }
#c-lado .c-ic { --bt-relevo: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 16px 18px -12px rgba(255, 255, 255, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.45), 0 2px 0 rgba(0, 0, 0, 0.4), 0 4px 14px rgba(0, 0, 0, 0.45); box-shadow: var(--bt-relevo); }
#r-acoes button { --bt-relevo: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 16px 18px -12px rgba(255, 255, 255, 0.1), inset 0 -3px 0 rgba(0, 0, 0, 0.45), 0 2px 0 rgba(0, 0, 0, 0.4), 0 6px 20px rgba(0, 0, 0, 0.5); box-shadow: var(--bt-relevo); }
.jogar { --bt-relevo: inset 0 1px 0 rgba(255, 255, 255, 0.25), inset 0 16px 18px -12px rgba(255, 255, 255, 0.14), inset 0 -4px 0 rgba(0, 0, 0, 0.32), 0 2px 0 rgba(0, 0, 0, 0.4), 0 0 22px rgba(229, 56, 59, 0.5); box-shadow: var(--bt-relevo); }
/* sem relevo: o que é escondido de propósito, itens de menu e a aba escolhida (fica "apertada") */
.j-segredo, .j-segredo:active, .rd-menu button { box-shadow: none; }
.abas button.on { box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.25); }
button:disabled { box-shadow: none; }
/* afunda ao tocar */
button:not(:disabled):not(.j-segredo):active, a.e-link:active {
  translate: 0 2px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), inset 0 -1px 0 rgba(0, 0, 0, 0.3);
}

/* ---------- 2, 3 e 4. o brilho que respira ---------- */
.principal { --bt-cor: 255, 211, 107; }
.jogar { --bt-cor: 229, 56, 59; }
.c-ic.pode, #j-mapa-lado button.pode, #j-mapa-prof.pode, #j-mapa-missoes.pode { --bt-cor: 255, 211, 107; }
@keyframes bt-respira {
  0%, 100% { box-shadow: var(--bt-relevo), 0 0 0 0 rgba(var(--bt-cor), 0); }
  50% { box-shadow: var(--bt-relevo), 0 0 18px 4px rgba(var(--bt-cor), 0.55); }
}
/* principal e DEFENDER: até a pessoa usar uma vez neste aparelho */
.principal:not(.bt-usado):not(:disabled), .jogar:not(.bt-usado) { animation: bt-respira 3s ease-in-out infinite; }
/* novidade: sempre que tiver (no lugar do pisca rápido de antes) */
.c-ic.pode, #j-mapa-lado button.pode, #j-mapa-prof.pode, #j-mapa-missoes.pode { animation: bt-respira 3s ease-in-out infinite; }
/* a faixa de luz do DEFENDER */
.jogar { position: relative; overflow: hidden; isolation: isolate; }
.jogar::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; left: 0; width: 35%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0));
  transform: translateX(-130%) skewX(-20deg); animation: bt-faixa 5s ease-in-out 1.2s infinite;
}
@keyframes bt-faixa { 0%, 72% { transform: translateX(-130%) skewX(-20deg); } 100% { transform: translateX(320%) skewX(-20deg); } }

/* ---------- 5. voltar: um desenho só ---------- */
#c-voltar, #r-voltar, #j-mapa-topo #j-mapa-voltar, .nv-voltar, .mi-topo .ar-voltar, .ar-topo .ar-voltar, .ar-voltar, .v-voltar {
  min-height: 40px; padding: 8px 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.3);
  background: linear-gradient(#26304a, #182035); color: var(--texto); font: 900 15px var(--fonte); white-space: nowrap; cursor: pointer;
}
#j-mapa-topo #j-mapa-voltar { padding: 8px 12px; font-size: 14px; }

/* ---------- 6. aviso: texto com faixa do lado, sem cara de botão ---------- */
.aviso { border: 0; border-left: 3px solid rgba(158, 197, 255, 0.7); border-radius: 4px 10px 10px 4px; background: rgba(158, 197, 255, 0.07); }
/* o resumo da horda (vitória, derrota, subiu de nível, dica do Bento): a mesma faixa, na cor de cada um */
.j-resumo { border-style: solid; border-width: 0 0 0 3px; border-radius: 4px 12px 12px 4px; }

/* ---------- 7. a seta › nas linhas que abrem alguma coisa ---------- */
#sugestoes li:not(.vazio)::after, .e-cidades button::after { content: "›"; flex: none; color: var(--apagado); font-weight: 900; font-size: 18px; line-height: 1; align-self: center; }
.rank li { grid-template-columns: 30px 1fr auto 10px; }
.rank li::after { content: "›"; grid-row: 1; grid-column: 4; color: var(--apagado); font-weight: 900; font-size: 18px; line-height: 1; }

/* ---------- 8. PC: clareia e sobe com o mouse em cima ---------- */
@media (hover: hover) and (pointer: fine) {
  button:not(:disabled):not(.j-segredo):hover, a.e-link:hover { filter: brightness(1.13); translate: 0 -1px; }
  button:not(:disabled):not(.j-segredo):active, a.e-link:active { translate: 0 2px; }
}

/* quem pediu para reduzir o movimento: brilho parado, sem faixa */
@media (prefers-reduced-motion: reduce) {
  .principal, .jogar, .c-ic.pode, #j-mapa-lado button.pode, #j-mapa-prof.pode, #j-mapa-missoes.pode { animation: none !important; }
  .jogar::after { display: none; }
}