/* Retro login screen — isolated auth UI. */
body.ninja-auth-locked {
  overflow: hidden;
}

body.ninja-auth-locked > :not(#ninjaLoginScreen):not(.app-bg) {
  visibility: hidden;
}

.ninja-login-screen {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: grid;
  place-items: center;
  padding: 22px;
  overflow: hidden;
  background-color: #010402;
  background-image:
    linear-gradient(rgba(0, 7, 2, 0.58), rgba(0, 7, 2, 0.78)),
    var(--ninja-page-wallpaper, url('/assets/page-wallpaper.webp'));
  background-position: center, center;
  background-size: cover, cover;
  background-repeat: no-repeat, no-repeat;
  background-attachment: fixed, fixed;
}

.ninja-login-screen::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(
      0deg,
      rgba(132, 245, 40, 0.025) 0,
      rgba(132, 245, 40, 0.025) 1px,
      transparent 1px,
      transparent 4px
    );
  opacity: 0.42;
  animation: ninja-login-screen-flicker 7s linear infinite;
}

.ninja-login-panel {
  position: relative;
  width: min(450px, calc(100vw - 32px));
  padding: 24px 22px 28px;
  overflow: hidden;
  color: #d7ffd2;
  background:
    linear-gradient(180deg, rgba(0, 20, 6, 0.94), rgba(0, 8, 3, 0.97));
  border: 2px solid #0a8f22;
  border-radius: 22px;
  box-shadow:
    0 0 0 7px rgba(0, 45, 12, 0.88),
    0 0 0 9px #0a8f22,
    0 0 34px rgba(63, 255, 56, 0.24),
    inset 0 0 28px rgba(0, 0, 0, 0.72);
  font-family: "Courier New", Courier, monospace;
  animation: ninja-login-panel-in 420ms cubic-bezier(.18,.82,.28,1) both;
}

.ninja-login-panel::before {
  content: "";
  position: absolute;
  inset: 9px;
  pointer-events: none;
  border: 1px solid rgba(132, 245, 40, 0.32);
  border-radius: 15px;
}

.ninja-login-panel::after {
  content: "";
  position: absolute;
  z-index: 0;
  left: 10px;
  right: 10px;
  top: -30%;
  height: 26%;
  pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(132, 245, 40, 0.08), transparent);
  animation: ninja-login-scan 5.8s linear infinite;
}

.ninja-login-logo {
  position: relative;
  z-index: 1;
  display: block;
  width: min(330px, 86%);
  max-height: 118px;
  margin: 0 auto 14px;
  object-fit: contain;
  filter: drop-shadow(0 0 10px rgba(132, 245, 40, 0.22));
  animation: ninja-login-logo-pulse 3.2s ease-in-out infinite;
}

.ninja-login-terminal-status {
  position: relative;
  z-index: 1;
  min-height: 18px;
  margin: 0 0 12px;
  color: #84f528;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 7px rgba(132, 245, 40, 0.45);
}

.ninja-login-terminal-status::after {
  content: "_";
  margin-left: 2px;
  animation: ninja-login-blink 0.8s steps(1, end) infinite;
}

.ninja-login-form {
  position: relative;
  z-index: 1;
}

.ninja-login-label {
  display: block;
  margin: 0 0 7px;
  color: #84f528;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.ninja-login-field {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 30px 24px;
  align-items: center;
  min-height: 54px;
  margin-bottom: 15px;
  padding: 0 12px;
  border: 1px solid #31cf20;
  border-radius: 12px;
  background: rgba(0, 10, 3, 0.78);
  box-shadow: inset 0 0 12px rgba(0, 0, 0, 0.72);
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.ninja-login-field:focus-within {
  border-color: #84f528;
  box-shadow:
    0 0 0 1px rgba(132, 245, 40, 0.30),
    0 0 15px rgba(132, 245, 40, 0.19),
    inset 0 0 12px rgba(0, 0, 0, 0.72);
  transform: translateY(-1px);
}

.ninja-login-bracket {
  color: #84f528;
  font-size: 22px;
  line-height: 1;
  user-select: none;
  transition: text-shadow 140ms ease, transform 140ms ease;
}

.ninja-login-field:focus-within .ninja-login-bracket {
  text-shadow: 0 0 9px rgba(132, 245, 40, 0.75);
}

.ninja-login-field:focus-within .ninja-login-bracket:first-child {
  transform: translateX(-2px);
}

.ninja-login-field:focus-within .ninja-login-bracket:last-child {
  transform: translateX(2px);
}

.ninja-login-input {
  width: 100%;
  height: 48px;
  padding: 0 6px;
  color: #f4fff2;
  border: 0;
  outline: 0;
  background: transparent;
  caret-color: #84f528;
  font: 700 24px/1 "Courier New", Courier, monospace;
  text-transform: uppercase;
  text-shadow: 0 0 5px rgba(132, 245, 40, 0.20);
}

.ninja-login-input[type="password"] {
  letter-spacing: 0.14em;
  text-transform: none;
}

/* The browser caret is the real blinking terminal cursor. */
.ninja-login-cursor {
  display: none;
}

@keyframes ninja-login-blink {
  0%, 46% { opacity: 1; }
  47%, 100% { opacity: 0; }
}

.ninja-login-eye {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.ninja-login-eye img {
  display: block;
  width: 18px;
  height: 18px;
  object-fit: contain;
  filter: brightness(0) saturate(100%) invert(83%) sepia(82%) saturate(738%) hue-rotate(37deg) brightness(108%) contrast(101%);
}

.ninja-login-submit {
  width: 100%;
  min-height: 50px;
  margin-top: 2px;
  color: #fff0b5;
  border: 1px solid #ff714b;
  border-radius: 10px;
  background: linear-gradient(#c92a20, #97170f);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 3px 0 #510d08;
  cursor: pointer;
  font: 700 17px/1 "Courier New", Courier, monospace;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease;
}

.ninja-login-submit:hover,
.ninja-login-submit:focus-visible {
  background: linear-gradient(#e2382b, #ad1d14);
  outline: 1px solid #84f528;
  outline-offset: 3px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    0 3px 0 #510d08,
    0 0 20px rgba(255, 74, 45, 0.34);
  transform: translateY(-1px);
}

.ninja-login-submit:active {
  transform: translateY(2px);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 1px 0 #510d08;
}

.ninja-login-message {
  min-height: 18px;
  margin: 9px 2px 0;
  color: #ff7e70;
  font-size: 12px;
  text-align: center;
}

.ninja-login-panel.is-denied {
  animation: ninja-login-shake 300ms ease-in-out;
}

@keyframes ninja-login-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes ninja-login-logo-pulse {
  0%, 100% { filter: drop-shadow(0 0 8px rgba(132, 245, 40, 0.16)); }
  50% { filter: drop-shadow(0 0 16px rgba(132, 245, 40, 0.34)); }
}

@keyframes ninja-login-scan {
  from { transform: translateY(0); }
  to { transform: translateY(540%); }
}

@keyframes ninja-login-screen-flicker {
  0%, 96%, 100% { opacity: 0.42; }
  97% { opacity: 0.32; }
  98% { opacity: 0.48; }
}

@keyframes ninja-login-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

@media (prefers-reduced-motion: reduce) {
  .ninja-login-screen::before,
  .ninja-login-panel,
  .ninja-login-panel::after,
  .ninja-login-logo,
  .ninja-login-terminal-status::after {
    animation: none;
  }
}

@media (max-width: 520px) {
  .ninja-login-panel {
    padding: 22px 16px 24px;
    border-radius: 17px;
  }

  .ninja-login-input {
    font-size: 21px;
  }
}