/* Reset & layout cơ bản */
* { box-sizing: border-box; }
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}
:root {
  --bg: #0a0f1e;      /* nền đậm */
  --fg: #e5e7eb;      /* chữ xám nhạt */
  --accent: #2dd4bf;  /* teal nhấn */
  --pad: 12px;
}
body {
  background: var(--bg);
  color: var(--fg);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.4;
  overflow: hidden; /* không scroll, full màn */
}

/* Canvas full màn hình, tối ưu cảm ứng & hiển thị pixel */
#game {
  display: block;
  width: 100vw;
  height: 100vh;
  touch-action: none;         /* chặn double-tap zoom/gesture */
  image-rendering: optimizeSpeed;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated; /* hữu ích nếu dùng sprite pixel-art */
}

/* HUD overlay trên canvas */
#hud {
  position: fixed;
  inset: 0;
  padding: calc(env(safe-area-inset-top, 0) + var(--pad)) var(--pad) var(--pad) var(--pad);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  pointer-events: none; /* để click/tap đi vào canvas */
}

#hud .hud-left,
#hud .hud-right {
  min-width: 0;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Giảm chuyển động nếu user chọn Reduce Motion */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}