/* GoBomb — Duelo contra o slime (v1.0)
   Todos os estilos ficam dentro de .gbd, então não interferem no resto do seu site.
   Para mudar cores, troque as variáveis abaixo. */
.gbd{
  --gbd-madeira:#3A2213;
  --gbd-madeira-escura:#1F120A;
  --gbd-pergaminho:#FBEFD5;
  --gbd-ouro:#FFC21A;
  --gbd-brasa:#FF7A00;
  --gbd-azul:#2F8FE8;
  --gbd-texto-claro:#D9BF95;
  --gbd-display:"Lilita One", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --gbd-texto:"Atkinson Hyperlegible", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-family:var(--gbd-texto);
}
.gbd *{box-sizing:border-box}
.gbd-campo{position:relative;border-radius:20px;border:4px solid var(--gbd-madeira);background:#9fd8ff 100% 0/auto 215% no-repeat;box-shadow:0 7px 0 var(--gbd-madeira);overflow:hidden;aspect-ratio:16/10;touch-action:none;cursor:pointer}
.gbd-campo:focus-visible{outline:3px solid var(--gbd-azul);outline-offset:3px}
.gbd-campo canvas{width:100%;height:100%;display:block}
.gbd-hud{position:absolute;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;align-items:flex-start;gap:8px;pointer-events:none;font:400 1.05rem/1.2 var(--gbd-display);color:var(--gbd-madeira)}
.gbd-placa{background:var(--gbd-pergaminho);border:3px solid var(--gbd-madeira);border-radius:12px;padding:6px 12px;box-shadow:0 3px 0 rgba(58,34,19,.5)}
.gbd-vento{display:flex;align-items:center;gap:8px}
.gbd-vento svg{width:34px;height:14px;color:var(--gbd-azul);transition:transform .3s}
.gbd-mira{text-align:right}
.gbd-forca{position:absolute;left:12px;right:12px;bottom:10px;height:18px;border-radius:10px;background:var(--gbd-pergaminho);border:3px solid var(--gbd-madeira);overflow:hidden;pointer-events:none}
.gbd-forca i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--gbd-ouro) 0 16px,var(--gbd-brasa) 16px 19px)}
.gbd-controles{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.gbd-ctl{font:400 1.25rem/1 var(--gbd-display);min-width:52px;height:50px;padding:0 12px;border-radius:12px;border:3px solid var(--gbd-madeira-escura);background:var(--gbd-pergaminho);color:var(--gbd-madeira);box-shadow:0 4px 0 var(--gbd-madeira-escura);cursor:pointer;touch-action:none;user-select:none;-webkit-user-select:none}
.gbd-ctl.on{transform:translateY(3px);box-shadow:0 1px 0 var(--gbd-madeira-escura)}
.gbd-ctl:focus-visible{outline:3px solid var(--gbd-azul);outline-offset:3px}
.gbd-tiro{flex:1;min-width:170px;background:linear-gradient(#FF9A2E,var(--gbd-brasa) 55%,#E65F00);color:#fff;text-shadow:0 2px 0 rgba(58,34,19,.45)}
.gbd-placar{display:flex;gap:16px;margin-top:18px;color:var(--gbd-texto-claro)}
.gbd-placar div{background:rgba(251,239,213,.08);border:2px solid rgba(251,239,213,.18);border-radius:14px;padding:10px 16px}
.gbd-placar b{display:block;font:400 1.8rem/1 var(--gbd-display);color:var(--gbd-ouro)}
/* mensagens do duelo: só para leitores de tela (não aparecem sobre o jogo) */
.gbd-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* navegadores sem aspect-ratio: mantém a proporção 16:10 do campo */
@supports not (aspect-ratio:16/10){.gbd-campo{height:0;padding-top:62.5%}.gbd-campo canvas{position:absolute;top:0;left:0}}
@media (max-width:520px){.gbd-hud{font-size:.9rem}.gbd-placa{padding:4px 8px}}