/* GLOBAL SETTINGS */
body {
  margin: 0;
  background-color: #000;
  overflow: hidden; /* Prevents scrollbars */
  font-family: 'Orbitron', sans-serif; /* Sci-Fi Font */
  color: #00ffcc; /* Cyan Text */
}

/* OVERLAY (Start Screen) */
#overlay {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  background: black;
  display: flex; flex-direction: column; 
  justify-content: center; align-items: center;
  z-index: 100; cursor: pointer;
}

h1 {
  font-size: 3rem; letter-spacing: 10px;
  text-shadow: 0 0 20px #00ffcc; margin: 0 0 10px 0;
}

.blink { animation: blinker 1.5s linear infinite; font-size: 14px; opacity: 0.8; }
@keyframes blinker { 50% { opacity: 0; } }

/* HUD (Top Left) */
#hud {
  position: absolute; top: 20px; left: 20px;
  display: none; pointer-events: none;
}

.hud-item {
  font-size: 12px; margin-bottom: 5px; opacity: 0.8;
  text-shadow: 0 0 5px #00ffcc;
}
.active { color: #fff; font-weight: bold; }

/* CONTROLS (Bottom Right) */
#controls {
  position: absolute; bottom: 30px; right: 30px;
  display: none; z-index: 50;
}

button {
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid #00ffcc; color: #00ffcc;
  padding: 12px 24px; font-family: 'Orbitron', sans-serif;
  font-size: 12px; letter-spacing: 2px;
  cursor: pointer; transition: all 0.3s;
}

button:hover { background: #00ffcc; color: black; box-shadow: 0 0 20px #00ffcc; }

/* SCANNER ANIMATION LINE */
.scanner-line {
  position: absolute; top: 0; left: 0; width: 100%; height: 2px;
  background: #00ffcc; box-shadow: 0 0 15px #00ffcc;
  animation: scan 2s linear infinite;
}
@keyframes scan { 0% {top: 0%} 100% {top: 100%} }