.gate-hub-view,
.og-labyrinth {
  min-width: 0;
}

.gate-hub-view {
  display: grid;
  gap: 18px;
}

.gate-hub-view[hidden],
.og-labyrinth[hidden],
.og-labyrinth-doors[hidden],
.og-labyrinth-final[hidden],
.og-labyrinth-home[hidden] {
  display: none !important;
}

.gate-hub-modal {
  transition: width 320ms ease, max-width 320ms ease;
}

.gate-hub-modal.is-labyrinth-open {
  width: min(1120px, 96vw);
  max-width: 1120px;
  padding: clamp(12px, 2vw, 24px);
  overflow: hidden;
  background: #090707;
}

.gate-hub-modal.is-labyrinth-open > .modal-close {
  z-index: 8;
  border-color: color-mix(in srgb, var(--og-accent, #f3c65d) 45%, transparent);
  background: rgba(7, 5, 7, 0.72);
  color: #fff5dc;
  backdrop-filter: blur(12px);
}

.og-labyrinth {
  --og-realm-hue: 39;
  --og-secondary-hue: 114;
  --og-accent: #f6c768;
  --og-accent-two: #8b3d2f;
  --og-glow-x: 52%;
  --og-glow-y: 22%;
  --og-scene-rotation: 0deg;
  position: relative;
  isolation: isolate;
  display: grid;
  width: 100%;
  max-height: min(88vh, 850px);
  gap: clamp(12px, 2vw, 22px);
  padding: clamp(16px, 3vw, 34px);
  overflow: auto;
  border: 1px solid color-mix(in srgb, var(--og-accent) 42%, transparent);
  border-radius: 24px;
  color: #fff9e9;
  background:
    radial-gradient(circle at var(--og-glow-x) var(--og-glow-y), hsl(var(--og-realm-hue) 78% 54% / 0.22), transparent 31%),
    radial-gradient(circle at calc(100% - var(--og-glow-x)) 88%, hsl(var(--og-secondary-hue) 72% 52% / 0.14), transparent 36%),
    linear-gradient(138deg, hsl(var(--og-realm-hue) 31% 10% / 0.98), #09070b 52%, hsl(var(--og-secondary-hue) 35% 8% / 0.98));
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.035),
    inset 0 0 80px rgba(0, 0, 0, 0.5),
    0 26px 80px rgba(0, 0, 0, 0.5);
  scrollbar-color: color-mix(in srgb, var(--og-accent) 62%, #3d3020) rgba(0, 0, 0, 0.2);
}

.og-labyrinth::before,
.og-labyrinth::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
}

.og-labyrinth::before {
  inset: 0;
  opacity: 0.62;
  background-image:
    radial-gradient(circle, color-mix(in srgb, var(--og-accent) 75%, white) 0 1px, transparent 1.5px),
    radial-gradient(circle, rgba(255, 255, 255, 0.45) 0 0.7px, transparent 1.2px);
  background-position: 0 0, 33px 46px;
  background-size: 79px 79px, 113px 113px;
  mask-image: linear-gradient(to bottom, black, transparent 88%);
}

.og-labyrinth::after {
  width: min(70vw, 720px);
  aspect-ratio: 1;
  left: 50%;
  top: 5%;
  border: 1px solid color-mix(in srgb, var(--og-accent) 20%, transparent);
  border-radius: 50%;
  background:
    linear-gradient(90deg, transparent 49.8%, color-mix(in srgb, var(--og-accent) 12%, transparent) 50%, transparent 50.2%),
    linear-gradient(transparent 49.8%, color-mix(in srgb, var(--og-accent) 12%, transparent) 50%, transparent 50.2%);
  box-shadow:
    0 0 0 44px color-mix(in srgb, var(--og-accent) 3%, transparent),
    0 0 0 45px color-mix(in srgb, var(--og-accent) 12%, transparent),
    0 0 120px color-mix(in srgb, var(--og-accent) 15%, transparent);
  opacity: 0.58;
  transform: translateX(-50%) rotate(var(--og-scene-rotation));
}

.og-labyrinth-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(150px, auto) 1fr minmax(96px, auto);
  gap: 14px;
  align-items: center;
  padding-right: 42px;
}

.og-labyrinth-back,
.og-labyrinth-home {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid color-mix(in srgb, var(--og-accent) 42%, transparent);
  border-radius: 999px;
  background: rgba(7, 5, 7, 0.62);
  color: #fff3d5;
  font: inherit;
  font-size: 0.76rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.og-labyrinth-home {
  justify-self: end;
}

.og-labyrinth-back:hover,
.og-labyrinth-home:hover,
.og-labyrinth-back:focus-visible,
.og-labyrinth-home:focus-visible {
  border-color: var(--og-accent);
  outline: 3px solid color-mix(in srgb, var(--og-accent) 18%, transparent);
  background: color-mix(in srgb, var(--og-accent) 12%, rgba(7, 5, 7, 0.82));
}

.og-labyrinth-route {
  min-width: 0;
  text-align: center;
}

.og-labyrinth-kicker {
  display: block;
  overflow: hidden;
  color: var(--og-accent);
  font-size: 0.68rem;
  font-weight: 950;
  letter-spacing: 0.2em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.og-labyrinth-breadcrumb {
  display: flex;
  min-height: 22px;
  justify-content: center;
  align-items: center;
  gap: 7px;
  margin-top: 3px;
  overflow: hidden;
  color: rgba(255, 245, 221, 0.58);
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.73rem;
  white-space: nowrap;
}

.og-labyrinth-crumb[aria-current="page"] {
  color: #fff4d8;
}

.og-labyrinth-crumb-separator {
  color: var(--og-accent);
}

.og-labyrinth-intro {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  max-width: 740px;
  margin: 0 auto;
  text-align: center;
}

.og-labyrinth-seal {
  display: grid;
  width: 62px;
  aspect-ratio: 1;
  place-items: center;
  margin-bottom: 10px;
  border: 1px solid color-mix(in srgb, var(--og-accent) 74%, white 4%);
  border-radius: 50%;
  background:
    radial-gradient(circle, color-mix(in srgb, var(--og-accent) 20%, #15100b) 0 45%, #090707 47% 64%, color-mix(in srgb, var(--og-accent) 72%, #442e13) 66% 69%, #0d0908 71%);
  box-shadow: 0 0 34px color-mix(in srgb, var(--og-accent) 24%, transparent), inset 0 0 18px rgba(0, 0, 0, 0.68);
  color: var(--og-accent);
  font-family: Georgia, serif;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.og-labyrinth-glyph {
  position: absolute;
  top: 21px;
  margin-left: 76px;
  color: color-mix(in srgb, var(--og-accent-two) 80%, white 12%);
  font-size: 1rem;
  filter: drop-shadow(0 0 10px currentColor);
}

.og-labyrinth-intro h2 {
  margin: 0;
  color: #fff8e8;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.65rem, 4vw, 3rem);
  line-height: 1.04;
  letter-spacing: 0.015em;
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.8);
}

.og-labyrinth-intro p {
  max-width: 670px;
  margin: 9px 0 0;
  color: rgba(255, 245, 222, 0.72);
  font-size: clamp(0.86rem, 1.6vw, 1rem);
  line-height: 1.55;
}

.og-labyrinth-doors {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(10px, 1.8vw, 20px);
  align-items: end;
  perspective: 1100px;
}

.og-secret-door {
  position: relative;
  display: grid;
  min-width: 0;
  gap: 11px;
  padding: 8px 8px 13px;
  border: 1px solid transparent;
  border-radius: 18px;
  background: transparent;
  color: #fff5df;
  font: inherit;
  cursor: pointer;
  transform: translateY(0);
  transition: transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.og-secret-door:hover,
.og-secret-door:focus-visible {
  border-color: color-mix(in srgb, var(--og-accent) 38%, transparent);
  outline: none;
  background: color-mix(in srgb, var(--og-accent) 6%, rgba(8, 6, 8, 0.28));
  transform: translateY(-7px);
}

.og-secret-door:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--og-accent) 20%, transparent);
}

.og-secret-door-frame {
  position: relative;
  display: block;
  width: min(100%, 172px);
  aspect-ratio: 0.69;
  justify-self: center;
  padding: 9px;
  border: 1px solid color-mix(in srgb, var(--og-accent) 78%, #5e3e20);
  border-radius: 70px 70px 10px 10px;
  background:
    linear-gradient(90deg, #3c2816, color-mix(in srgb, var(--og-accent) 60%, #5b3415) 22%, #21140d 30% 70%, color-mix(in srgb, var(--og-accent) 55%, #5b3415) 78%, #382414),
    #21140d;
  box-shadow:
    0 18px 30px rgba(0, 0, 0, 0.46),
    0 0 26px hsl(var(--og-door-hue) 78% 58% / 0.12),
    inset 0 0 0 2px rgba(255, 235, 184, 0.09);
}

.og-secret-door-frame::before {
  content: "";
  position: absolute;
  inset: 4px;
  border: 1px solid rgba(255, 236, 195, 0.18);
  border-radius: inherit;
  pointer-events: none;
}

.og-secret-door-frame::after {
  content: "";
  position: absolute;
  left: -8%;
  right: -8%;
  bottom: -8px;
  height: 12px;
  border: 1px solid color-mix(in srgb, var(--og-accent) 48%, #342011);
  border-radius: 50%;
  background: linear-gradient(180deg, #6d4824, #17100b);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.58);
}

.og-secret-door-panel {
  position: relative;
  display: grid;
  width: 100%;
  height: 100%;
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--og-accent) 34%, #22130d);
  border-radius: 58px 58px 4px 4px;
  background:
    radial-gradient(circle at 50% 22%, hsl(var(--og-door-hue) 80% 58% / 0.25), transparent 29%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 20px),
    linear-gradient(112deg, hsl(var(--og-door-hue) 35% 19%), #130d10 46%, hsl(var(--og-door-hue) 38% 13%));
  box-shadow: inset 0 0 30px rgba(0, 0, 0, 0.72), inset 0 0 0 4px rgba(255, 255, 255, 0.025);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 520ms cubic-bezier(0.2, 0.76, 0.25, 1), filter 360ms ease;
}

.og-secret-door-arch {
  position: absolute;
  inset: 12px;
  border: 1px solid color-mix(in srgb, var(--og-accent) 27%, transparent);
  border-radius: 49px 49px 3px 3px;
  box-shadow: inset 0 0 24px rgba(0, 0, 0, 0.42);
}

.og-secret-door-sigil {
  position: absolute;
  top: 22%;
  color: color-mix(in srgb, var(--og-accent) 80%, white 9%);
  font-size: clamp(1.1rem, 2.5vw, 1.85rem);
  text-shadow: 0 0 18px currentColor;
}

.og-secret-door-number {
  display: grid;
  width: 56px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid color-mix(in srgb, var(--og-accent) 45%, transparent);
  border-radius: 50%;
  background: rgba(7, 5, 6, 0.58);
  color: #fff0c9;
  font-family: Georgia, serif;
  font-size: clamp(1rem, 2.8vw, 1.5rem);
  box-shadow: 0 0 0 7px rgba(0, 0, 0, 0.13), inset 0 0 16px rgba(0, 0, 0, 0.62);
}

.og-secret-door-handle {
  position: absolute;
  right: 16%;
  top: 58%;
  width: 10px;
  aspect-ratio: 1;
  border: 1px solid #ffe4a1;
  border-radius: 50%;
  background: var(--og-accent);
  box-shadow: 0 0 11px color-mix(in srgb, var(--og-accent) 72%, transparent);
}

.og-secret-door-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
  text-align: center;
}

.og-secret-door-copy strong {
  overflow: hidden;
  color: #fff6e2;
  font-family: Georgia, serif;
  font-size: clamp(0.94rem, 1.75vw, 1.2rem);
  letter-spacing: 0.025em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.og-secret-door-copy small {
  overflow: hidden;
  color: color-mix(in srgb, var(--og-accent) 58%, rgba(255, 245, 220, 0.64));
  font-size: 0.64rem;
  font-weight: 850;
  letter-spacing: 0.07em;
  text-overflow: ellipsis;
  text-transform: uppercase;
  white-space: nowrap;
}

.og-secret-door.is-opening {
  pointer-events: none;
}

.og-secret-door.is-opening .og-secret-door-panel {
  filter: brightness(1.5) drop-shadow(14px 0 18px color-mix(in srgb, var(--og-accent) 32%, transparent));
  transform: perspective(760px) rotateY(-76deg);
}

.og-secret-door.is-opening .og-secret-door-frame {
  background:
    radial-gradient(ellipse at 50% 48%, color-mix(in srgb, var(--og-accent) 45%, white 18%), transparent 48%),
    #080607;
}

.og-labyrinth.is-transitioning .og-secret-door:not(.is-opening) {
  opacity: 0.3;
  transform: scale(0.97);
}

.og-labyrinth-final {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: clamp(280px, 45vh, 430px);
  place-items: center;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--og-accent) 42%, transparent);
  border-radius: 22px;
  background:
    radial-gradient(circle at 50% 48%, color-mix(in srgb, var(--og-accent) 22%, transparent), transparent 22%),
    conic-gradient(from 45deg at 50% 50%, transparent, hsl(var(--og-secondary-hue) 65% 45% / 0.08), transparent 20%, hsl(var(--og-realm-hue) 75% 50% / 0.11), transparent 42%),
    rgba(4, 4, 6, 0.55);
  box-shadow: inset 0 0 90px rgba(0, 0, 0, 0.64), 0 18px 44px rgba(0, 0, 0, 0.34);
}

.og-labyrinth-final::before,
.og-labyrinth-final::after {
  content: "";
  position: absolute;
  width: min(52vw, 420px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--og-accent) 36%, transparent);
  transform: rotate(45deg);
}

.og-labyrinth-final::after {
  width: min(34vw, 280px);
  border-color: color-mix(in srgb, var(--og-accent-two) 45%, transparent);
  transform: rotate(45deg) skew(8deg, 8deg);
}

.og-labyrinth-final-card {
  position: relative;
  z-index: 1;
  display: grid;
  max-width: 520px;
  justify-items: center;
  gap: 12px;
  padding: clamp(22px, 5vw, 48px);
  text-align: center;
}

.og-labyrinth-final-glyph {
  color: var(--og-accent);
  font-size: clamp(3.5rem, 10vw, 6.5rem);
  line-height: 1;
  text-shadow: 0 0 38px color-mix(in srgb, var(--og-accent) 48%, transparent);
}

.og-labyrinth-final-card strong {
  color: #fff7e5;
  font-family: Georgia, serif;
  font-size: clamp(1.45rem, 4vw, 2.5rem);
  letter-spacing: 0.04em;
}

.og-labyrinth-final-card span:last-child {
  color: rgba(255, 245, 222, 0.67);
  line-height: 1.55;
}

.og-labyrinth-footer {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: 8px 18px;
  flex-wrap: wrap;
  color: rgba(255, 245, 224, 0.48);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.og-labyrinth-footer strong {
  color: var(--og-accent);
}

@media (max-width: 780px) {
  .gate-hub-modal.is-labyrinth-open {
    width: min(96vw, 720px);
    max-height: 96vh;
  }

  .og-labyrinth-header {
    grid-template-columns: 1fr auto;
    padding-right: 42px;
  }

  .og-labyrinth-route {
    grid-column: 1 / -1;
    grid-row: 2;
  }

  .og-labyrinth-home {
    grid-column: 2;
    grid-row: 1;
  }

  .og-labyrinth-doors {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .og-secret-door-frame {
    width: min(100%, 160px);
  }
}

@media (max-width: 430px) {
  .gate-hub-modal.is-labyrinth-open {
    width: 98vw;
    padding: 6px;
    border-radius: 16px;
  }

  .og-labyrinth {
    max-height: 94vh;
    gap: 14px;
    padding: 13px 10px 18px;
    border-radius: 15px;
  }

  .og-labyrinth-header {
    gap: 7px;
  }

  .og-labyrinth-back,
  .og-labyrinth-home {
    padding-inline: 10px;
    font-size: 0.61rem;
    letter-spacing: 0.035em;
  }

  .og-labyrinth-doors {
    gap: 8px 5px;
  }

  .og-secret-door {
    gap: 8px;
    padding: 5px 4px 9px;
    border-radius: 12px;
  }

  .og-secret-door-frame {
    width: min(100%, 132px);
    padding: 6px;
    border-radius: 52px 52px 7px 7px;
  }

  .og-secret-door-panel {
    border-radius: 44px 44px 3px 3px;
  }

  .og-secret-door-number {
    width: 44px;
  }

  .og-secret-door-copy small {
    font-size: 0.55rem;
    letter-spacing: 0.025em;
  }

  .og-labyrinth-final {
    min-height: 350px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .gate-hub-modal,
  .og-secret-door,
  .og-secret-door-panel {
    scroll-behavior: auto;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}