/* Reset and Base Styles */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: "Press Start 2P", monospace;
}

#game {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: black;
}

#gameCanvas {
  position: absolute;
  inset: 0;
  display: block;
  z-index: 0;
}

.score-display,
.level-display,
.leaderboard,
.save-score-ui,
.start-btn,
.game-over-text,
.next-level-text,
.game-over-btn {
  position: absolute;
  z-index: 10;
}

.score-display {
  left: 10px;
  top: 10px;
}
.level-display {
  right: 10px;
  top: 10px;
}

/* Keyframe Animations */
@keyframes flash {
  0%,
  100% {
    background-color: black;
    color: yellow;
    text-shadow: 0 0 5px yellow, 0 0 10px black;
  }
  50% {
    background-color: yellow;
    color: black;
    text-shadow: 0 0 5px black, 0 0 10px yellow;
  }
}

@keyframes flash-clear {
  0%,
  100% {
    background-color: black;
    color: red;
    text-shadow: 0 0 5px red, 0 0 10px black;
  }
  50% {
    background-color: red;
    color: black;
    text-shadow: 0 0 5px black, 0 0 10px red;
  }
}

/* Score Display */
.score-display {
  position: fixed;
  z-index: 10;
  color: lime;
  left: 10px;
  top: 10px;
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  text-shadow: 0 0 5px lime, 0 0 10px black;
}

.level-display {
  position: fixed;
  z-index: 10;
  color: cyan;
  right: 10px;
  top: 10px;
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  text-shadow: 0 0 5px cyan, 0 0 10px black;
}

/* Leaderboard Styles */
.leaderboard {
  display: block;
  position: fixed;
  z-index: 10;
  left: 10px;
  top: 40px;
  font-family: "Press Start 2P", monospace;
  font-size: 12px;
  color: #0ff;
  text-shadow: 0 0 5px #0ff, 0 0 10px black;
}

.leaderboard-title {
  margin-bottom: 6px;
}

.leaderboard-list {
  margin: 0;
  padding-left: 40px;
  padding-top: 5px;
}

.clear-lb-btn {
  margin-top: 8px;
  font-family: "Press Start 2P", monospace;
  font-size: 10px;
  padding: 6px 8px;
  background: black;
  color: #f55;
  border: 2px solid #f55;
  cursor: pointer;
}

.clear-lb-btn:hover {
  animation: flash-clear 1s infinite;
}

/* Save Score UI */
.save-score-ui {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
  background: black;
  border: 3px solid yellow;
  padding: 12px 16px;
  text-align: center;
  font-family: "Press Start 2P", monospace;
  color: yellow;
  text-shadow: 0 0 5px yellow, 0 0 10px black;
  display: none;
  z-index: 10;
}

.final-score-display {
  margin-bottom: 8px;
}

.player-name-label {
  display: block;
  margin-bottom: 6px;
  color: lime;
}

.player-name-input {
  padding: 6px 8px;
  border: 2px solid yellow;
  background: black;
  color: yellow;
  font-family: "Press Start 2P", monospace;
}

.save-score-btn {
  display: block;
  margin: 10px auto 0;
  padding: 8px 14px;
  background: black;
  color: yellow;
  border: 3px solid yellow;
  cursor: pointer;
  font-family: "Press Start 2P", monospace;
  animation: flash 1s infinite;
}

/* Start Button */
.start-btn {
  display: block;
  position: fixed;
  z-index: 10;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 12px 24px;
  font-family: "Press Start 2P", monospace;
  font-size: 16px;
  color: yellow;
  background-color: black;
  border: 3px solid yellow;
  cursor: pointer;
  text-shadow: 0 0 5px yellow, 0 0 10px black;
  animation: flash 1s infinite;
}

/* Controls Hint */

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-3px);
  }
}

.keycap {
  display: inline-block;
  padding: 2px 6px;
  margin: 0 2px;
  border: 2px solid yellow;
  border-radius: 4px;
  background: black;
  font-size: 10px;
  min-width: 20px;
  text-align: center;
  animation: float 1.5s ease-in-out infinite;
}

.keycap:nth-child(odd) {
  animation-delay: 0.2s;
}
.keycap:nth-child(even) {
  animation-delay: 0.4s;
}

.controls-hint {
  display: block;
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  font-family: "Press Start 2P", monospace;
  font-size: 14px;
  color: yellow;
  text-align: center;
  z-index: 15;
  text-shadow: 0 0 5px yellow, 0 0 10px black;
}

.control {
  margin: 10px 0;
}

.action {
  margin-left: 6px;
  animation: float 1.5s ease-in-out infinite;
}

/* Power-Ups */
@keyframes fast-flash {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}

.shield,
.ptsMultiplier {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: yellow;
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: 25px;
  text-shadow: 0 0 5px yellow, 0 0 15px black;
  display: none;
  animation: fast-flash 0.2s infinite;
}

.shield {
  top: 12%;
}

.ptsMultiplier {
  top: 18%;
}

/* Game Over Elements */
.next-level-text {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: lime;
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: 40px;
  text-shadow: 0 0 5px lime, 0 0 15px black;
  display: none;
  animation: flash-green 1s infinite;
}

.next-level-points {
  position: fixed;
  top: 43%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: cyan;
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: 25px;
  text-shadow: 0 0 5px cyan, 0 0 15px black;
  display: none;
  animation: flash-green 1s infinite;
}

.game-over-text {
  position: fixed;
  top: 35%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  color: red;
  margin: 0;
  font-family: "Press Start 2P", monospace;
  font-size: 40px;
  text-shadow: 0 0 5px red, 0 0 15px black;
  display: none;
}

.game-over-btn {
  position: fixed;
  top: 70%;
  left: 50%;
  transform: translateX(-50%);
  padding: 12px 24px;
  font-family: "Press Start 2P", monospace;
  font-size: 16px;
  color: yellow;
  background-color: black;
  border: 3px solid yellow;
  cursor: pointer;
  text-shadow: 0 0 5px yellow, 0 0 10px black;
  display: none;
  z-index: 10;
  animation: flash 1s infinite;
}