/* styles.css */
body, html {
  margin: 0; padding: 0;
  background: #000;
  color: #39FF14;
  font-family: 'Courier New', monospace;
  height: 100%; overflow: hidden;
}
.terminal {
  position: relative;
  width: 100%; height: 100%;
  box-sizing: border-box;
  padding: 20px;
  background: #000;
  overflow: auto;
}
/* Scanline Overlay */
.terminal::before {
  content: "";
  pointer-events: none;
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background-image: linear-gradient(rgba(0,0,0,0.05) 50%, transparent 50%);
  background-size: 100% 4px;
  z-index: 9999;
}
/* Blinking Cursor */
@keyframes blink { 0%,50%{opacity:1} 50.1%,100%{opacity:0} }
.cursor { animation: blink 1s step-end infinite; }
/* Containers */
#game-container { max-width:800px; margin:0 auto; text-align:center; }
#progress-bar { width:80%; height:8px; background:#222; margin:0 auto 20px; border-radius:4px; overflow:hidden; }
#progress-fill { height:100%; width:0%; background:#39FF14; transition:width .5s ease; }
#timer { font-size:1.2em; }
/* Levels */
.level { margin:20px 0; }
.instructions { font-size:.9em; margin-bottom:10px; opacity:.8; }
/* Messages */
.message { margin-top:12px; font-size:1em; }
.glitch {
  position: relative; color: #39FF14;
}
.glitch::before, .glitch::after {
  content: attr(data-text);
  position: absolute; left:0; top:0; opacity:.8;
}
@keyframes glitchTop { /* ...complex glitch frames...*/ }
@keyframes glitchBottom { /* ...complex glitch frames...*/ }
/* Tiles & Grids */
#binary-tiles {
  display:grid;
  grid-template-columns:repeat(4, 60px);
  grid-gap:10px;
  justify-content:center;
}
.binary-tile { font-size:1.5em; }
/* Nodes & Wires */
#nodes-container { position:relative; width:100%; height:200px; margin:20px auto; }
#wire-canvas {
  position:absolute; top:0; left:0; width:100%; height:100%;
  pointer-events:none;
}
#nodes { position:relative; display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(2,1fr); gap:20px; height:100%; }
.node { font-size:1em; }
/* Codebreaker */
#codebreaker { display:flex; justify-content:center; gap:20px; }
.letter-container { text-align:center; }
.rotate-btn { width:30px; height:30px; }
/* Logic Gates */
#user-input-sequence { margin-top:10px; }
.logic-gate { width:80px; height:40px; margin:0 10px; }
/* Buttons */
button {
  background:none;
  border:1px solid #39FF14;
  color:#39FF14;
  padding:8px;
  cursor:pointer;
  transition:box-shadow .2s ease;
}
button:hover { box-shadow:0 0 10px #39FF14; }
/* Final */
.final-message {
  font-size:1.4em;
  margin-top:20px;
  animation:flicker 2s infinite;
}
@keyframes flicker {
  0%,19%,21%,23%,25%,54%,56%,100%{opacity:1}
  20%,24%,55%{opacity:0}
}