/*
 * As setinhas de recolher as duas barras, e o esconder das barras.
 * Ver `index.js` para o porquê de cada decisão.
 *
 * 🚨 Prefixo `recolher`: varri os `styles.css` de /var/www/potatomaster/ e o
 * bundle antes de escolher — ninguém usa esse nome.
 */

.recolher {
  /* Ancorada na `section.panel.scene`, que é `position: relative` no bundle
     (medido, não suposto). O `left`/`top` quem escreve é o JS. */
  position: absolute;
  z-index: 4; /* a coluna de atalhos é z-index 3; a setinha fica acima dela */
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--az-btn-aro, #407a9e);
  border-radius: 999px;
  background: linear-gradient(180deg, var(--az-btn-a, #016ac9), var(--az-btn-b, #003b73));
  box-shadow:
    inset 0 1px 0 var(--az-btn-brilho, #2097e0),
    0 1px 2px #01162b;
  color: #e2effa;
  cursor: pointer;
  /* 🚨 Sem `opacity` de repouso: a setinha É o único caminho de volta quando a
     barra está recolhida. Semitransparente, ninguém a acha no celular. */
  transition:
    filter 0.12s ease,
    translate 0.12s ease,
    rotate 0.18s ease;
}

.recolher:hover {
  filter: brightness(1.25);
}

.recolher:active {
  translate: 0 1px;
}

/* Alvo de dedo de 34px sem engordar o desenho: o botão continua com 22px de
   pintura e ganha a folga por fora, onde não cobre nada. */
.recolher::after {
  position: absolute;
  content: '';
  inset: -6px;
  border-radius: inherit;
}

.recolher svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
}

/*
 * A seta aponta para onde o clique manda a barra.
 *
 * O desenho no arquivo é um "v" (aponta para baixo). Cada estado gira o botão
 * inteiro — girar o SVG e não o botão deixaria a sombra do aro torta.
 */
.recolher--vertical {
  rotate: 0deg; /* ▼ esconder a barra de habilidades para baixo */
}

body[data-recolhe-skill='1'] .recolher--vertical {
  rotate: 180deg; /* ▲ trazer de volta */
}

.recolher--horizontal {
  rotate: -90deg; /* ▶ empurrar a coluna de opções para a direita */
}

body[data-recolhe-atalhos='1'] .recolher--horizontal {
  rotate: 90deg; /* ◀ trazer de volta */
}

/*
 * ── O recolher em si ──────────────────────────────────────────────
 *
 * 🚨 `opacity` + `visibility`, nunca `display: none` nem `transform` sozinho:
 * dois orbes do baú são filhos da barra de skill desenhados no canto OPOSTO da
 * tela pelo `atalhos-canto` (só no celular). Deslizar a barra deixaria esses
 * dois à mostra pela metade; apagar por opacidade leva todo descendente junto.
 *
 * `visibility` entra com atraso igual à transição para o desenho poder sumir
 * suavemente antes de a barra sair do alcance do dedo — e `pointer-events`
 * corta o clique no primeiro quadro, para ninguém acertar botão invisível.
 */
.panel.skillbar,
nav.scene-atalhos {
  transition:
    opacity 0.18s ease,
    translate 0.18s ease,
    visibility 0s linear 0s;
}

body[data-recolhe-skill='1'] .panel.skillbar {
  visibility: hidden;
  opacity: 0;
  translate: 0 14px;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    translate 0.18s ease,
    visibility 0s linear 0.18s;
}

body[data-recolhe-atalhos='1'] nav.scene-atalhos {
  visibility: hidden;
  opacity: 0;
  translate: 14px 0;
  pointer-events: none;
  transition:
    opacity 0.18s ease,
    translate 0.18s ease,
    visibility 0s linear 0.18s;
}

/* Quem pediu para o sistema não animar não vê animação nenhuma. */
@media (prefers-reduced-motion: reduce) {
  .recolher,
  .panel.skillbar,
  nav.scene-atalhos {
    transition-duration: 0s;
  }
}