* {
  margin:  0;
  padding: 0;
}

body {
  font-size: 24px;
  background: #020408; /* Assure que le fond reste noir même hors du canvas */
  color: white;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

#viewport {
  background: #020408;
  display: block;
  /* J'ai supprimé width/height 100% ici car le JS force la taille à 50% de la fenêtre, 
     ce qui créait un conflit d'affichage. */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.state-ui-container {
  display: flex;
  flex-direction: row;
  position: absolute;
  justify-content: left;
  align-items: left;
}

.ui-text {
  user-select: none;
  font-family: arial;
  font-size: 1em;
  font-weight: bold;
  font-variant-numeric: tabular-nums;
  margin: 10px;
  color: #e4e4e4;
  text-shadow: 0 2px 2px rgba(125,0,0,.51),
    0 0 10px rgba(255,0,255,1),
    0 0 10px rgba(255,0,255,1); 
  text-align: left;
}

#score {
  left: 0;
}

#lives {
  right: 0;
}

.ui-text--heading {
  font-size: 4em;
}

.state-ui-container {
  width: 100%;
  display: none;
  height: 100%;
  justify-content: center;
}

.console {
  align-self: center;
}
.banner {
  align-self: flex-start;
}

/* --- BOUTON SON RETRO --- */
.sound-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background: rgba(0, 255, 65, 0.1);
    color: #00FF41;
    border: 1px solid #00FF41;
    font-family: 'Courier New', Courier, monospace;
    padding: 10px 20px;
    cursor: pointer;
    text-transform: uppercase;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(0, 255, 65, 0.3);
    border-radius: 4px;
    transition: all 0.3s ease;
    letter-spacing: 1px;
}

.sound-btn:hover {
    background: #00FF41;
    color: #000;
    box-shadow: 0 0 20px #00FF41;
}