/* ============================================================
   LOADING SCREEN
   ============================================================ */
#loading-screen {
  position: fixed;
  inset: 0;
  background: var(--bg-deep);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  transition: opacity .8s ease, visibility .8s ease;
}
#loading-screen.fade-out { opacity: 0; visibility: hidden; }

.load-inner {
  position: relative;
  width: 120px; height: 120px;
  display: flex; align-items: center; justify-content: center;
}
.load-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: var(--neon-cyan);
  animation: spin 1.2s linear infinite;
}
.load-ring--2 { inset: 12px; border-top-color: var(--neon-purple); animation-duration: .9s; animation-direction: reverse; }
.load-ring--3 { inset: 24px; border-top-color: var(--neon-pink);   animation-duration: 1.5s; }
.load-text {
  font-family: var(--font-display);
  font-size: 8px;
  letter-spacing: 4px;
  color: var(--text-secondary);
  animation: pulse-text 1.2s ease-in-out infinite;
}

/* ============================================================
   PASSWORD SCREEN
   ============================================================ */
#password-screen {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-deep);
  transition: opacity 1s var(--ease-out-expo), transform 1.2s var(--ease-out-expo);
}
#password-screen.fade-out {
  opacity: 0;
  transform: scale(1.05);
  pointer-events: none;
}

#particle-canvas {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pw-aurora {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 30% 80%, rgba(191,92,255,0.12) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 70% 20%, rgba(0,240,255,0.08) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(255,45,120,0.06) 0%, transparent 60%);
  animation: aurora-drift 8s ease-in-out infinite alternate;
}
@keyframes aurora-drift {
  0%   { background-position: 0% 50%, 100% 50%, 50% 50%; }
  100% { background-position: 100% 50%, 0% 50%, 50% 100%; }
}

.pw-container {
  position: relative;
  z-index: 2;
  width: min(440px, 94vw);
  animation: pw-appear .8s var(--ease-out-expo) 2.2s both;
  padding: 0 16px;
}
@keyframes pw-appear {
  from { opacity: 0; transform: translateY(30px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

.pw-glass {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: 28px;
  padding: clamp(28px, 6vw, 50px) clamp(20px, 6vw, 44px) clamp(24px, 5vw, 44px);
  text-align: center;
  box-shadow: 0 30px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
}

/* ---- Cyber Moon Emblem ---- */
.pw-emblem {
  position: relative;
  width: 125px; height: 125px;
  margin: 0 auto 30px;
  display: flex; align-items: center; justify-content: center;
}
.cyber-moon { isolation: isolate; }

.moon-core {
  position: absolute;
  width: 48px; height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle, #ffffff 0%, #b9ffff 16%, #45f6ff 35%, #00eaff 58%, rgba(0,234,255,0.22) 76%, transparent 100%);
  box-shadow: 0 0 18px #ffffff, 0 0 32px #00eaff, 0 0 70px rgba(0,234,255,0.8), 0 0 115px rgba(0,234,255,0.35);
  animation: moonPulse 2.8s ease-in-out infinite;
  z-index: 5;
}
.moon-core::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,234,255,0.22), transparent 68%);
  filter: blur(10px);
  z-index: -1;
}
.moon-core::after {
  content: "";
  position: absolute;
  inset: 9px 14px 15px 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  filter: blur(7px);
  opacity: 0.75;
}

.moon-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(0,240,255,0.24);
  border-left-color: transparent;
  border-bottom-color: transparent;
  box-shadow: 0 0 16px rgba(0,240,255,0.16), inset 0 0 18px rgba(0,240,255,0.06);
}
.ring-1 { width: 78px; height: 78px; animation: orbitSpin 7s linear infinite; }
.ring-2 { width: 102px; height: 102px; border-color: rgba(191,92,255,0.26); border-right-color: transparent; border-top-color: rgba(0,240,255,0.34); animation: orbitSpinReverse 11s linear infinite; }
.ring-3 { width: 124px; height: 124px; border-color: rgba(255,45,120,0.18); border-top-color: transparent; border-left-color: rgba(0,240,255,0.24); animation: orbitSpin 16s linear infinite; }

.moon-ring::before, .moon-ring::after {
  content: "";
  position: absolute;
  width: 18px; height: 1px;
  border-radius: 999px;
  background: rgba(0,240,255,0.55);
  box-shadow: 0 0 12px rgba(0,240,255,0.8);
}
.moon-ring::before { top: 12%; right: 8%; }
.moon-ring::after  { bottom: 20%; left: 4%; width: 11px; opacity: 0.7; }

