/* The backlit gate. The castle night comes from the shared site sheet. */
#glitter {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 4;
}

.gate-main {
  min-height: calc(100vh - 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 1rem;
}

.sky-brand { text-align: center; }

.brand-mark {
  margin: 0;
  font-family: "Cinzel Decorative", Cinzel, serif;
  font-size: clamp(1.6rem, 4.6vw, 2.7rem);
  letter-spacing: 0.14em;
  background: linear-gradient(180deg, #fff 0%, #d5ccff 42%, #9b8cff 72%, #e8d090 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 14px rgba(155, 140, 255, 0.55));
}

.sky-rule {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-top: 0.35rem;
  color: #e8d090;
}

.sky-rule i {
  width: min(120px, 22vw);
  height: 1px;
  background: linear-gradient(90deg, transparent, #b8a8ff, #e8d090);
}

.sky-rule i:last-child { transform: scaleX(-1); }

.gate {
  width: min(480px, 100%);
  position: relative;
  padding: 1.15rem 1.7rem 1.2rem;
  background: linear-gradient(180deg, rgba(18, 12, 32, 0.92), rgba(6, 4, 14, 0.94));
  border: 1px solid rgba(232, 208, 144, 0.75);
  box-shadow:
    0 0 0 5px rgba(6, 4, 14, 0.92),
    0 0 0 6px rgba(155, 140, 255, 0.8),
    0 0 0 10px rgba(63, 122, 78, 0.55),
    0 28px 60px rgba(0, 0, 0, 0.55);
}

.boss { position: absolute; width: 22px; height: 22px; pointer-events: none; }
.boss.tl { top: 6px; left: 6px; }
.boss.tr { top: 6px; right: 6px; transform: scaleX(-1); }
.boss.bl { bottom: 6px; left: 6px; transform: scaleY(-1); }
.boss.br { bottom: 6px; right: 6px; transform: scale(-1); }

.vine { position: absolute; top: 36px; bottom: 28px; width: 16px; pointer-events: none; }
.vine.left { left: 5px; }
.vine.right { right: 5px; transform: scaleX(-1); }

.crest { display: flex; align-items: center; justify-content: center; gap: 0.7rem; margin-bottom: 0.15rem; }
.crest svg { width: 46px; height: 46px; }

.gate h1 {
  margin: 0;
  text-align: center;
  font-family: UnifrakturMaguntia, Fraktur, serif;
  font-weight: 400;
  font-size: 2.7rem;
  line-height: 0.95;
  color: #fffaf0;
  text-shadow: 0 2px 10px #000;
}

.plate { display: flex; align-items: center; gap: 0.45rem; margin: 0.45rem 0 0.7rem; }
.plate b { flex: 1; height: 3px; background: #e8d090; }
.plate s { flex: 1; height: 1px; background: #b8a8ff; text-decoration: none; }
.plate span {
  font-family: Cinzel, serif;
  font-size: 0.62rem;
  letter-spacing: 0.22em;
  color: #a8c8ff;
}

.gate .lede {
  margin: 0 0 0.85rem;
  text-align: center;
  font-style: italic;
  font-size: 1.12rem;
  color: #efe8ff;
}

.gate label {
  display: block;
  margin: 0 0 0.62rem;
  font-family: Cinzel, serif;
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #e8d090;
}

.gate input {
  display: block;
  width: 100%;
  margin-top: 0.28rem;
  padding: 0.62rem 0.7rem;
  border: 1px solid rgba(168, 200, 255, 0.55);
  background: #07060e;
  color: #fff;
  font: 17px "Cormorant Garamond", Georgia, serif;
  letter-spacing: 0;
  text-transform: none;
  box-shadow: inset 0 0 0 1px rgba(155, 140, 255, 0.25);
}

.gate input:focus { outline: 2px solid #9b8cff; outline-offset: 1px; }
.gate input[type="password"] { color: transparent; text-shadow: 0 0 0 #fff; letter-spacing: 0.28em; }
.gate input[type="password"]::placeholder { color: #efe8ff; letter-spacing: 0.28em; }

.gate button {
  width: 100%;
  margin-top: 0.15rem;
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  border: 1px solid #e8d090;
  background: linear-gradient(180deg, #3a2c68, #1a1430);
  color: #fffaf0;
  font-family: Cinzel, serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-size: 0.78rem;
  box-shadow: inset 0 0 0 1px rgba(155, 140, 255, 0.45), 0 0 18px rgba(155, 140, 255, 0.2);
}

.gate button:hover { background: linear-gradient(180deg, #4a3880, #221838); }

.foot {
  display: flex;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 0.7rem;
  color: #8fbf7a;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
}

.gate .err { color: #f0c0c8; text-align: center; font-size: 1.05rem; }
.vitals { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.4rem; margin: 0.6rem 0; text-align: center; color: #efe8ff; }
.vitals b { display: block; font-family: Cinzel, serif; font-size: 1.05rem; }
.vitals span { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.gate code { color: #d5ccff; }
#accThrone {
  display: block;
  margin: 0.35rem 0 0.7rem;
  text-align: center;
  color: #e8d090;
  font-family: Cinzel, serif;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 0.78rem;
  text-decoration: none;
}
#accThrone[hidden] { display: none; }