/* unlock.css — the padlock card. Transform owners: .ul-card = shake · .ul-shackle = pop open. */

.ul-card { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 30px 22px 24px; }
.ul-card.is-shake { animation: shake .42s ease-in-out; }
.ul-lock { position: relative; width: 54px; height: 60px; margin-bottom: 2px; transition: opacity .3s ease; }
.ul-shackle {
  position: absolute; left: 11px; top: 0; width: 32px; height: 34px;
  border: 6px solid var(--gold-deep); border-bottom: 0; border-radius: 18px 18px 0 0;
  transform-origin: 90% 100%; transition: transform .5s var(--ease-back);
}
.ul-body {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold-hi), var(--gold) 50%, var(--gold-deep));
  box-shadow: 0 6px 14px rgba(120, 80, 0, .3);
}
.ul-body i { position: absolute; left: 50%; top: 10px; width: 8px; height: 12px; margin-left: -4px; border-radius: 4px; background: rgba(90, 50, 0, .55); }
.ul-card.is-open .ul-shackle { transform: translateY(-8px) rotate(-35deg); }
.ul-kicker { font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--rose-700); }
.ul-question { font-size: 22px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.ul-form { display: flex; flex-direction: column; gap: 10px; width: 100%; margin-top: 4px; }
.ul-input {
  width: 100%; height: 52px; padding: 0 16px;
  border: 1.5px solid rgba(122, 18, 51, .22); border-radius: 14px;
  background: #fff; color: var(--ink);
  font: 500 17px/1 var(--font-ui);                  /* ≥16px so iOS doesn't zoom in */
  text-align: center;
  -webkit-appearance: none; appearance: none;
}
.ul-input:focus { outline: none; border-color: var(--rose); box-shadow: 0 0 0 3px rgba(233, 30, 99, .18); }
.ul-submit { width: 100%; }
.ul-submit:disabled { opacity: .75; }
.ul-tease { min-height: 22px; font-size: 16px; font-weight: 600; color: var(--rose-700); }
.ul-tease.is-in { animation: fadeIn .35s ease both; }
.ul-hint { font-size: 15px; color: var(--ink-soft); }
.ul-ask { color: var(--rose-700); }
.ul-card.ul-kb .ul-lock, .ul-card.ul-kb .ul-kicker { display: none; }   /* keyboard up: keep the question visible */
.ul-inner .gf-mini { margin-top: 18px; }

@media (max-height: 560px) { .ul-lock { display: none; } .ul-card { gap: 8px; padding: 22px 18px 18px; } }
@media (prefers-reduced-motion: reduce) { .ul-card.is-shake { animation: none; } .ul-shackle { transition: none; } }