/* Actual Water Journey artwork and relationships from the native Ura app. */
.ura-journey-universe {
  --journey-ink: #101827;
  --journey-secondary: #4b586d;
  --journey-accent: #00677d;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center;
  gap: clamp(16px, 4vw, 40px);
  width: 100%;
  padding: clamp(20px, 3vw, 36px);
  border: 1px solid #ffffffd9;
  border-radius: 32px;
  background: linear-gradient(145deg, #e9ecf7, #ccd1e3);
  color: var(--journey-ink);
  font-family: var(--ura-text, 'DM Sans', sans-serif);
  text-align: left;
  isolation: isolate;
}
.ura-journey-universe *, .ura-journey-universe *::before, .ura-journey-universe *::after { box-sizing: border-box; }
.ura-journey-map {
  position: relative;
  width: 100%;
  max-width: 480px;
  min-width: 0;
  aspect-ratio: 1.18;
  margin-inline: auto;
}
.ura-journey-orbit {
  position: absolute;
  left: 50%;
  top: 52%;
  width: 91%;
  height: 66%;
  border: 1px solid #00677d2e;
  border-radius: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  pointer-events: none;
}
.ura-journey-orbit--inner { width: 53%; height: 37%; top: 45%; transform: translate(-50%, -50%) rotate(12deg); }
.ura-journey-system {
  position: absolute;
  left: 50%;
  top: 2%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  gap: 6px;
  width: 120px;
  color: var(--journey-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.4;
}
.ura-journey-system img { display: block; width: 48px; height: 48px; object-fit: contain; }
.ura-journey-planet {
  position: absolute;
  display: grid;
  justify-items: center;
  gap: 8px;
  width: clamp(84px, 21%, 106px);
  padding: 7px 4px;
  margin: 0;
  border: 0;
  border-radius: 20px;
  background: transparent;
  color: var(--journey-secondary);
  font: 600 17px/1.35 var(--ura-text, 'DM Sans', sans-serif);
  text-align: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transform: translate(-50%, -50%);
}
.ura-journey-planet[data-journey-planet="tides"] { left: 23%; top: 41%; }
.ura-journey-planet[data-journey-planet="rivers"] { left: 78%; top: 53%; }
.ura-journey-planet[data-journey-planet="glacier"] { left: 49%; top: 79%; }
.ura-journey-planet[aria-pressed="true"] { color: var(--journey-accent); }
.ura-journey-planet[aria-pressed="true"] .ura-journey-planet-name { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.ura-journey-planet:focus-visible { outline: 3px solid var(--journey-accent); outline-offset: 4px; }
.ura-journey-planet:disabled { cursor: default; opacity: 1; }
.ura-journey-planet-art { position: relative; display: block; width: 100%; aspect-ratio: 1; }
.ura-journey-planet-art > img, .ura-journey-lottie { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.ura-journey-planet-art > img { object-fit: contain; }
.ura-journey-lottie { visibility: hidden; pointer-events: none; }
.ura-journey-lottie > svg { display: block; width: 100%; height: 100%; }
.ura-journey-planet-art[data-lottie-ready="true"] .ura-journey-lottie { visibility: visible; }
.ura-journey-planet-art[data-lottie-ready="true"] > img { visibility: hidden; }
.ura-journey-detail { min-width: 0; }
.ura-journey-detail-image { display: block; width: 132px; height: 132px; object-fit: contain; margin: 0 0 16px; }
.ura-journey-detail h3 { margin: 0 0 12px; color: var(--journey-ink); font: 700 24px/1.2 var(--ura-display, var(--font-title, 'Ura Display', sans-serif)); }
.ura-journey-detail p { margin: 0; color: var(--journey-secondary); font-size: 17px; line-height: 1.55; }
.ura-journey-detail .ura-journey-discovery { margin-top: 16px; color: var(--journey-accent); font-size: 15px; font-weight: 600; line-height: 1.5; }
.ura-journey-instruction { grid-column: 1 / -1; margin: 0; color: var(--journey-secondary); font-size: 13px; line-height: 1.5; text-align: center; }
.ura-journey-fallback { grid-column: 1 / -1; font-size: 15px; line-height: 1.5; }
.ura-journey-fallback p { margin: 0 0 12px; }
@media (max-width: 640px) {
  .ura-journey-universe { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 22px 20px; border-radius: 28px; }
  .ura-journey-map { max-width: 380px; }
  .ura-journey-detail { display: grid; grid-template-columns: 86px minmax(0, 1fr); gap: 0 16px; align-items: start; }
  .ura-journey-detail-image { width: 86px; height: 86px; margin: 0; grid-row: 1 / 4; }
  .ura-journey-detail h3 { font-size: 20px; }
  .ura-journey-detail .ura-journey-discovery { margin-top: 12px; }
}
@media (max-width: 360px) {
  .ura-journey-detail { grid-template-columns: minmax(0, 1fr); }
  .ura-journey-detail-image { width: 92px; height: 92px; margin-bottom: 12px; grid-row: auto; }
}
@media (forced-colors: active) {
  .ura-journey-universe { border: 1px solid CanvasText; }
  .ura-journey-orbit { border-color: GrayText; }
  .ura-journey-planet[aria-pressed="true"] { color: LinkText; }
}
/* Keep planet artwork clear of the Water System label on narrow cards. */
@media(max-width:640px){
  .ura-journey-map{aspect-ratio:1;min-height:290px}
  .ura-journey-planet[data-journey-planet="tides"]{left:20%;top:49%}
  .ura-journey-planet[data-journey-planet="rivers"]{left:80%;top:54%}
  .ura-journey-planet[data-journey-planet="glacier"]{top:79%}
}

.ura-journey-universe .ura-journey-detail .ura-journey-companion{display:block;width:180px;height:150px;object-fit:contain;margin:24px 0 0;grid-column:1/-1}
@media(max-width:700px){.ura-journey-universe .ura-journey-detail .ura-journey-companion{margin-inline:auto}}