/* HECTOR YABES */
/* yab3.dev */

/* --------------------
   DEBUG SIGN
-------------------- */

#status {
  margin-bottom: 8px; /* sits above the logo */
}

.debug-sign {
  font-size: 0.95rem;
  font-family: monospace;
  letter-spacing: 0.08em;
  font-weight: 600;

  color: #9ca3af; /* grey */
  opacity: 0;     /* hidden by default */

  transition:
    opacity 0.2s ease,
    color 0.15s ease;

  user-select: none;
}

/* visible whenever a state is applied */
.debug-sign.neutral,
.debug-sign.valid,
.debug-sign.invalid {
  opacity: 1;
}

.debug-sign.neutral {
  color: #9ca3af; /* grey */
}

.debug-sign.valid {
  color: #22c55e; /* green */
}

.debug-sign.invalid {
  color: #ef4444; /* red */
}

/* --------------------
   INPUT WOBBLE ANIMATION
-------------------- */

.wobble-hor-bottom {
  -webkit-animation: wobble-hor-bottom 0.8s both;
          animation: wobble-hor-bottom 0.8s both;
}

/* ----------------------------------------------
 * Generated by Animista on 2026-2-3
 * Licensed under FreeBSD License
 * ---------------------------------------------- */

#logo {
  position: fixed;
  font-size: 3rem;
  font-weight: 700;
  pointer-events: none;
  top: 0;
  left: 0;
}


@-webkit-keyframes wobble-hor-bottom {
  0%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}

@keyframes wobble-hor-bottom {
  0%, 100% {
    -webkit-transform: translateX(0%);
            transform: translateX(0%);
    -webkit-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
  }
  15% {
    -webkit-transform: translateX(-30px) rotate(-6deg);
            transform: translateX(-30px) rotate(-6deg);
  }
  30% {
    -webkit-transform: translateX(15px) rotate(6deg);
            transform: translateX(15px) rotate(6deg);
  }
  45% {
    -webkit-transform: translateX(-15px) rotate(-3.6deg);
            transform: translateX(-15px) rotate(-3.6deg);
  }
  60% {
    -webkit-transform: translateX(9px) rotate(2.4deg);
            transform: translateX(9px) rotate(2.4deg);
  }
  75% {
    -webkit-transform: translateX(-6px) rotate(-1.2deg);
            transform: translateX(-6px) rotate(-1.2deg);
  }
}

/* --------------------
   HELP BUTTON + TOOLTIP
-------------------- */

.help-wrapper {
  position: relative;
  margin-bottom: 12px;
}

.help-btn {
  background: none;
  border: none;
  font-size: 1rem;
  font-family: monospace;
  cursor: pointer;
  color: #9ca3af;
  padding: 4px;
}

.help-btn:hover {
  color: #000;
}

/* tooltip text */
.help-tooltip {
  position: absolute;
  top: 125%;
  left: 50%;
  transform: translateX(-50%);

  background: #111;
  color: #fff;
  font-size: 0.75rem;
  font-family: monospace;
  padding: 4px 8px;
  border-radius: 4px;

  white-space: nowrap;

  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

/* show tooltip on hover */
.help-wrapper:hover .help-tooltip {
  opacity: 1;
}