.moon-particles { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.moon-particles span {
  position: absolute;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #00eaff;
  box-shadow: 0 0 10px #00eaff, 0 0 20px rgba(0,234,255,0.75);
  animation: floatParticle 4s ease-in-out infinite;
}
.moon-particles span:nth-child(1) { top: 9px; left: 57px; }
.moon-particles span:nth-child(2) { top: 39px; right: 12px; background: #bf5cff; box-shadow: 0 0 10px #bf5cff, 0 0 20px rgba(191,92,255,0.7); animation-duration: 5.2s; }
.moon-particles span:nth-child(3) { bottom: 17px; left: 32px; background: #ff2d78; box-shadow: 0 0 10px #ff2d78, 0 0 20px rgba(255,45,120,0.7); animation-duration: 6s; }
.moon-particles span:nth-child(4) { top: 58px; left: 8px; width: 4px; height: 4px; animation-duration: 4.7s; }
.moon-particles span:nth-child(5) { top: 25px; right: 34px; width: 4px; height: 4px; background: #ffffff; animation-duration: 5.8s; }
.moon-particles span:nth-child(6) { right: 29px; bottom: 28px; width: 5px; height: 5px; background: #ff2d78; animation-duration: 7s; }

@keyframes orbitSpin        { to { transform: rotate(360deg); } }
@keyframes orbitSpinReverse { to { transform: rotate(-360deg); } }
@keyframes moonPulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%       { transform: scale(1.14); filter: brightness(1.45); }
}
@keyframes floatParticle {
  0%, 100% { transform: translateY(0) scale(1); opacity: 0.75; }
  50%       { transform: translateY(-7px) scale(1.25); opacity: 1; }
}

/* ---- Password Form ---- */
.pw-subtitle {
  font-family: var(--font-display);
  font-size: 9px;
  letter-spacing: 5px;
  color: var(--neon-cyan);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pw-title {
  font-family: var(--font-display);
  font-size: clamp(18px, 5vw, 30px);
  font-weight: 700;
  margin-bottom: 10px;
  background: linear-gradient(135deg, #fff 30%, var(--neon-cyan));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pw-hint {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 32px;
  font-style: italic;
}
.pw-input-wrap { position: relative; margin-bottom: 12px; }
#pw-input {
  width: 100%;
  padding: 16px 22px;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-primary);
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  outline: none;
  text-align: center;
  letter-spacing: 4px;
  transition: border-color .3s, box-shadow .3s;
  caret-color: var(--neon-cyan);
}
#pw-input::placeholder { letter-spacing: 2px; color: rgba(240,240,255,0.3); }
#pw-input:focus {
  border-color: rgba(0,240,255,0.4);
  box-shadow: 0 0 0 3px rgba(0,240,255,0.08), 0 0 20px rgba(0,240,255,0.1);
}
.pw-input-glow {
  position: absolute;
  inset: -1px;
  border-radius: 15px;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
  opacity: 0;
  z-index: -1;
  filter: blur(6px);
  transition: opacity .3s;
}
#pw-input:focus ~ .pw-input-glow { opacity: .3; }

.pw-error {
  font-size: 12px;
  color: var(--neon-pink);
  margin-bottom: 16px;
  min-height: 20px;
  opacity: 0;
  transition: opacity .3s;
}
.pw-error.show { opacity: 1; animation: pw-shake .5s ease; }
@keyframes pw-shake {
  0%, 100% { transform: translateX(0)  }
  20%       { transform: translateX(-8px) }
  60%       { transform: translateX(8px)  }
  80%       { transform: translateX(-4px) }
}

.pw-btn {
  position: relative;
  width: 100%;
  padding: 18px;
  border-radius: 14px;
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 3px;
  color: var(--bg-deep);
  font-weight: 700;
  background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple));
  overflow: hidden;
  cursor: none;
  margin-bottom: 24px;
  box-shadow: 0 4px 30px rgba(0,240,255,0.3);
  transition: transform .2s var(--ease-spring), box-shadow .3s;
}
.pw-btn:hover   { transform: translateY(-2px) scale(1.01); box-shadow: 0 8px 40px rgba(0,240,255,0.45); }
.pw-btn:active  { transform: scale(.98); }
.pw-btn-arrow   { margin-left: 8px; display: inline-block; transition: transform .3s; }
.pw-btn:hover .pw-btn-arrow { transform: translateX(4px); }
.pw-btn-ripple  { position: absolute; inset: 0; background: rgba(255,255,255,0); }

.pw-music-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
  font-size: 12px;
  color: var(--text-secondary);
  cursor: none;
  transition: color .3s;
}
.pw-music-toggle:hover { color: var(--text-primary); }
.pw-music-icon  { font-size: 16px; display: block; animation: pw-music-bounce 2s ease-in-out infinite; }
@keyframes pw-music-bounce {
  0%, 100% { transform: translateY(0) }
  50%       { transform: translateY(-3px) }
}

/* ---- Password Screen responsive ---- */
@media (max-width: 480px) {
  .pw-glass  { padding: 28px 20px 24px; }
  .pw-emblem { width: 100px; height: 100px; margin-bottom: 20px; }
  .ring-3    { width: 100px; height: 100px; }
  .pw-hint   { margin-bottom: 24px; }
}