:root { --fundo: #0d1a14; --verde: #3f9a4a; --borda: #4a9a6a; --texto: #f3f8ef; }
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html, body { margin: 0; height: 100%; overflow: hidden; background: var(--fundo); color: var(--texto);
  font-family: "Segoe UI", Verdana, Arial, sans-serif; touch-action: none;
  -webkit-user-select: none; user-select: none; }
button { font-family: inherit; cursor: pointer; }

#tela { position: fixed; left: 0; top: 0; display: block; background: var(--fundo); touch-action: none; image-rendering: auto; }

/* link para voltar ao site: só aparece nas telas de título e de menu */
.voltar { position: fixed; left: 8px; top: 8px; z-index: 30; text-decoration: none; font-weight: 700; color: #1d6b3a;
  background: #fff; padding: 7px 14px; border-radius: 999px; font-size: 0.9rem; display: none; box-shadow: 0 2px 8px rgba(0,0,0,0.35); }
body[data-modo="menu"] .voltar { display: inline-block; }

#btnSom { position: fixed; right: 8px; top: 8px; z-index: 30; width: 38px; height: 38px; border-radius: 50%; padding: 0; font-size: 1.05rem;
  border: 2px solid rgba(255,255,255,0.55); background: rgba(10,26,18,0.78); color: #fff; }

#giraAviso { display: none; position: fixed; left: 50%; bottom: 8px; transform: translateX(-50%); z-index: 40; background: rgba(250,204,21,0.95);
  color: #422006; font-weight: 700; padding: 6px 12px; border-radius: 999px; font-size: 0.85rem; }
@media (orientation: portrait) { body.tem-toque #giraAviso { display: block; } }

/* controles de toque: direcional à esquerda, A/B/menu à direita */
#toque { display: none; position: fixed; left: 0; top: 0; right: 0; bottom: 0; z-index: 20; pointer-events: none; }
body.tem-toque #toque { display: block; }
#toque button { position: absolute; pointer-events: auto; touch-action: none; padding: 0; border-radius: 50%; border: 3px solid rgba(255,255,255,0.7);
  background: rgba(20,50,36,0.55); color: #fff; font-weight: 800; font-size: 1.1rem; opacity: 0.8; -webkit-user-select: none; user-select: none; }
#toque button.ativo { opacity: 1; background: rgba(60,150,100,0.8); transform: scale(0.94); }
#dpad { position: absolute; left: 14px; bottom: 14px; width: 150px; height: 150px; }
#dpad button { width: 52px; height: 52px; }
#bCima { left: 49px; top: 0; } #bBaixo { left: 49px; bottom: 0; } #bEsq { left: 0; top: 49px; } #bDir { right: 0; top: 49px; }
#acoes { position: absolute; right: 14px; bottom: 14px; width: 150px; height: 150px; }
#bA { right: 0; bottom: 34px; width: 66px; height: 66px; background: rgba(63,154,74,0.65) !important; font-size: 1.4rem !important; }
#bB { right: 78px; bottom: 6px; width: 54px; height: 54px; background: rgba(200,90,80,0.6) !important; }
#bMenu { right: 6px; bottom: 108px; width: 44px; height: 44px; font-size: 1rem !important; }

@media (max-height: 430px) {
  #dpad { left: 8px; bottom: 8px; width: 120px; height: 120px; }
  #dpad button { width: 42px; height: 42px; } #bCima { left: 39px; } #bBaixo { left: 39px; } #bEsq { top: 39px; } #bDir { top: 39px; }
  #acoes { right: 8px; bottom: 8px; width: 130px; height: 120px; }
  #bA { width: 56px; height: 56px; bottom: 26px; } #bB { width: 46px; height: 46px; right: 66px; bottom: 4px; } #bMenu { width: 38px; height: 38px; bottom: 88px; }
}