/**
 * THE KINGDOM OF MOUKI — AUTHENTICATION & GATE SECURITY STYLES
 * Matches approved fairytale aesthetic: Pastel Pink, Cloud Lavender,
 * Champagne Gold, and Velvet Plum.
 */

/* Authentication Dialog Enhancements */
.royal-auth-dialog {
  border: none;
  background: transparent;
  padding: 0;
  max-width: 92vw;
  width: 480px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  border-radius: var(--radius-2xl, 24px);
  overflow: visible;
}

.royal-auth-dialog::backdrop {
  background: rgba(26, 15, 38, 0.78);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  animation: authBackdropFade 300ms ease forwards;
}

@keyframes authBackdropFade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.auth-dialog-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 245, 252, 0.96) 50%, rgba(248, 240, 255, 0.97) 100%);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 2px solid var(--color-champagne-gold, #e8c547);
  border-radius: var(--radius-2xl, 24px);
  padding: var(--space-6, 1.5rem) var(--space-6, 1.5rem) var(--space-5, 1.25rem);
  text-align: center;
  box-shadow:
    0 24px 60px rgba(43, 23, 54, 0.38),
    0 0 35px rgba(232, 197, 71, 0.35),
    inset 0 0 20px rgba(255, 255, 255, 0.85);
  animation: authCardPop 350ms cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
  transition: transform 200ms ease;
}

@keyframes authCardPop {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Shake Animation on Authentication Rejection */
.auth-shake {
  animation: authShake 500ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

@keyframes authShake {
  10%, 90% { transform: translate3d(-3px, 0, 0); }
  20%, 80% { transform: translate3d(5px, 0, 0); }
  30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
  40%, 60% { transform: translate3d(6px, 0, 0); }
}

.auth-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  margin-bottom: var(--space-2, 0.5rem);
  font-size: var(--text-xs, 0.75rem);
}

.auth-dialog-title {
  font-family: var(--font-royal-title, 'Cinzel Decorative', Georgia, serif);
  font-size: clamp(1.25rem, 2.8vw, 1.65rem);
  color: var(--color-velvet-plum, #3d1e4e);
  margin-bottom: var(--space-2, 0.5rem);
  line-height: 1.3;
}

.auth-dialog-desc {
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: var(--text-sm, 0.875rem);
  color: var(--color-midnight-slate, #2c1a4d);
  opacity: 0.88;
  margin-bottom: var(--space-5, 1.25rem);
  line-height: 1.5;
}

/* Auth Input Group */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 0.75rem);
}

.auth-input-group {
  position: relative;
  width: 100%;
}

.auth-input-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.95);
  border: 1.5px solid rgba(197, 154, 232, 0.5);
  border-radius: var(--radius-lg, 14px);
  box-shadow: inset 0 2px 4px rgba(43, 23, 54, 0.05);
  transition: all 220ms ease;
}

.auth-input-wrapper:focus-within {
  border-color: var(--color-champagne-gold, #e8c547);
  box-shadow:
    0 0 0 3px rgba(232, 197, 71, 0.25),
    inset 0 2px 4px rgba(43, 23, 54, 0.05);
}

.auth-input-wrapper.is-invalid {
  border-color: #e06d88;
  box-shadow: 0 0 0 3px rgba(224, 109, 136, 0.25);
}

.auth-input-icon {
  padding-left: var(--space-3, 0.75rem);
  font-size: 1.1rem;
  opacity: 0.75;
  user-select: none;
}

.auth-input {
  flex: 1 1 auto;
  border: none;
  background: transparent;
  padding: var(--space-3, 0.75rem) var(--space-2, 0.5rem);
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
  font-size: var(--text-base, 1rem);
  color: var(--color-velvet-plum, #3d1e4e);
  outline: none;
  min-width: 0;
}

.auth-input::placeholder {
  color: rgba(61, 30, 78, 0.45);
  font-size: var(--text-sm, 0.875rem);
}

.btn-toggle-passphrase {
  border: none;
  background: transparent;
  padding: var(--space-2, 0.5rem) var(--space-3, 0.75rem);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 180ms ease, transform 180ms ease;
  user-select: none;
}

.btn-toggle-passphrase:hover {
  opacity: 1;
  transform: scale(1.1);
}

.btn-toggle-passphrase:focus-visible {
  outline: 2px solid var(--color-champagne-gold, #e8c547);
  border-radius: var(--radius-sm, 6px);
}

/* Feedback & Status Message */
.auth-feedback {
  min-height: 1.4rem;
  font-size: var(--text-xs, 0.8rem);
  font-weight: 600;
  line-height: 1.4;
  margin-top: 2px;
  transition: all 200ms ease;
}

.auth-feedback.is-error {
  color: #b3264d;
}

.auth-feedback.is-loading {
  color: var(--color-velvet-plum, #3d1e4e);
}

.auth-feedback.is-success {
  color: #24824d;
}

/* Action Buttons */
.auth-actions {
  display: flex;
  gap: var(--space-3, 0.75rem);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--space-2, 0.5rem);
}

.btn-royal-enter-auth {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-weight: 700;
  padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem);
  box-shadow: 0 4px 18px rgba(232, 197, 71, 0.45);
}

.btn-royal-enter-auth:disabled,
.auth-input:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

/* Loading Spinner Animation */
.btn-spinner {
  display: inline-block;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Exit / Lock Button in Top Bar */
.btn-exit-kingdom {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, 0.5rem);
  font-weight: 600;
  padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
  border-radius: var(--radius-full, 9999px);
  font-size: var(--text-xs, 0.75rem);
  background: rgba(255, 255, 255, 0.88);
  border: 1.5px solid var(--color-champagne-gold, #e8c547);
  color: var(--color-velvet-plum, #3d1e4e);
  transition: all 200ms ease;
}

.btn-exit-kingdom:hover {
  background: var(--color-champagne-gold, #e8c547);
  color: #1a0f26;
  box-shadow: 0 4px 12px rgba(232, 197, 71, 0.35);
}

/* Responsive adjustments for mobile down to 320px */
@media (max-width: 480px) {
  .royal-auth-dialog {
    width: 95vw;
  }
  .auth-dialog-card {
    padding: var(--space-4, 1rem) var(--space-4, 1rem) var(--space-4, 1rem);
  }
  .auth-dialog-title {
    font-size: 1.25rem;
  }
  .auth-actions {
    flex-direction: column;
    width: 100%;
  }
  .auth-actions .btn {
    width: 100%;
    justify-content: center;
  }
}