/* MyMappi v702 — centered quick capture and cinematic Life Chapter travel. */

/* Quick-place media should read as one centered action, never a half-empty row. */
html body .app-shell #memoryForm.is-save-for-later .memory-media-dropzone-actions,
html body main.app-shell #memoryForm.is-save-for-later .memory-media-dropzone-actions {
  grid-template-columns: minmax(0, 1fr) !important;
  width: min(100%, 238px) !important;
  margin-inline: auto !important;
  justify-self: center !important;
}

html body .app-shell #memoryForm.is-save-for-later #memoryPhotoPickButton,
html body main.app-shell #memoryForm.is-save-for-later #memoryPhotoPickButton {
  width: 100% !important;
  min-width: 0 !important;
  justify-self: center !important;
  text-align: center !important;
  line-height: 1.12 !important;
}

html body .app-shell #memoryForm.is-save-for-later .memory-media-preview,
html body main.app-shell #memoryForm.is-save-for-later .memory-media-preview {
  display: grid !important;
  width: 100% !important;
  justify-items: center !important;
}

.saved-place-media-placeholder {
  display: grid;
  width: min(100%, 370px);
  grid-template-columns: 44px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
  padding: 12px 13px;
  border: 1px solid rgba(177, 107, 42, 0.16);
  border-radius: 17px;
  color: #244d50;
  text-align: left;
  background:
    radial-gradient(circle at 9% 0%, rgba(218, 157, 79, 0.17), transparent 42%),
    linear-gradient(145deg, rgba(255, 252, 245, 0.96), rgba(241, 250, 246, 0.94));
  box-shadow:
    0 12px 28px rgba(70, 54, 30, 0.08),
    inset 0 1px rgba(255, 255, 255, 0.82);
}

.saved-place-media-placeholder-mark {
  display: grid;
  width: 44px;
  height: 44px;
  place-items: center;
  border-radius: 14px;
  color: #fff;
  background: linear-gradient(145deg, #9c612a, #ce9348);
  box-shadow: 0 10px 20px rgba(143, 83, 28, 0.2);
}

.saved-place-media-placeholder-mark svg {
  width: 19px;
  height: 19px;
}

.saved-place-media-placeholder-copy {
  display: grid;
  min-width: 0;
  gap: 2px;
}

.saved-place-media-placeholder-copy small {
  color: #9a652f;
  font-size: 0.56rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.saved-place-media-placeholder-copy strong {
  overflow: hidden;
  color: #173f43;
  font-size: 0.84rem;
  font-weight: 900;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.saved-place-media-placeholder-copy em {
  display: -webkit-box;
  overflow: hidden;
  color: #6d6555;
  font-size: 0.68rem;
  font-style: normal;
  font-weight: 720;
  line-height: 1.35;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

/* Keep the map warm and story-like while lower-resolution tiles load. */
.map-stage.chapter-journey-active #map {
  background:
    radial-gradient(circle at 50% 45%, #174d54, #071e2b 72%) !important;
}

.map-stage.chapter-journey-traveling #map canvas,
.map-stage.chapter-journey-arriving #map canvas {
  filter: saturate(1.34) contrast(1.08) brightness(0.9) sepia(0.045);
  transition: filter 650ms ease;
}

.chapter-journey-atmosphere {
  position: absolute;
  z-index: 6;
  inset: 0;
  display: block;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 48%, rgba(255, 229, 165, 0.05) 0 18%, rgba(4, 55, 56, 0.12) 54%, rgba(3, 18, 27, 0.48)),
    linear-gradient(180deg, rgba(4, 66, 64, 0.2), transparent 38%, rgba(5, 29, 40, 0.34));
  transition: opacity 520ms ease;
}

.chapter-journey-atmosphere[hidden] {
  display: none !important;
}

.map-stage.chapter-journey-traveling .chapter-journey-atmosphere,
.map-stage.chapter-journey-arriving .chapter-journey-atmosphere {
  opacity: 1;
}

.chapter-journey-atmosphere-glow {
  position: absolute;
  width: 46vw;
  height: 46vw;
  border-radius: 50%;
  filter: blur(54px);
  opacity: 0.2;
  background: #51d1ae;
  animation: chapter-atmosphere-drift 5.8s ease-in-out infinite alternate;
}

.chapter-journey-atmosphere .glow-one {
  top: -20vw;
  left: -9vw;
}

.chapter-journey-atmosphere .glow-two {
  right: -12vw;
  bottom: -22vw;
  background: #e8bd68;
  animation-delay: -2.2s;
}

.chapter-journey-atmosphere-grain {
  position: absolute;
  inset: 0;
  opacity: 0.1;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.72) 0 0.7px, transparent 0.9px);
  background-size: 10px 10px;
  mix-blend-mode: soft-light;
}

