/* marca.css — identidade Vimezer compartilhada por todos os jogos do arcade.
   Mesmos tokens do site (vimezer.com.br) para o jogo não parecer de outra empresa. */

:root{
  /* paleta do site */
  --verde:#008225;
  --verde-escuro:#04552a;
  --verde-tinta:#0b3b1f;
  --verde-vivo:#03c800;
  --amarelo:#fcfc00;
  --tinta:#161c18;
  --muted:#5f6a63;
  --borda:#d9ded7;
  --papel:#f4f4ee;
  --branco:#fff;

  /* materiais da obra — cada peça do Fiada é um material de verdade.
     A matiz segue o Tetris clássico (I ciano, O amarelo, S verde, Z vermelho,
     J azul, L laranja) pra quem já joga ler o tabuleiro de primeira. */
  --mat-vergalhao:#7ec8d8;
  --mat-cimento:#f2c200;
  --mat-tijolo:#c25a2c;
  --mat-azulejo:#2fae4e;
  --mat-telha:#c0392b;
  --mat-bloco:#3f72af;
  --mat-madeirite:#8d6242;

  --display:'Bree Serif',Georgia,'Times New Roman',serif;
  --corpo:'Barlow','Helvetica Neue',Arial,sans-serif;
  --raio:4px;
  --transicao:.22s cubic-bezier(.2,.7,.3,1);
}

*,*::before,*::after{box-sizing:border-box}

/* o atributo hidden tem que vencer qualquer display declarado aqui */
[hidden]{display:none !important}

body{
  margin:0;
  font-family:var(--corpo);
  color:var(--tinta);
  background:var(--verde-tinta);
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

h1,h2,h3{font-family:var(--display);font-weight:400;margin:0}

/* faixa em zigue-zague amarela, a assinatura visual do site */
.zigzag{
  height:9px;
  background:var(--zigzag,none) repeat-x;
  background-size:36px 9px;
}

/* botão padrão da marca */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-size:1rem;
  padding:.7rem 1.4rem;border:0;border-radius:var(--raio);
  background:var(--verde);color:var(--branco);
  cursor:pointer;transition:background var(--transicao),transform var(--transicao);
}
.btn:hover{background:var(--verde-vivo);color:var(--verde-tinta)}
.btn:active{transform:translateY(1px)}
.btn--vazado{background:transparent;color:var(--branco);box-shadow:inset 0 0 0 2px rgba(255,255,255,.35)}
.btn--vazado:hover{background:rgba(255,255,255,.12);color:var(--branco)}

:where(a,button,canvas,[tabindex]):focus-visible{
  outline:3px solid var(--amarelo);outline-offset:2px;
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* faixa em zigue-zague amarela — a assinatura visual do site Vimezer */
:root{
  --zigzag:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 26' preserveAspectRatio='none'%3E%3Cg fill='%23fcfc00'%3E%3Cpolygon points='0,3.4 4.5,1.4 13.5,5.4 22.5,1.4 31.5,5.4 36,3.4 36,6.1 31.5,8.1 22.5,4.1 13.5,8.1 4.5,4.1 0,6.1'/%3E%3Cpolygon points='0,11.6 4.5,9.6 13.5,13.6 22.5,9.6 31.5,13.6 36,11.6 36,14.3 31.5,16.3 22.5,12.3 13.5,16.3 4.5,12.3 0,14.3'/%3E%3Cpolygon points='0,19.8 4.5,17.8 13.5,21.8 22.5,17.8 31.5,21.8 36,19.8 36,22.5 31.5,24.5 22.5,20.5 13.5,24.5 4.5,20.5 0,22.5'/%3E%3C/g%3E%3C/svg%3E");
}