body, html {
  margin: 0;
  padding: 0;
  background: #000;
  font-family: Arial, sans-serif;
  touch-action: none; /* Ngăn cuộn khi chạm */
}

  
  #wpgame {
      width: 100%;
      width: 700px;
      height: 80vh;
      margin: 0 auto;
      position: relative;
      background: #000;
      overflow: hidden;
    }

    canvas {
      display: block;
    }

	#startBtn {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		font-size: 20px;
		padding: 10px 20px;
		background: #44aaee;
		border: none;
		border-radius: 8px;
		font-weight: bold;
		color: white;
		cursor: pointer;
		z-index: 10;
		box-shadow: 0 0 10px #44aaff;
	}

.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.6);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 100;
}
.modal button {
		margin-top: 15px;
		font-size: 22px;
		padding: 10px 20px;
		border: none;
		border-radius: 10px;
		background: #44aaee;
		color: white;
		cursor: pointer;
		box-shadow: 0 0 8px #44aaff;
    }
.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 12px;
  text-align: center;
  max-width:80vw;
  width: 400px;
}
.title {
    color:#ffffff;
}
/* Màu theo loại modal */
.modal-success .modal-content {
  background-color: #d4edda;
  color: #155724;
}

.modal-error .modal-content {
  background-color: #f8d7da;
  color: #721c24;
}

.modal-warning .modal-content {
  background-color: #fff3cd;
  color: #856404;
}

	#scoreBoard {
		position: absolute;
		top: 10px;
		right: 10px;
		color: white;
		font-weight: bold;
		font-size: 22px;
		z-index: 100;
		text-align: center;
		display: flex;
		gap: 6px;
	}
.bird {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  z-index: 5;
  pointer-events: none;
  transition: opacity 0.3s ease;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url(img/water.png?v=110620251547);
  opacity: 1;
}

/* Các trạng thái màu */
.bird.water-point-2  { background-image: url(img/water-0.png?v=110620251547); }
.bird.water-point-5  { background-image: url(img/water-1.png?v=110620251547); }
.bird.water-point-10 { background-image: url(img/water-2.png?v=110620251547); }
.bird.water-point-15 { background-image: url(img/water-3.png?v=110620251547); }
.bird.water-point-19 { background-image: url(img/water-4.png?v=110620251547); }
.bird.water-point-23 { background-image: url(img/water-4.png?v=110620251547); }