/* ==== GLOBAL RESET ==== */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ==== BODY ==== */
body {
  text-align: center;
  background-color: #011f3f;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-family: "Press Start 2P", cursive;
  overflow-x: hidden;
  padding: 1rem;
}

/* ==== TITLE ==== */
#level-title {
  color: #fef2bf;
  font-size: clamp(1.5rem, 3vw, 3rem);
  margin-bottom: 1.5rem;
  text-shadow: 2px 2px 8px #000;
}

#level-title a {
  color: #fef2bf;
  text-decoration: none;
  font-size: clamp(0.8rem, 2vw, 1rem);
  transition: color 0.3s ease;
}

#level-title a:hover {
  color: #ffd369;
  text-decoration: underline;
}

/* ==== CONTAINER ==== */
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  width: min(90%, 500px);
}

/* ==== ROW ==== */
.row {
  display: flex;
  justify-content: center;
  gap: 1rem;
}

/* ==== GAME BUTTONS ==== */
.btn {
  width: 180px;
  height: 180px;
  border: 8px solid #000;
  border-radius: 20%;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.2s ease;
}

.btn:active {
  transform: scale(0.96);
}

/* ==== COLORS ==== */
.red {
  background-color: #ff4b4b;
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.4);
}
.green {
  background-color: #00c853;
  box-shadow: 0 0 20px rgba(0, 255, 0, 0.4);
}
.blue {
  background-color: #2979ff;
  box-shadow: 0 0 20px rgba(0, 100, 255, 0.4);
}
.yellow {
  background-color: #ffeb3b;
  box-shadow: 0 0 20px rgba(255, 255, 0, 0.4);
}

/* ==== INTERACTION STATES ==== */
.pressed {
  box-shadow: 0 0 40px #fff;
  filter: brightness(1.4);
  transform: scale(0.95);
}

.game-over {
  background-color: red;
  opacity: 0.8;
  animation: flash 0.2s alternate 3;
}

/* ==== ANIMATIONS ==== */
@keyframes flash {
  from {
    background-color: #011f3f;
  }
  to {
    background-color: red;
  }
}

/* ==== RESPONSIVE ==== */
@media (max-width: 768px) {
  .btn {
    width: 140px;
    height: 140px;
    border-width: 6px;
  }

  .container {
    gap: 0.8rem;
  }
}

@media (max-width: 480px) {
  #level-title {
    font-size: 1.2rem;
    margin-bottom: 1rem;
  }

  .btn {
    width: 120px;
    height: 120px;
    border-width: 5px;
  }

  .row {
    gap: 0.6rem;
  }
}