:root { font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial; }
body { margin: 0; background: #0b0f19; color: #e8eefc; }
.container { max-width: 860px; margin: 0 auto; padding: 18px; }
.top { margin-bottom: 14px; }
.card { background: #121a2b; border: 1px solid #1f2b46; border-radius: 14px; padding: 14px; }
.muted { color: #a9b7d6; font-size: 14px; }
.row { display: grid; grid-template-columns: 80px 1fr 100px 1fr 120px; gap: 10px; align-items: center; }
.row2 { display: flex; gap: 10px; margin-top: 12px; }
.hud { display: flex; gap: 16px; margin: 12px 0; padding: 10px; background: #0f1524; border-radius: 10px; border: 1px solid #1f2b46; }
.pad { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pad-btn { height: 90px; border-radius: 14px; border: 0; font-size: 22px; font-weight: 800; cursor: pointer; opacity: 0.9; }
.pad-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.red { background: #ff3b3b; }
.green { background: #2ee59d; }
.blue { background: #3b82ff; }
.yellow { background: #ffd33b; color: #1c1c1c; }
.primary { background: #7c5cff; border: 0; color: #fff; height: 38px; border-radius: 10px; cursor: pointer; font-weight: 700; }
input, select, button { border-radius: 10px; border: 1px solid #1f2b46; background: #0f1524; color: #e8eefc; padding: 8px 10px; }
button { cursor: pointer; }
.cfg { margin-top: 12px; }
.log { margin-top: 12px; background: #0b0f19; border: 1px solid #1f2b46; border-radius: 10px; padding: 10px; min-height: 80px; overflow: auto; }
/* Evita zoom/scroll acidental em botões no iOS */
html, body {
  height: 100%;
  overscroll-behavior: none;
}

body {
  touch-action: manipulation;              /* reduz double-tap zoom */
  -webkit-text-size-adjust: 100%;
  -webkit-user-select: none;               /* evita selecionar texto */
  user-select: none;
}

/* Nos botões do jogo (principalmente) */
.pad-btn, button, select {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* iOS: remove "callout" de toque longo */
.pad-btn {
  -webkit-touch-callout: none;
}

.overlay{
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid #1f2b46;
  background: rgba(255,255,255,0.06);
  color: #e8eefc;
  font-weight: 800;
  text-align: center;
}
.hidden{ display:none; }