@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono:wght@400&display=swap');

[ng\:cloak], [ng-cloak], [data-ng-cloak],
[x-ng-cloak], .ng-cloak, .x-ng-cloak {
  display: none !important;
}

html, body {
  height: 100%;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

#terminal {
  background: #000000;
  width: 890px;
  height: 616px;
  border-radius: 5px;
  border: 5px solid #00ff00;
  padding: 20px;
  font-size: 22px;
  font-family: 'Share Tech Mono', monospace;
  color: #00ff00;
  overflow: hidden;
  position: relative;
  box-shadow:
    0 0 60px rgba(0, 255, 0, 0.6),
    inset 0 0 80px rgba(0, 255, 0, 0.1),
    0 0 120px rgba(0, 255, 0, 0.3);
}

#terminal::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    linear-gradient(transparent 50%, rgba(0, 255, 0, 0.08) 50%);
  background-size: 100% 3px;
  pointer-events: none;
  border-radius: 3px;
}

#terminal-screen { width: 600px; float: left; }
#terminal-sidebar { width: 250px; float: right; }
#terminal-history { height: 416px; }
#terminal-head {
  margin-bottom: 20px;
  text-align: center;
  text-shadow:
    0 0 15px #00ff00,
    0 0 30px #00ff00,
    0 0 45px #00ff00;
}

#terminal pre,
#terminal span { margin: 0; }
#terminal span { display: inline; }

#terminal-left { width: 50%; float: left; }
#terminal-right { width: 50%; float: right; }

.data, .byte {
  display: inline;
  text-shadow:
    0 0 5px #00ff00,
    0 0 10px #00ff00,
    0 0 15px #00ff00;
}

.data {
  transition: all 0.1s ease;
}

.data:hover {
  color: #ffff00;
  text-shadow:
    0 0 8px #ffff00,
    0 0 15px #ffff00,
    0 0 25px #ffff00;
}

.byte {
  color: #00aa00;
  text-shadow:
    0 0 8px #00aa00,
    0 0 15px #00aa00;
}

.word {
  background: rgba(0, 255, 0, 0.15);
  text-shadow:
    0 0 8px #00ff00,
    0 0 15px #00ff00,
    0 0 20px #00ff00;
}

.word:hover {
  color: #ffffff;
  background: rgba(0, 255, 0, 0.2);
  text-shadow:
    0 0 8px #ffffff,
    0 0 15px #00ff00;
}

.data.selected {
  color: #ffff00 !important;
  background-color: rgba(255, 255, 0, 0.25);
  text-shadow:
    0 0 12px #ffff00,
    0 0 20px #ffff00,
    0 0 30px #ffff00 !important;
  animation: selectedPulse 0.8s infinite;
}

#terminal-sidebar {
  border-left: 2px solid #00aa00;
  padding-left: 15px;
  box-shadow: -2px 0 10px rgba(0, 170, 0, 0.2);
}

#terminal-history pre {
  color: #00aa00;
  text-shadow:
    0 0 5px #00aa00,
    0 0 10px #00aa00;
}

.cursor {
  color: #ffff00;
  text-shadow:
    0 0 5px #ffff00,
    0 0 8px #ffff00;
  animation: blink 1s infinite;
}

#selection {
  color: #ffff00;
  text-shadow:
    0 0 5px #ffff00,
    0 0 8px #ffff00;
  animation: blink 1.2s infinite;
}

#terminal-head i {
  color: #ff0000;
  text-shadow:
    0 0 5px #ff0000,
    0 0 8px #ff0000;
  animation: heartbeat 1.5s infinite;
}

.landing-view pre:last-child {
  animation: blink 1.5s infinite;
}

.game-over-view #terminal-head {
  color: #ff0000;
  text-shadow:
    0 0 10px #ff0000,
    0 0 20px #ff0000;
  animation: errorPulse 1s infinite;
}

.game-win-view #terminal-head {
  text-shadow:
    0 0 15px #00ff00,
    0 0 25px #00ff00;
  animation: successGlow 2s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.3; }
}

@keyframes selectedPulse {
  0%, 100% {
    box-shadow: 0 0 12px rgba(255, 255, 0, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(255, 255, 0, 0.8);
  }
}

@keyframes heartbeat {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

@keyframes errorPulse {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.2);
  }
}

@keyframes successGlow {
  0%, 100% {
    filter: brightness(1);
  }
  50% {
    filter: brightness(1.3);
  }
}