/* ══════════════════════════════════════════════════════════
   password.css — Gate screen, Fat Lady, password form,
   door swing transition
══════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   GATE SCREEN — Fat Lady
══════════════════════════════════════════════════════════ */
.gateScreen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  padding: 32px 20px 48px;
  background:
    radial-gradient(ellipse at 50% 30%, rgba(107, 21, 21, 0.22), transparent 60%),
    var(--hp-near-black);
  z-index: 10;
  transition: opacity 600ms ease, visibility 600ms ease;
}

.gateScreen[hidden] {
  display: none;
}

/* Portrait frame */
.fatLadyPortrait {
  position: relative;
  width: min(280px, 72vw);
  aspect-ratio: 0.75;
  flex-shrink: 0;
}

.portraitFrameOuter {
  position: absolute;
  inset: 0;
  border-radius: 8px;
  background:
    linear-gradient(135deg, #8b5e26 0%, #5a3a10 30%, #7a4e1e 60%, #3d2108 100%);
  box-shadow:
    0 0 0 4px #2a1505,
    0 0 0 6px #7a4e1e,
    0 0 0 10px #2a1505,
    0 28px 64px rgba(0,0,0,0.6),
    inset 0 0 12px rgba(0,0,0,0.4);
}

.portraitFrameOuter::before {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 4px;
  border: 2px solid rgba(201,153,60,0.4);
  box-shadow: inset 0 0 8px rgba(0,0,0,0.3);
  pointer-events: none;
}

.portraitFrameInner {
  position: absolute;
  inset: 14px;
  border-radius: 4px;
  overflow: hidden;
  background: linear-gradient(180deg, #3d1a0e 0%, #1e0d09 100%);
}

.portraitCanvas {
  position: relative;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(ellipse at 50% 80%, rgba(80, 35, 10, 0.9), rgba(20, 8, 4, 1) 70%);
  overflow: hidden;
}

.fatLadyImage {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Fat Lady CSS-art figure ─────────────────────────────── */
.fatLadyFigure {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 82%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fatLadyHead {
  position: relative;
  width: 54%;
  aspect-ratio: 1;
  flex-shrink: 0;
}

.fatLadyFace {
  position: absolute;
  inset: 14% 8% 0;
  border-radius: 50% 50% 46% 46%;
  background: radial-gradient(circle at 44% 42%, #e8c09a, #c8885a 64%, #a06040 100%);
  box-shadow: inset 0 -6px 14px rgba(80, 40, 10, 0.28);
}

.fatLadyHair {
  position: absolute;
  inset: 0 0 30%;
  border-radius: 50% 50% 0 0;
  background: radial-gradient(circle at 50% 30%, #7a3a18, #3a1808 70%);
}

.fatLadyEye {
  position: absolute;
  top: 30%;
  width: 14%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #1a0c06;
  box-shadow: 0 0 0 2px #3a2010;
}
.fatLadyEyeLeft  { left: 22%; }
.fatLadyEyeRight { right: 22%; }

.fatLadyNose {
  position: absolute;
  top: 44%;
  left: 50%;
  width: 10%;
  height: 8%;
  border-radius: 50%;
  background: rgba(140, 70, 30, 0.4);
  transform: translateX(-50%);
}

.fatLadyMouth {
  position: absolute;
  top: 60%;
  left: 50%;
  width: 28%;
  height: 10%;
  border-radius: 0 0 50% 50%;
  background: #8a3018;
  transform: translateX(-50%);
}

.fatLadyCheek {
  position: absolute;
  top: 48%;
  width: 16%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(220, 100, 80, 0.28);
}
.fatLadyCheekLeft  { left: 8%; }
.fatLadyCheekRight { right: 8%; }

.fatLadyBody {
  position: relative;
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  margin-top: -4%;
}

.fatLadyDress {
  width: 80%;
  aspect-ratio: 0.7;
  border-radius: 8% 8% 50% 50%;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(150, 30, 30, 0.9), rgba(80, 10, 10, 1) 70%);
  box-shadow: inset 0 -12px 24px rgba(0,0,0,0.4);
}

.fatLadyArm {
  position: absolute;
  top: 10%;
  width: 18%;
  height: 50%;
  border-radius: 40%;
  background: linear-gradient(180deg, rgba(150,30,30,0.88), rgba(80,10,10,0.9));
}
.fatLadyArmLeft  { left: 2%; transform: rotate(18deg); }
.fatLadyArmRight { right: 2%; transform: rotate(-18deg); }

/* ── Fat Lady swings open animation ──────────────────────── */
.fatLadyPortrait.is-swinging {
  animation: doorSwingOpen 900ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform-origin: left center;
}

@keyframes doorSwingOpen {
  0%   { transform: perspective(1200px) rotateY(0deg); }
  100% { transform: perspective(1200px) rotateY(-110deg); }
}

/* ── Dialogue ─────────────────────────────────────────────── */
.gateDialogue {
  max-width: 320px;
  text-align: center;
}

.fatLadyDialogueText {
  margin: 0;
  font-family: "Cormorant Garamond", serif;
  font-size: clamp(1.1rem, 3vw, 1.4rem);
  font-style: italic;
  color: var(--hp-gold-light);
  min-height: 2.4em;
}

/* ── Password form ────────────────────────────────────────── */
.passwordForm {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(320px, 92vw);
  animation: fadeSlideUp 320ms ease both;
}

.passwordForm[hidden] { display: none; }

.passwordLabel {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(240, 228, 204, 0.64);
}

.passwordInputRow {
  display: flex;
  width: 100%;
  gap: 0;
}

.passwordInput {
  flex: 1;
  min-width: 0;
  padding: 12px 16px;
  border: 1px solid rgba(201, 153, 60, 0.28);
  border-right: none;
  background: rgba(13, 10, 8, 0.72);
  color: var(--hp-gold-light);
  font: inherit;
  font-size: 1rem;
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  letter-spacing: 0.06em;
  outline: none;
  cursor: none;
  transition: border-color 180ms ease;
}

.passwordInput::placeholder { color: rgba(201, 153, 60, 0.38); }
.passwordInput:focus { border-color: rgba(201, 153, 60, 0.6); }

.passwordSubmit {
  padding: 12px 20px;
  border: 1px solid rgba(201, 153, 60, 0.28);
  background: rgba(107, 21, 21, 0.72);
  color: var(--hp-gold-light);
  font: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: none;
  transition: background 160ms ease, border-color 160ms ease;
  white-space: nowrap;
}

.passwordSubmit:hover {
  background: rgba(139, 32, 32, 0.88);
  border-color: rgba(201, 153, 60, 0.5);
}

.passwordSubmit:focus-visible {
  outline: 2px solid var(--hp-gold);
  outline-offset: 2px;
}

.passwordError {
  margin: 0;
  font-size: 0.84rem;
  color: #e07070;
  text-align: center;
  min-height: 1.4em;
  animation: shake 360ms ease;
}

.passwordError[hidden] { display: none; }

.lockoutMessage {
  max-width: 320px;
  text-align: center;
  font-family: "Cormorant Garamond", serif;
  font-size: 1.1rem;
  font-style: italic;
  color: rgba(240, 228, 204, 0.72);
}

.lockoutMessage[hidden] { display: none; }

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

@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   DOOR SWING TRANSITION
══════════════════════════════════════════════════════════ */
.doorSwing {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  pointer-events: none;
}

.doorSwing[hidden] { display: none; }

.doorSwingLeft,
.doorSwingRight {
  flex: 1;
  background:
    radial-gradient(ellipse at 50% 40%, rgba(80, 35, 10, 0.9), rgba(20, 8, 4, 1) 70%);
  transform-origin: top;
}

.doorSwingLeft  { transform-origin: left center; }
.doorSwingRight { transform-origin: right center; }

.doorSwing.is-open .doorSwingLeft {
  animation: swingLeft 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.doorSwing.is-open .doorSwingRight {
  animation: swingRight 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes swingLeft {
  0%   { transform: perspective(1400px) rotateY(0deg); }
  100% { transform: perspective(1400px) rotateY(-110deg); }
}

@keyframes swingRight {
  0%   { transform: perspective(1400px) rotateY(0deg); }
  100% { transform: perspective(1400px) rotateY(110deg); }
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 640px) {
  .gateScreen { padding: 24px 16px 40px; gap: 20px; }
  .fatLadyPortrait { width: min(220px, 68vw); }
}