/* ══════════════════════════════════════════════════════════════════
   OS CINCO ATALHOS NO CANTO OPOSTO (só no celular).

   O JavaScript escreve a posição de cada um (ver index.js — eles moram
   em duas árvores diferentes e nenhum é movido de lugar). Aqui fica só
   o que é aparência, e o mínimo possível dela: são os botões do jogo,
   não botões meus.
   ══════════════════════════════════════════════════════════════════ */

/* Uma sombra de leve para os cinco não sumirem sobre o cenário claro da
   batalha — eles saíram de cima de um painel e foram parar sobre a arte. */
[data-atalho-canto='1'] {
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 0.65));
}

/*
 * 🚨 A barra de atalhos volta a ser UMA coluna à direita.
 *
 * A regra de duas colunas que subiu antes (em `correcoes/styles.css`) resolvia
 * o corte espalhando quem sobrava — mas o pedido virou outro: cinco atalhos
 * nomeados vão para o canto esquerdo. Com eles fora, sobram quatro na barra
 * (Missões, Mercado, Correio, Convite), que cabem folgados numa coluna só.
 * Duas regras disputando a mesma barra é como se ganha um layout que ninguém
 * consegue prever.
 */
@media (max-width: 720px) {
  .scene-atalhos {
    left: auto;
    right: 10px;
    width: auto;
    max-height: none;
    flex-wrap: nowrap;
    align-content: normal;
  }
}

/*
 * ── O botão de Opções na mesma régua da coluna da direita ─────────
 *
 * *"Arrume o botão de Configuração para ficar na mesma margem, tamanho e
 * espaçamento dos outros botões na direita."*
 *
 * Medido: a engrenagem é `absolute` no palco, `top:10px right:10px`, e tinha
 * **38×38** — contra os **29×29** dos atalhos, que ficam a `right:10px` também.
 * A margem já batia; o que destoava era o tamanho, e com 38 de altura ela ainda
 * INVADIA 10px do primeiro atalho (140..178 contra 168..197).
 *
 * Aqui ela vira 29×29 e a barra desce para `top: 44px` = 10 (a margem de cima)
 * + 29 (a engrenagem) + 5 (o mesmo `gap` que a barra usa entre os seus). Assim a
 * engrenagem é só mais um botão da coluna, com o mesmo respiro de todos.
 *
 * 🚨 O ícone de dentro encolhe junto (22 → 17px, a mesma proporção), senão o
 * desenho vaza do círculo menor.
 */
@media (max-width: 720px) {
  .scene__gear {
    width: 29px;
    height: 29px;
  }

  .scene__gear img,
  .scene__gear svg {
    width: 17px;
    height: 17px;
  }

  .scene-atalhos {
    top: 44px;
  }
}

/*
 * ── O baú de nível encolhe para o tamanho da coluna ───────────────
 *
 * 🚨 Ele é um `.orb` da doca (48px na medida real, contra 29 dos atalhos). Na
 * coluna, esse tamanho fazia duas coisas erradas: quebrava o "mesmo tamanho e
 * espaçamento" que ele pediu, e — medido a 390 e 360px — jogava o botão para
 * FORA do palco, que tem `overflow: hidden`: ele terminava em 346 num palco que
 * acaba em 340 e simplesmente sumia (e deixava de responder ao toque).
 *
 * Só vale enquanto ele está na coluna (`[data-atalho-canto]`): no computador,
 * onde volta para a doca, o orbe continua do tamanho da doca.
 */
@media (max-width: 720px) {
  .orb--seed-nivel[data-atalho-canto='1'] {
    width: 29px;
    height: 29px;
    min-width: 0;
    min-height: 0;
  }

  .orb--seed-nivel[data-atalho-canto='1'] .bn-icone {
    width: 17px;
    height: 17px;
  }

  /* O contador continua legível, mas proporcional ao botão menor. */
  .orb--seed-nivel[data-atalho-canto='1'] .orb__count {
    font-size: 9px;
    min-width: 13px;
    height: 13px;
    line-height: 13px;
  }
}