body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: black;
  color: white;
  text-align: center;
  
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}


#menu {
  position: absolute;
  background: rgba(0, 0, 0, 0.85);
  font-family: 'Orbitron', sans-serif;
  text-align: center;
  color: white;
}

/* Título em vermelho neon */
#menu h1 {
  margin-bottom: 20px;
  color: red;
  text-shadow: 0 0 10px red, 0 0 20px darkred;
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeIn 1s forwards;
  animation-delay: 0.5s;
}

#menu #gameLogo {
  opacity: 0;
  animation: fadeIn 1s forwards;
  animation-delay: 0.2s; /* aparece primeiro, antes do título */
}

/* Botões com aparição gradual */
#btnPlay, #btnRanking {
  opacity: 0;
  transform: translateY(-20px);
  animation: fadeIn 1s forwards;
  display: block;
  margin: 10px auto;
  padding: 12px 25px;
  font-size: 18px;
  font-family: 'Orbitron', sans-serif;
  border: 2px solid red;
  background: black;
  color: red;
  cursor: pointer;
  transition: 0.3s;
}

#btnPlay {
  animation-delay: 1.5s;
}

#btnRanking {
  animation-delay: 2.5s;
}

#btnPlay:hover, #btnRanking:hover {
  background: red;
  color: black;
  box-shadow: 0 0 10px red;
}

@keyframes fadeIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hidden {
  display: none;
}

#gameOver {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.85);
  border: 3px solid lime;
  border-radius: 10px;
  font-family: 'Orbitron', sans-serif;
  text-align: center;
  color: white;
  max-width: 90%;
  width: 600px;
  box-shadow: 0 0 15px lime;
}

#gameOver h2 {
  margin-bottom: 15px;
  color: lime;
  text-shadow: 0 0 10px lime;
}

#finalScore {
  margin-bottom: 15px;
  font-size: 18px;
}

#playerName {
  width: 80%;
  padding: 10px;
  margin-bottom: 15px;
  font-size: 16px;
  border: 2px solid lime;
  border-radius: 5px;
  background: black;
  color: white;
  font-family: 'Orbitron', sans-serif;
  text-align: center;
}

#saveScore {
  background: lime;
  color: black;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  transition: 0.3s;
}

#saveScore:hover {
  background: green;
  color: white;
}


button {
  display: block;
  margin: 10px auto;
  padding: 10px 20px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 20px;
  background: rgb(255, 0, 0);
}



canvas {
  display: block;
  margin: 0 auto;
  background: url('https://www.transparenttextures.com/patterns/stardust.png');
  border: 2px solid white;
}

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500&display=swap');
/* latin */
@font-face {
  font-family: 'Orbitron';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/orbitron/v35/yMJMMIlzdpvBhQQL_SC3X9yhF25-T1nyKS6BoWgz.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
#rankingScreen {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.8);
  border: 3px solid rgb(255, 0, 0);
  border-radius: 10px;
  font-family: 'Orbitron', sans-serif;
  text-align: center;
  color: white;
  
  
  box-shadow: 0 0 15px red;
}

#rankingScreen h2 {
  margin-bottom: 20px;
  color: rgb(255, 0, 0);
  text-shadow: 0 0 10px rgb(255, 0, 0);
}

#rankingList {
  list-style: none;
  padding: 0;
  margin: 10px 0 20px;
}

#rankingList li {
  margin: 5px 0;
  padding: 5px;
  border-bottom: 1px solid #555;
}

#btnResetRanking {
  margin-bottom: 10px;
  background: darkred;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  transition: 0.3s;
}

#btnResetRanking:hover {
  background: red;
}

#btnVoltar {
  background: #333;
  color: rgb(255, 0, 0);
  border: 2px solid rgb(255, 0, 0);
  box-shadow: 0 0 15px red;
  padding: 10px 20px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  transition: 0.3s;
}

#btnVoltar:hover {
  background: rgb(255, 0, 0);
  color: black;
}

#levelSelect {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 500px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.85);
  border: 3px solid orange;
  border-radius: 10px;
  font-family: 'Orbitron', sans-serif;
  text-align: center;
  color: white;
}

#levelSelect h2 {
  margin-bottom: 20px;
  color: orange;
  text-shadow: 0 0 10px orange;
}

#levelButtons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

#levelButtons button {
  padding: 12px 25px;
  font-size: 18px;
  font-family: 'Orbitron', sans-serif;
  border: 2px solid orange;
  background: black;
  color: orange;
  cursor: pointer;
  transition: 0.3s;
}

#levelButtons button:hover {
  background: orange;
  color: black;
  box-shadow: 0 0 10px orange;
}

#btnBackToMenu {
  margin-top: 15px;
  background: #333;
  color: orange;
  border: 2px solid orange;
  padding: 10px 20px;
  cursor: pointer;
  font-family: 'Orbitron', sans-serif;
  font-size: 16px;
  transition: 0.3s;
}

#btnBackToMenu:hover {
  background: orange;
  color: black;
}

#gameLogo {
  width: 120px; /* ajuste o tamanho */
  height: auto;
  filter: brightness(0) saturate(100%) invert(19%) sepia(100%) saturate(7463%) hue-rotate(357deg) brightness(95%) contrast(116%);
}

#levelTransition {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  padding: 20px;
  background: rgba(0, 0, 0, 0.85);
  border: 3px solid yellow;
  border-radius: 10px;
  font-family: 'Orbitron', sans-serif;
  text-align: center;
  color: white;
}

#levelTransition h2 {
  margin-bottom: 10px;
  color: yellow;
  text-shadow: 0 0 10px yellow;
}

#transitionCountdown {
  font-size: 20px;
  color: orange;
}

#toastMessage {
  margin-bottom: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: bold;
  background: rgba(255, 50, 50, 0.9);
  color: white;
  border: 1px solid red;
  text-align: center;
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.4s ease, transform 0.4s ease;
}

#toastMessage.show {
  opacity: 1;
  transform: translateY(0);
}