/* ----- Background Flicker ----- */
@keyframes bgFlicker {
  0%, 100% { background-color: #0a0a0a; }
  20% { background-color: #0d0d0d; }
  50% { background-color: #0b0b0b; }
  70% { background-color: #0c0c0c; }
}

body {
  margin: 0;
  background-color: #0b0b0b;
  color: #ccc;
  font-family: 'Courier New', monospace;
  animation: bgFlicker 8s infinite;
  overflow: hidden;
}

.header {
  position: fixed; top: 0; width: 100%;
  background: rgba(0,0,0,0.8); padding: 15px;
  border-bottom: 1px solid #333; z-index: 10;
  text-align: center; color: #ddd;
}

.logo-container {
  position: absolute; top: 10px; right: 10px; z-index:11;
}
.logo {
  width: 80px;
  filter: contrast(1.2) brightness(1.1);
  animation: glitch 1.5s infinite;
}

/* Terminal area */
.terminal {
  margin-top: 120px; padding: 30px;
}
.input-line { margin: 10px 0; }
input {
  background: #000; color: #ccc;
  border: 1px solid #555; padding: 5px;
}
button {
  background: #ccc; color: #000;
  border: none; padding: 5px 10px;
  margin-left: 10px; cursor: pointer;
}
.error { color: red; }

/* The hidden clue */
#clue {
  position: absolute;
  font-size: 48px; color: rgba(255,255,255,0.06);
  pointer-events: none;
  animation: clue-flicker 3s infinite;
  white-space: nowrap;
}
@keyframes clue-flicker {
  0%,100% { opacity: 0.1; }
  50% { opacity: 0.25; }
}

/* Logo glitch */
@keyframes glitch {
  0%,100% { transform: none; opacity: 1; }
  20% { transform: translate(-1px,1px) skew(0.5deg); opacity: 0.8; }
  40% { transform: translate(1px,-2px) skew(-0.5deg); opacity: 0.7; }
  60% { transform: translate(0,1px) skew(0.2deg); opacity: 0.9; }
}