/* Passcode gate. [hidden] must win over display (learned bug). */
.gate[hidden] { display: none !important; }
.gate {
  position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 24px;
  background: var(--bg, #FBF7FF);
  overflow: hidden;
  transition: opacity 0.45s var(--ease-out-quart, ease-out);
}
[data-theme="dark"] .gate { background: #17121F; }

/* Soft mesh blobs floating behind the card */
.gate::before, .gate::after {
  content: ''; position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.55;
  pointer-events: none;
  animation: gateBlob 14s ease-in-out infinite alternate;
}
.gate::before {
  width: 420px; height: 420px; top: -120px; left: -100px;
  background: radial-gradient(circle, #B9A7F5 0%, transparent 70%);
}
.gate::after {
  width: 380px; height: 380px; bottom: -110px; right: -90px;
  background: radial-gradient(circle, #FFC9B5 0%, transparent 70%);
  animation-delay: -7s;
}
[data-theme="dark"] .gate::before { background: radial-gradient(circle, rgba(155,125,245,0.35) 0%, transparent 70%); }
[data-theme="dark"] .gate::after  { background: radial-gradient(circle, rgba(255,138,122,0.2) 0%, transparent 70%); }

@keyframes gateBlob {
  from { transform: translate(0, 0) scale(1); }
  to   { transform: translate(40px, 30px) scale(1.15); }
}

/* Unlock: fade the whole gate away gracefully */
.gate.unlocking { opacity: 0; pointer-events: none; }
.gate.unlocking .gate-card { transform: translateY(-14px) scale(0.97); opacity: 0; }

.gate-card {
  position: relative; width: 100%; max-width: 340px; text-align: center;
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-light, #DDD6FE);
  border-radius: 24px;
  padding: 36px 28px 30px;
  box-shadow: 0 20px 50px -18px rgba(88, 60, 200, 0.25);
  animation: gateCardIn 0.55s var(--ease-out-quint, ease-out) both;
  transition: transform 0.4s var(--ease-out-quart, ease-out), opacity 0.4s var(--ease-out-quart, ease-out);
}
[data-theme="dark"] .gate-card { box-shadow: 0 20px 50px -18px rgba(0,0,0,0.6); }

@keyframes gateCardIn {
  from { opacity: 0; transform: translateY(22px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.gate-icon {
  font-size: 52px; line-height: 1; margin-bottom: 14px; display: inline-block;
  animation: gateFloat 3.2s ease-in-out infinite;
}
@keyframes gateFloat {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%      { transform: translateY(-7px) rotate(2deg); }
}

.gate-title {
  font-family: 'Fredoka', system-ui, sans-serif; font-size: 30px; font-weight: 700; margin: 0;
  color: var(--text, #1E1B4B); letter-spacing: -0.01em;
}
.gate-sub { color: var(--text-secondary, #6B7280); margin: 6px 0 22px; font-size: 14px; font-family: 'Nunito', system-ui, sans-serif; }

.gate-input {
  width: 100%; box-sizing: border-box; padding: 14px 16px; font-size: 16px; text-align: center;
  border-radius: 14px; border: 1.5px solid var(--border, #C4B5FD); background: var(--bg-surface, #EDE9FE);
  color: var(--text, #1E1B4B); outline: none; margin-bottom: 12px;
  font-family: 'Nunito', system-ui, sans-serif; letter-spacing: 0.08em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.gate-input:focus { border-color: var(--accent, #9B7DF5); box-shadow: 0 0 0 3px rgba(155, 125, 245, 0.22); }

.gate-btn {
  width: 100%; padding: 13px; font-size: 16px; font-weight: 700; cursor: pointer; border: 0;
  border-radius: 14px; color: #fff;
  background: var(--grad-hero, linear-gradient(120deg, #9B7DF5, #B9A7F5));
  font-family: 'Fredoka', system-ui, sans-serif; letter-spacing: 0.01em;
  box-shadow: 0 6px 16px -6px rgba(155, 125, 245, 0.55);
  transition: transform 0.15s var(--ease-out-quint, ease-out), box-shadow 0.2s ease, opacity 0.2s ease;
}
.gate-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(155, 125, 245, 0.65); }
.gate-btn:active { transform: scale(0.97); }
.gate-btn:disabled { opacity: .6; transform: none; }

.gate-err { color: #E4573B; font-size: 13px; margin-top: 12px; font-family: 'Nunito', system-ui, sans-serif; }

/* Wrong passcode: shake the card */
.gate-card.shake { animation: gateShake 0.45s var(--ease-out-quart, ease-out); }
@keyframes gateShake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
  50%      { transform: translateX(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .gate::before, .gate::after, .gate-icon, .gate-card { animation: none; }
}

#lock-btn { font-size: 15px; }