/* Ortak oyun stili — tüm oyunlar bunu kullanır */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0; height: 100%; overflow: hidden;
  font-family: "Baloo 2", system-ui, -apple-system, sans-serif;
  background: #0f1226; color: #f1f3ff;
  user-select: none; touch-action: manipulation;
}
.game { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 10px; }
.hud { display: flex; gap: 18px; font-weight: 700; font-size: 18px; }
/* Oyun ekranı büyük açılır, en-boy oranı korunur (eziklik yok).
   Geniş ekranda yüksekliğe göre, dar/dikey ekranda genişliğe göre ölçeklenir. */
canvas { background: #11142e; border-radius: 14px; height: 68vh; width: auto; touch-action: none; }
@media (max-aspect-ratio: 1/1) {
  canvas { width: 94vw; height: auto; }
}
.big-btn {
  background: linear-gradient(135deg,#ffcc00,#ff5fa2); color:#1a1030; border:none;
  border-radius: 999px; padding: 12px 26px; font-weight: 800; font-size: 18px; cursor: pointer;
  font-family: inherit;
}
.overlay {
  position: fixed; inset: 0; display: none; align-items: center; justify-content: center;
  flex-direction: column; gap: 14px; background: rgba(15,18,38,0.85); text-align: center; padding: 20px;
}
.overlay.show { display: flex; }
.overlay h2 { margin: 0; font-size: 28px; }
.pad { display: grid; grid-template-columns: repeat(3, 56px); grid-template-rows: repeat(3,56px); gap: 6px; }
.pad button {
  background:#262a52; border:none; color:#fff; font-size: 24px; border-radius: 12px; cursor:pointer;
}