* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body {
  height: 100%;
  width: 100%;
  overflow: hidden;
  background: #0b0f14;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #e8eef6;
}

#game {
  display: block;
  width: 100vw;
  height: 100vh;
  background: #0f1720;
  touch-action: none; /* prevent default scrolling/zooming on touch */
}

/* Top score panel */
.ui.top-ui {
  position: fixed;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15,23,32,0.7);
  padding: 6px 12px;
  border-radius: 10px;
  display: flex;
  gap: 10px;
  align-items: center;
  z-index: 20;
}

button {
  padding: 6px 10px;
  border-radius: 8px;
  border: 1px solid #2b3a4a;
  background: #15202b;
  color:#e8eef6;
  cursor: pointer;
  font-size: 14px;
}
button:hover { filter: brightness(1.1); }

/* Bottom on-screen controls (D-Pad) */
.ui.dpad {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  display: grid !important;   /* always visible */
  gap: 8px;
  z-index: 15;
  user-select: none;
}

.ui.dpad .row {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.btn-dir {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  font-size: 24px;
  display: grid;
  place-items: center;
  background: rgba(21,32,43,0.9);
}

@media (max-width: 420px) {
  .btn-dir { width: 56px; height: 56px; font-size: 22px; }
  .ui.top-ui { font-size: 14px; gap: 8px; }
}

@media (min-width: 1024px) {
  .btn-dir { width: 72px; height: 72px; font-size: 26px; }
}