/* Reset básico */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Estilo do corpo */
body {
  background: rgb(33, 32, 32); /* Cor de fundo de backup */
  background-image: url('img/espaço.jpg'); /* Imagem de fundo */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: #0ff;
  font-family: 'Courier New', Courier, monospace;
  overflow: hidden;
}

/* Painel principal */
.painel {
  padding: 1px;
  max-width: 900px;
  margin: auto;
  background: rgba(74, 73, 73, 0.6);
  border: 2px solid #0ff;
  border-radius: 15px;
  position: relative;
  z-index: 2;
}

/* Cabeçalho */
header {
  font-size: 20px;
  text-align: center;
  padding: 5px;
  background: #121212;
  border-bottom: 2px solid #0ff;
  text-shadow: 0 0 5px #0ff;
}

/* Tela principal */
.tela {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

/* Radar */
.radar {
  position: relative;
}

#radarCanvas {
  border: 2px solid #0ff;
  border-radius: 50%;
  background-color: #0a1818;
  box-shadow: inset 0 0 10px #0ff;
}

/* Efeito glitch no radar */
.glitch {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    0deg,
    rgba(0, 255, 255, 0.1),
    rgba(0, 255, 255, 0.1) 1px,
    transparent 1px,
    transparent 2px
  );
  animation: glitchMove 1s infinite linear;
}

@keyframes glitchMove {
  0% { background-position-y: 0; }
  100% { background-position-y: 100%; }
}

/* Mapa galáctico */
.mapa {
  flex: 1;
  margin-left: 20px;
  padding: 10px;
  background: rgba(0, 255, 255, 0.05);
  border: 1px dashed #0ff;
  font-size: 16px;
  height: 300px;
}

/* Botões de controle */
.botoes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 20px;
}

.botao {
  padding: 10px;
  background: #001f1f;
  border: 2px solid #0ff;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
  transition: 0.3s;
  text-shadow: 0 0 5px #0ff;
}

.botao:hover {
  background: #003333;
}

/* Botão especial: apagar histórico */
.botao.apagar {
  background: #330000;
  border-color: red;
  color: #f55;
  text-shadow: 0 0 5px red;
}

/* Barras de status */
.status {
  background: rgba(0, 255, 255, 0.05);
  padding: 10px;
  border: 1px solid #0ff;
  margin-bottom: 20px;
}

.status .barra {
  width: 100%;
  height: 10px;
  background: linear-gradient(to right, #0ff, #003333);
  margin-bottom: 10px;
  border-radius: 5px;
  box-shadow: inset 0 0 5px #0ff;
}

/* Terminal interativo */
.terminal {
  background: #0f0e0e;
  border: 2px solid #0ff;
  padding: 10px;
  height: 100px;
  overflow-y: auto;
  font-size: 14px;
  color: #0f0;
  font-family: monospace;
}

/* Animação de naves espaciais ao fundo */
.nave-espacial {
  position: absolute;
  width: 100px;
  opacity: 0.4;
  animation: moverNave linear infinite;
  z-index: 0; /* Atrás do painel */
  pointer-events: none;
}

.nave1 { top: 20%; left: -120px; animation-duration: 40s; }
.nave2 { top: 50%; left: -150px; animation-duration: 45s; }
.nave3 { top: 60%; left: -100px; animation-duration: 50s; }
.nave4 { top: 70%; left: -110px; animation-duration: 60s; }
.nave5 { top: 80%; left: -120px; animation-duration: 50s; }

@keyframes moverNave {
  0% { transform: translateX(0); }
  100% { transform: translateX(120vw); }
}