:host {
  display: block;
  min-block-size: 100%;
}

.world-page {
  position: relative;
  min-block-size: 100%;
}

.world-page__scene {
  position: relative;
  isolation: isolate;
  min-block-size: clamp(30rem, 67vh, 44rem);
  overflow: hidden;
  border: 1px solid var(--ar-border);
  background-color: #151718;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  box-shadow: var(--ar-shadow-raised);
}

.world-page__scene::after {
  position: absolute;
  z-index: -1;
  inset: 0;
  content: '';
  background: linear-gradient(180deg, rgb(4 6 8 / 0.1), rgb(4 6 8 / 0.45));
  pointer-events: none;
}

.world-page__atmosphere {
  position: absolute;
  z-index: -1;
  inset: 16% -16%;
  background:
    radial-gradient(circle at 28% 58%, rgb(210 103 47 / 0.24) 0 0.1rem, transparent 0.22rem),
    radial-gradient(circle at 72% 43%, rgb(220 131 56 / 0.2) 0 0.08rem, transparent 0.18rem),
    linear-gradient(90deg, transparent, rgb(183 188 194 / 0.08), transparent);
  opacity: 0.7;
  pointer-events: none;
  animation: world-atmosphere-drift 10s ease-in-out infinite alternate;
}

.world-page__location-title {
  position: absolute;
  inset: var(--ar-space-5) auto auto var(--ar-space-5);
  max-inline-size: calc(100% - 3rem);
  margin: 0;
  color: var(--ar-text);
  font-family: Georgia, 'Times New Roman', serif;
  font-size: clamp(1.35rem, 2.3vw, 2.2rem);
  text-shadow: 0 0.15rem 0.7rem rgb(0 0 0 / 0.9);
}

.world-page__path {
  position: absolute;
  z-index: 1;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
  pointer-events: none;
}

.world-page__path path {
  fill: none;
  stroke: var(--ar-gold);
  stroke-width: 0.55;
  stroke-dasharray: 0.012 0.02;
  filter: drop-shadow(0 0 0.3rem rgb(0 0 0 / 0.85));
  opacity: 0.9;
}

.world-page__node {
  position: absolute;
  z-index: 2;
}

.world-page__node--south-gate {
  inset: 58% auto auto 12%;
}

.world-page__node--burned-road {
  inset: 39% auto auto 60%;
}

.world-page__travel-panel {
  display: block;
  inline-size: min(29rem, 100%);
  margin: var(--ar-space-4) auto 0;
}

.world-page__loading,
.world-page__error,
.world-page__empty {
  margin: var(--ar-space-4) 0 0;
  border: 1px solid var(--ar-border);
  background: var(--ar-panel);
  box-shadow: var(--ar-shadow-raised);
}

.world-page__loading,
.world-page__empty {
  padding: var(--ar-space-4);
  color: var(--ar-text-muted);
}

.world-page__error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ar-space-4);
  padding: var(--ar-space-3) var(--ar-space-4);
  border-color: var(--ar-danger);
}

.world-page__error p {
  margin: 0;
}

.world-page__error button {
  flex: 0 0 auto;
  padding: var(--ar-space-2) var(--ar-space-3);
  border: 1px solid var(--ar-border-highlight);
  border-radius: var(--ar-radius-sm);
  color: var(--ar-text);
  background: #1a2023;
  cursor: pointer;
}

@keyframes world-atmosphere-drift {
  from {
    opacity: 0.35;
    transform: translateX(-2%);
  }

  to {
    opacity: 0.75;
    transform: translateX(2%);
  }
}

@media (width < 720px) {
  .world-page__scene {
    min-block-size: 34rem;
  }

  .world-page__node--south-gate {
    inset-inline-start: 6%;
  }

  .world-page__node--burned-road {
    inset-inline-start: 51%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .world-page__atmosphere {
    animation: none;
  }
}
