* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Arial, sans-serif;
  background-color: #333;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

.game-container {
  position: relative;
  width: 100%;
  max-width: 100vw;
  margin-bottom: 20px;
}

canvas {
  background-color: #87CEEB;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 800 / 480;
  max-height: 80vh;
  border: 3px solid #1e90ff; /* giữ viền xanh */
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
}

.controls {
  display: flex;
  flex-direction: column;
  margin-top: 10px;
}

.info {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  font-size: 18px;
  font-weight: bold;
}

.mobile-controls {
  display: flex; /* hiển thị cả trên desktop */
  justify-content: space-between;
  width: 100%;
  margin-top: 10px;
}

.direction-buttons,
.action-buttons {
  display: flex;
  gap: 10px;
}

.mobile-controls button {
  padding: 12px;
  font-size: 18px;
  background-color: rgba(255,255,255,0.25);
  border: 2px solid #fff;
  border-radius: 8px;
  color: #fff;
  cursor: pointer;
}

.mobile-controls button:active {
  background-color: rgba(255,255,255,0.45);
}

#special-attack {
  background-color: rgba(255,215,0,0.45); /* Màu vàng cho tuyệt chiêu */
}

/* Nút bắn (giữ lại class để làm mờ khi hết đạn) */
.shoot-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  min-height: 48px;
  gap: 4px;
  border: 2px solid #1e90ff; /* xanh khi còn đạn */
}
.shoot-btn .icon {
  font-size: 22px;
  line-height: 1;
}
/* Các class trạng thái cho nút bắn */
.shoot-btn.ammo-ok {
  border-color: #1e90ff;
  box-shadow: inset 0 0 14px rgba(30,144,255,0.28);
}
.shoot-btn.ammo-empty {
  border-color: #888;
  box-shadow: none;
  filter: grayscale(0.2);
  /* độ mờ icon + nút được JS set thêm bằng style.opacity */
}

/* Nút nạp đạn */
#reload {
  background-color: rgba(30,144,255,0.25);
  border: 2px solid #1e90ff;
  color: #e8f2ff;
}
#reload:hover:not(:disabled) {
  background-color: rgba(30,144,255,0.35);
}
#reload:disabled {
  opacity: 0.6;
  border-color: #8892a6;
  background-color: rgba(255,255,255,0.15);
  color: #cbd5e1;
  cursor: not-allowed;
}

/* Hướng dẫn */
.instructions {
  background-color: rgba(0,0,0,0.7);
  padding: 15px;
  border-radius: 5px;
  max-width: 800px;
  text-align: center;
}
.instructions h2 {
  margin-bottom: 10px;
  color: #FFD700;
}

/* Bộ đổi vũ khí bên phải */
.weapon-switch {
  position: fixed;
  right: clamp(6px, 2vmin, 18px);
  top: clamp(6px, 2vmin, 18px);
  transform: none;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 3vmin, 32px);
  z-index: 2147483647;
  pointer-events: auto;
}

.weapon-btn {
  width: clamp(56px, 10vmin, 96px);
  height: clamp(56px, 10vmin, 96px);
  border-radius: clamp(10px, 2vmin, 16px);
  border: clamp(2px, 0.6vmin, 4px) solid #ffffff;
  background: rgba(0,0,0,0.55);
  color: #ffffff;
  font-size: clamp(28px, 5vmin, 48px);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  backdrop-filter: blur(2px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.35);
}

.weapon-btn:hover {
  background: rgba(0,0,0,0.5);
}

.weapon-btn.active {
  background: #1e90ff;
  border-color: #cfe9ff;
}

/* Khi hết đạn: làm mờ nút chọn súng lớn */
.weapon-btn.empty {
  opacity: 0.5;
  filter: grayscale(0.3);
  border-color: #8892a6;
}

/* Dải 6 viên đạn đặt trên đầu khu vực đổi vũ khí */
.weapon-switch .ammo-strip {
  display: flex;
  gap: clamp(4px, 1.2vmin, 10px);
  align-items: center;
  justify-content: center;
  padding: clamp(4px, 1.2vmin, 10px) clamp(6px, 2vmin, 14px);
  background: rgba(0,0,0,0.35);
  border: clamp(1px, 0.4vmin, 3px) solid #cfe9ff;
  border-radius: clamp(8px, 2vmin, 14px);
  box-shadow: 0 6px 14px rgba(0,0,0,0.25);
}

.weapon-switch .ammo-strip i {
  display: inline-block;
  width: clamp(8px, 1.4vmin, 14px);
  height: clamp(12px, 2.2vmin, 22px);
  background: #9ad2ff;
  border: clamp(1px, 0.3vmin, 2px) solid #ffffff;
  border-radius: clamp(2px, 0.6vmin, 3px);
  box-shadow: 0 0 clamp(4px, 1.4vmin, 8px) rgba(30,144,255,0.45);
}

.weapon-switch .ammo-strip i.off {
  opacity: 0.22;
  filter: grayscale(0.85);
  box-shadow: none;
  background: rgba(154,210,255,0.4);
}

/* Mobile ưu tiên to, dễ bấm */
@media (max-width: 768px) {
  .weapon-switch {
    position: fixed !important;
    right: clamp(6px, 2vmin, 18px) !important;
    top: clamp(6px, 2vmin, 18px) !important;
    transform: none !important;
    gap: clamp(12px, 3vmin, 32px) !important;
    z-index: 2147483647 !important;
  }
  .weapon-btn {
    width: clamp(56px, 11vmin, 104px) !important;
    height: clamp(56px, 11vmin, 104px) !important;
    font-size: clamp(28px, 5.5vmin, 52px) !important;
    padding: 0 !important;
    border-width: clamp(2px, 0.7vmin, 5px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
  }
  .mobile-controls {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
  .direction-buttons,
  .action-buttons {
    display: flex;
    gap: 10px;
  }
  button {
    padding: 15px;
    font-size: 18px;
    background-color: rgba(255,255,255,0.3);
    border: 2px solid #fff;
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
  }
  button:active {
    background-color: rgba(255,255,255,0.5);
  }
  #special-attack {
    background-color: rgba(255,215,0,0.5);
  }
}

/* Tắt hệ thống điều khiển cảm ứng/nút ảo để loại bỏ "vuốt" và overlay chiếm chỗ */
.mobile-controls {
  display: none !important;
}

/* Ngăn các cử chỉ vuốt/zoom mặc định của trình duyệt tác động vào game */
html, body {
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

canvas {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}