/*
 * MENU DE ATALHOS — a coluna ao lado do palco.
 *
 * 🚨 ESTA FOLHA É PROPOSITALMENTE PEQUENA, e isso custou uma tentativa.
 *
 * A primeira versão redesenhou a coluna inteira: moldura própria no `::before`,
 * rótulo fixo embaixo de cada botão, tamanho novo. Ficou PIOR — os ícones
 * saíram escuros e os rótulos, ilegíveis. O motivo é que `hud/styles.css` já
 * estiliza estes botões com cuidado (círculo azul-marinho, anel de vidro e um
 * duplo `drop-shadow` que segura a arte branca sobre o cenário claro do Reino
 * de Pedra), e o desenho novo brigou com aquele em vez de somar.
 *
 * O que a coluna precisava não era moldura — era ÍCONE QUE SE ENTENDA. Isso
 * quem resolve é o `menu.js`, trocando a arte pela do acervo por rótulo. O
 * nome de cada atalho já existe: o jogo mostra num balão ao passar o mouse
 * (`.scene-atalhos__rotulo`).
 *
 * Aqui fica só o acerto de tamanho da arte nova, que vem em 80×80 e precisa
 * caber no círculo de 44.
 */

html .scene-atalhos .rpgm__item .rpgm__arte {
  width: 58% !important;
  height: 58% !important;
  object-fit: contain;
}

/* Alvo de toque com piso: escalado puro, o círculo de 44px vira 18px no
   celular deitado — menor que o dedo. O resto do desenho continua sendo o da
   HUD. */
@media (max-height: 520px) {
  html .scene-atalhos .rpgm__item {
    width: max(34px, calc(44px * var(--rpg-un, 1))) !important;
    height: max(34px, calc(44px * var(--rpg-un, 1))) !important;
  }
}