:root {
  color-scheme: dark;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #020711;
  color: #f5ead0;
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  min-height: 100%;
  margin: 0;
  overflow: hidden;
  background: #020711;
}

button, a { font: inherit; }

.citadel-gate {
  position: relative;
  isolation: isolate;
  min-height: 100svh;
  overflow: hidden;
  background: #020711;
}

.cerberose-keyart {
  position: absolute;
  z-index: -3;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 52%;
  animation: gate-reveal 1.6s cubic-bezier(.2,.8,.2,1) both;
}

.scene-shade {
  position: absolute;
  z-index: -2;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(0, 5, 18, .48) 0%, transparent 26%, transparent 64%, rgba(0, 3, 12, .82) 100%),
    radial-gradient(circle at 50% 47%, transparent 30%, rgba(0, 5, 19, .34) 72%, rgba(0, 2, 9, .78) 100%);
  pointer-events: none;
}

.world-mark {
  position: absolute;
  top: max(24px, env(safe-area-inset-top));
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 3px;
  translate: -50% 0;
  text-align: center;
  text-shadow: 0 3px 16px #000;
}

.world-mark > span {
  color: #69d9ff;
  font-size: clamp(.8rem, 1.1vw, 1.05rem);
  filter: drop-shadow(0 0 12px #20b9ff);
}

.world-mark strong {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(.9rem, 1.35vw, 1.35rem);
  letter-spacing: .34em;
  white-space: nowrap;
}

.world-mark small,
.guardian-copy p,
footer {
  color: #9ccde0;
  font-weight: 700;
  letter-spacing: .24em;
}

.world-mark small { font-size: clamp(.46rem, .55vw, .64rem); }

.guardian-copy {
  position: absolute;
  right: 0;
  bottom: clamp(44px, 7vh, 86px);
  left: 0;
  display: grid;
  justify-items: center;
  padding: 0 20px;
  text-align: center;
  text-shadow: 0 4px 20px #000, 0 1px 2px #000;
}

.guardian-copy p {
  margin: 0 0 5px;
  font-size: clamp(.52rem, .68vw, .75rem);
}

.guardian-copy h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 6.3vw, 6.8rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: .18em;
  background: linear-gradient(180deg, #fff7dd 8%, #e6c174 44%, #926029 95%);
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #4c250d) drop-shadow(0 0 20px rgba(67, 184, 255, .23));
}

.sigil {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(350px, 64vw);
  margin: 10px 0 13px;
  color: #69d9ff;
}

.sigil i {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b58a45 48%, #65cfff);
}

.sigil i:last-child { rotate: 180deg; }
.sigil span { filter: drop-shadow(0 0 8px #1abaff); }

.guardian-copy a {
  min-width: min(280px, 82vw);
  padding: 12px 22px;
  border: 1px solid rgba(126, 216, 255, .76);
  color: #eaf9ff;
  background: linear-gradient(180deg, rgba(12, 58, 105, .82), rgba(3, 17, 42, .92));
  box-shadow: inset 0 0 0 1px rgba(225, 183, 100, .26), 0 0 28px rgba(28, 168, 255, .18);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .2em;
  text-decoration: none;
  clip-path: polygon(12px 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 12px 100%, 0 50%);
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}

.guardian-copy a:is(:hover, :focus-visible) {
  outline: none;
  filter: brightness(1.26);
  transform: translateY(-2px);
  box-shadow: inset 0 0 0 1px rgba(255, 214, 129, .45), 0 0 38px rgba(40, 187, 255, .4);
}

footer {
  position: absolute;
  right: 22px;
  bottom: max(14px, env(safe-area-inset-bottom));
  left: 22px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: rgba(181, 211, 225, .64);
  font-size: clamp(.42rem, .52vw, .57rem);
}

@keyframes gate-reveal {
  from { opacity: 0; scale: 1.035; filter: brightness(.55); }
  to { opacity: 1; scale: 1; filter: brightness(1); }
}

@media (max-aspect-ratio: 4/5) {
  .cerberose-keyart { object-position: 50% 48%; }
  .guardian-copy { bottom: clamp(55px, 9vh, 92px); }
  .guardian-copy h1 { font-size: clamp(2.35rem, 12vw, 4.8rem); letter-spacing: .1em; }
  .world-mark strong { letter-spacing: .24em; }
}

@media (prefers-reduced-motion: reduce) {
  .cerberose-keyart { animation: none; }
  .guardian-copy a { transition: none; }
}