/* gate.css — OTP identity gate for the Junior Achievement of Greater Miami
   whiteboarding site. Chalkboard palette + type; tokens/fonts come from styles.css. */

#siteRoot[aria-hidden="true"] { display: none; }

#gate {
  position: fixed; inset: 0; z-index: 2147483647;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(60% 40% at 30% 20%, rgba(243,239,228,.05), transparent 60%),
    radial-gradient(130% 120% at 50% 0%, #264A57, #1E3A45 45%, #152A32 100%);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  padding: 24px; color: #F3EFE4;
}
#gate::after { /* wood frame to match the board */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border: 14px solid transparent;
  border-image: linear-gradient(135deg,#C08A56,#6B451F 40%,#8A5A34 70%,#C08A56) 1;
  box-shadow: inset 0 0 26px rgba(0,0,0,.4);
}

.gate-card { width: min(460px, 92vw); text-align: center; position: relative; z-index: 1; }
.gate-mark { margin: 0 auto 20px; }
.gate-ey {
  font-family: "Caveat", cursive; font-weight: 700;
  font-size: 1.35rem; letter-spacing: .01em; color: #5FCAD4; margin-bottom: 14px;
}
.gate-card h2 {
  font-family: "Kalam", "Comic Sans MS", cursive; font-weight: 700;
  font-size: 2rem; color: #F3EFE4; margin: 0 0 12px; line-height: 1.05;
  text-shadow: 0 0 1px rgba(255,255,255,.16), 0 2px 0 rgba(0,0,0,.16);
}
.gate-card p { font-size: 14px; line-height: 1.6; color: rgba(243,239,228,.66); margin: 0 0 22px; }
.gate-card p strong { color: #F3EFE4; font-weight: 700; }
.gate-hint { color: rgba(243,239,228,.45); }

.gate-card form { display: flex; gap: 8px; }
.gate-card input {
  flex: 1; min-width: 0; background: rgba(243,239,228,.06);
  border: 1.6px dashed rgba(243,239,228,.34); border-radius: 8px;
  padding: 13px 15px; color: #F3EFE4; font-size: 14px; outline: none;
  transition: border-color .15s ease; font-family: inherit;
}
#codeInput {
  text-align: center; letter-spacing: .5em; font-size: 20px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.gate-card input::placeholder { color: rgba(243,239,228,.4); letter-spacing: normal; }
.gate-card input:focus { border-color: #5FCAD4; border-style: solid; }

.gate-card button[type="submit"] {
  background: #5FCAD4; color: #152A32; border: none; border-radius: 8px;
  padding: 0 22px; height: 48px; font-weight: 700; font-size: 1.1rem;
  cursor: pointer; white-space: nowrap; font-family: "Kalam", "Comic Sans MS", cursive;
  transition: background .15s ease, transform .15s ease;
}
.gate-card button[type="submit"]:hover:not(:disabled) { background: #8FE0E8; transform: translateY(-1px); }
.gate-card button:disabled { opacity: .55; cursor: default; }

.gate-msg { color: #F0A488; font-size: 12.5px; margin-top: 14px; min-height: 16px; line-height: 1.5; }
.gate-msg.ok { color: #5FCAD4; }

.gate-link {
  background: none; border: none; color: rgba(243,239,228,.55);
  font-size: 1.05rem; cursor: pointer; margin: 16px 10px 0; text-decoration: underline;
  font-family: "Caveat", cursive; font-weight: 700; padding: 0;
}
.gate-link:hover { color: #E9E85B; }

.gate-ft {
  margin-top: 30px; font-family: "Caveat", cursive; font-weight: 700;
  font-size: 1.05rem; letter-spacing: .02em; color: rgba(243,239,228,.4);
}

.gate-card button:focus-visible, .gate-card input:focus-visible, .gate-link:focus-visible {
  outline: 2px solid #5FCAD4; outline-offset: 3px;
}

@keyframes gateShake { 10%,90%{transform:translateX(-2px)} 30%,70%{transform:translateX(4px)} 50%{transform:translateX(-6px)} }
.gate-card.shake { animation: gateShake .4s ease; }
@media (prefers-reduced-motion: reduce) { .gate-card.shake { animation: none; } }