/* ============================================================
   gate.css — Password lock screen
   KAT SYC Availability Calendar
   ============================================================ */

#gate {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #FAF9F6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  transition: opacity 0.5s ease;
}

#gate.fade-out {
  opacity: 0;
  pointer-events: none;
}

.gate-lock {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.3;
}

.gate-logo {
  font-family: 'DM Serif Display', serif;
  font-size: clamp(2rem, 6vw, 3.2rem);
  font-weight: 400;
  color: #2D5A3D;
  letter-spacing: -0.01em;
  margin-bottom: 0.3rem;
}

.gate-sub {
  font-size: 0.82rem;
  color: #7A7970;
  font-weight: 300;
  margin-bottom: 2.5rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.gate-box {
  background: #FFFFFF;
  border: 1px solid #E5E3DC;
  border-radius: 16px;
  padding: 2rem 2rem 1.75rem;
  width: 100%;
  max-width: 340px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.gate-label {
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7A7970;
}

.gate-input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.95rem;
  background: #FAF9F6;
  border: 1px solid #E5E3DC;
  border-radius: 8px;
  color: #1C1C1A;
  outline: none;
  transition: border-color 0.15s;
}

.gate-input:focus {
  border-color: #2D5A3D;
}

.gate-input.shake {
  animation: shake 0.35s ease;
  border-color: #A82B1A !important;
}

@keyframes shake {
  0%,  100% { transform: translateX(0); }
  20%        { transform: translateX(-6px); }
  40%        { transform: translateX(6px); }
  60%        { transform: translateX(-4px); }
  80%        { transform: translateX(4px); }
}

.gate-btn {
  width: 100%;
  padding: 0.75rem;
  background: #2D5A3D;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.gate-btn:hover  { background: #24492f; }
.gate-btn:active { transform: scale(0.98); }

.gate-error {
  font-size: 0.78rem;
  color: #A82B1A;
  text-align: center;
  min-height: 1rem;
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  #gate           { background: #141412; }
  .gate-logo      { color: #5BAF7A; }
  .gate-sub       { color: #9A9890; }
  .gate-box       { background: #1E1E1B; border-color: #2E2D28; }
  .gate-input     { background: #141412; border-color: #2E2D28; color: #F0EEE8; }
  .gate-input:focus { border-color: #5BAF7A; }
  .gate-btn       { background: #3D7A53; }
  .gate-btn:hover { background: #2D5A3D; }
}