.memory-peek-card.story-mode-card.story-mode-transit {
  border-color: rgba(140, 231, 202, 0.3);
  background:
    radial-gradient(circle at 16% 0%, rgba(87, 213, 174, 0.22), transparent 48%),
    linear-gradient(145deg, rgba(6, 31, 41, 0.97), rgba(9, 72, 67, 0.93));
  box-shadow:
    0 28px 72px rgba(0, 16, 26, 0.38),
    0 0 0 6px rgba(72, 205, 166, 0.07);
}

html body .app-shell .map-stage.chapter-journey-traveling.map-detail-quiet .memory-peek-card.story-mode-transit.show,
html body main.app-shell .map-stage.chapter-journey-traveling.map-detail-quiet .memory-peek-card.story-mode-transit.show,
html body .app-shell .map-stage.chapter-journey-arriving.map-detail-quiet .memory-peek-card.story-mode-chapter-stop.show,
html body main.app-shell .map-stage.chapter-journey-arriving.map-detail-quiet .memory-peek-card.story-mode-chapter-stop.show {
  z-index: 40 !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none !important;
  transform: translateX(50%) translateY(0) scale(1) !important;
}

.memory-peek-card.story-mode-transit .peek-pin {
  animation: chapter-traveler-pulse 1.25s ease-in-out infinite alternate;
}

.chapter-journey-traveler-marker {
  pointer-events: none !important;
}

.chapter-journey-traveler-marker > span {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  color: #0d685a;
  font-size: 1rem;
  background: linear-gradient(145deg, #fff9d6, #9be9d0);
  box-shadow:
    0 0 0 7px rgba(86, 218, 178, 0.14),
    0 12px 26px rgba(0, 25, 30, 0.28);
  animation: chapter-traveler-pulse 1.15s ease-in-out infinite alternate;
}

.chapter-journey-route-stop {
  box-shadow: 0 0 0 7px rgba(63, 207, 168, 0.14) !important;
}

.chapter-journey-route-glow {
  filter: drop-shadow(0 0 7px rgba(171, 255, 231, 0.72));
}

.chapter-journey-route-core,
.chapter-journey-route-dash {
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chapter-journey-route-dash {
  animation: chapter-route-drift 1.05s linear infinite;
}

@keyframes chapter-atmosphere-drift {
  from { transform: translate3d(-2%, -2%, 0) scale(0.94); }
  to { transform: translate3d(6%, 5%, 0) scale(1.08); }
}

@keyframes chapter-traveler-pulse {
  from { transform: translateY(1px) scale(0.96); }
  to { transform: translateY(-2px) scale(1.04); }
}

@keyframes chapter-route-drift {
  to { stroke-dashoffset: -30; }
}

@media (max-width: 640px) {
  .saved-place-media-placeholder {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 10px;
    padding: 11px;
  }

  .saved-place-media-placeholder-mark {
    width: 40px;
    height: 40px;
  }

  .chapter-journey-atmosphere-glow {
    width: 74vw;
    height: 74vw;
  }
}

@media (prefers-reduced-motion: reduce) {
  .chapter-journey-atmosphere,
  .chapter-journey-atmosphere-glow,
  .chapter-journey-traveler-marker > span,
  .chapter-journey-route-dash,
  .memory-peek-card.story-mode-transit .peek-pin {
    animation: none !important;
    transition: none !important;
  }
}