/* Base: tokens, tipografia e a tecla F2 (componente usado em várias etapas) */
:root {
  --verde: #D5FF27;
  --verde-lado: #9DBD12;
  --preto: #000;
  --grafite: #1E1E1E;
  --branco: #fff;
  --cinza: #A2A9C1;
  --cinza-ps: #535353; /* área de trabalho do Photoshop */
  --gutter: clamp(16px, 4vw, 64px);
}
* { box-sizing: border-box; margin: 0; }
html, body { background: var(--preto); color: var(--branco); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* nada corre para o lado no celular: clip não cria rolagem horizontal (hidden no body sozinho o iOS ignora) */
html, body { overflow-x: hidden; overflow-x: clip; overscroll-behavior-x: none; }
body { font-family: "Montserrat", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }

/* a tecla F2: botão de verdade, com curso (o tamanho vem do font-size do pai) */
.tecla {
  pointer-events: auto; cursor: pointer; font: inherit; padding: 0;
  position: relative; display: inline-grid; place-items: center;
  width: 1.02em; height: .92em;
  border: 0; border-radius: .09em;
  background: var(--verde); color: #000;
  box-shadow: 0 .1em 0 var(--verde-lado), 0 .16em .3em rgba(213,255,39,.18);
  transform: translateY(-.05em);
  transition: transform .09s ease-out, box-shadow .09s ease-out;
}
.tecla svg { width: 64%; height: auto; }
.tecla:hover { box-shadow: 0 .1em 0 var(--verde-lado), 0 .2em .55em rgba(213,255,39,.35); }
.tecla:active, .tecla.apertada { transform: translateY(.04em); box-shadow: 0 .01em 0 var(--verde-lado), 0 .05em .15em rgba(213,255,39,.25); }
.tecla:focus-visible { outline: 2px solid var(--branco); outline-offset: 6px; }

/* entrada suave compartilhada pelas etapas */
@keyframes entra { from { opacity: 0; transform: translateY(12px); } }