/* Dois formatos: o bloco branco (JOGAR da arte) e o item de menu só texto. */

.botao {
  display: inline-block;
  min-height: 44px;
  padding: var(--e3) var(--e5);
  background: var(--branco);
  color: var(--amarelo);
  font-size: clamp(1.05rem, 1.9vw, 1.65rem);
  text-transform: uppercase;
  border: var(--borda) solid var(--preto);
  box-shadow: var(--sombra-dura);
  text-shadow:
    2px 0 0 var(--roxo), -2px 0 0 var(--roxo),
    0 2px 0 var(--roxo), 0 -2px 0 var(--roxo),
    2px 2px 0 var(--roxo), -2px -2px 0 var(--roxo),
    2px -2px 0 var(--roxo), -2px 2px 0 var(--roxo);
  transition: transform 0.08s steps(2), box-shadow 0.08s steps(2);
  cursor: pointer;
}

.botao:hover:not(:disabled),
.botao:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 9px 0 rgba(0, 0, 0, 0.35);
  outline: none;
}

.botao:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.35);
}

.botao:disabled {
  filter: grayscale(0.8);
  opacity: 0.55;
  cursor: not-allowed;
}

.botao--pequeno {
  min-height: 38px;
  padding: var(--e2) var(--e3);
  font-size: clamp(0.75rem, 1.2vw, 1.08rem);
  border-width: 3px;
}

.botao--roxo {
  background: var(--roxo);
  color: var(--amarelo);
}

.botao--verde {
  background: var(--grupo-barata);
  color: var(--branco);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
}

.botao--perigo {
  background: var(--rosa);
  color: var(--branco);
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.45);
}

/* --- item da lista do menu (arte do designer) -------------------- */

/* Todos os PNGs de menu saem com a mesma altura de letra e a mesma altura
   de tela (ver normalizar_item_de_menu), então uma altura só serve para
   todos e as palavras ficam do mesmo tamanho. */
.opcao {
  display: block;
  line-height: 0;
}

.opcao img {
  height: clamp(34px, 6.6vh, 70px);
  width: auto;
  transition: transform 0.1s steps(3), filter 0.1s steps(3);
}

.opcao[data-acao="sair"] img {
  height: clamp(32px, 5.4vh, 58px);
}

.opcao:hover img,
.opcao:focus-visible img {
  transform: scale(1.08);
  filter: drop-shadow(0 0 14px var(--verde-neon));
}

.opcao:focus-visible {
  outline: none;
}

.opcao:active img {
  transform: scale(0.97);
}

/* Itens que ainda não fazem nada: presentes, mas visivelmente adormecidos. */
.opcao--dormindo img {
  filter: saturate(0.45) brightness(0.85);
}

.opcao--dormindo:hover img {
  filter: saturate(0.45) brightness(0.85) drop-shadow(0 0 10px var(--verde-neon));
}

/* ENTRAR COM CÓDIGO não tem arte: desenhado no mesmo estilo, menor. */
.opcao--texto {
  font-size: clamp(0.75rem, 1.4vw, 1.23rem);
  text-transform: uppercase;
  color: var(--amarelo);
  line-height: 1.6;
  text-shadow:
    2px 0 0 var(--roxo), -2px 0 0 var(--roxo),
    0 2px 0 var(--roxo), 0 -2px 0 var(--roxo),
    2px 2px 0 var(--roxo), -2px -2px 0 var(--roxo),
    2px -2px 0 var(--roxo), -2px 2px 0 var(--roxo),
    0 5px 0 rgba(0, 0, 0, 0.3);
  transition: transform 0.1s steps(3), filter 0.1s steps(3);
}

.opcao--texto:hover,
.opcao--texto:focus-visible {
  transform: scale(1.07);
  filter: drop-shadow(0 0 10px var(--verde-neon));
}

/* --- botão sobre a placa branca rasgada da arte ------------------ */

.placa {
  display: inline-grid;
  place-items: center;
  padding: 1.6% 5%;
  background: url("/assets/ui/placa.png") center / 100% 100% no-repeat;
  line-height: 0;
  transition: transform 0.1s steps(3);
}

.placa img {
  height: clamp(26px, 4.4vh, 44px);
  width: auto;
}

.placa:hover,
.placa:focus-visible {
  transform: scale(1.06);
  outline: none;
}