/* Reset default spacing */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  background-color: black;
  /* color: #00ff99; */
  color: #ffffff;
  font-family: monospace;
  overflow: hidden;
}

/* p{
    white-space: pre;
    text-align: center;
    font-family: monospace;
    padding: 0;
    margin: 0;
} */

/* Background ASCII art layer */
/* Background ASCII art layer */

.ascii-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  white-space: pre;
  font-size: 10px;
  opacity: 0.25;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 0;
  animation: flicker 2s infinite ease-in-out,
    /* float 20s ease-in-out infinite, */
    pulseColor 6s ease-in-out infinite;
}

.ascii-background p {
  margin: 0;
  white-space: pre;
  transition: transform;
  /* quick flicker */
}

/* Flicker animation — small brightness variations */
@keyframes flicker {

  0%,  19%,  21%,  23%,  25%,  54%,  56%,  100% {
    opacity: 0.25;
  }

  20%,
  24%,
  55% {
    opacity: 0.20;
  }
}

/* Slow floating movement (up and down) */
@keyframes float {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Gentle green pulse */
@keyframes pulseColor {

  0%,
  100% {
    color: #00ff99;
    text-shadow: 0 0 6px #00ff99;
  }

  50% {
    color: #00cc77;
    text-shadow: 0 0 12px #00cc77;
  }
}

/* Foreground UI layer */
.ui-layer {
  position: relative;
  z-index: 10;
  /* above background */
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  transform: translateY(40px);
    /* prevent layout collapse */
  max-width: 1900px;   /* or whatever fits your layout */
  min-width: 1400px;   /* stops content from overlapping */
  margin: 0 auto;     /* centers the layout horizontally */
}

.title {
  font-size: 2rem;
  color: #00ffcc;
  text-shadow: 0 0 8px #00ffcc;
}

input,
button {
  background: rgba(0, 0, 0, 0.7);
  border: 1px solid #00ffcc;
  color: #00ffcc;
  font-family: monospace;
  padding: 8px 12px;
  border-radius: 0px;
  font-size: 1rem;
}

button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: none;
}

input:focus {
  outline: none;
  border: 1px solid #00ffcc;
  border-radius: 0;
  box-shadow: 0 0 4px #00ffcc, 0 0 8px #00ffcc55;
  background: rgba(0, 20, 20, 0.9);
}


button:hover {
  background: #00ffcc;
  color: black;
  cursor: pointer;
}

.key-container {
  margin-top: 30px;
  height: 80px; /* reserve space even when hidden */
  opacity: 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.8em;

  /* new additions */
  pointer-events: none;      /* prevent interaction while hidden */
  transform: scale(0.98);    /* subtle visual shrink when hidden */
}

.key-container.show {
  opacity: 1;
  pointer-events: all;       /* re-enable interaction when shown */
  transform: scale(1);
}

.check-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.2em;
}

/* Default: hidden circle placeholder */
.check-container div {
  width: 20px;
  height: 20px;
  margin: 0 75px 0 75px;
  border-radius: 50%;
  border: 2px solid transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  color: transparent;
  font-weight: bold;
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity 0.3s ease;
}

/* Spinner */
.check-container div.show {
  border: 2px solid #00ffcc;
  border-top-color: transparent;
  animation: spin 1s linear infinite;
  opacity: 1;
}

/* ✅ Check */
.check-container div.check {
  animation: none;
  border: 2px solid #00ff99;
  color: #00ff99;
  opacity: 1;
  transform: scale(1.1);
  position: relative;
}

.check-container div.check::before {
  content: '✔';
  position: absolute;
  font-size: 1rem;
  color: #00ff99;
}

/* ❌ Error */
.check-container div.error {
  animation: none;
  border: 2px solid #ff3366;
  color: #ff3366;
  opacity: 1;
  transform: scale(1.1);
  position: relative;
}

.check-container div.error::before {
  content: '✖';
  position: absolute;
  font-size: 1rem;
  color: #ff3366;
  transform: translateY(-1px);
}

/* ? clue */
.check-container div.clue {
  animation: none;
  border: 2px solid #3399ff;
  color: #3399ff;
  opacity: 1;
  transform: scale(1.1);
}

.check-container div.clue::before {
  content: '?';
  position: absolute;
  font-size: 1.4rem;
  color: #3399ff;
  transform: translateY(0px);
}

/* Spinner keyframes */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}