/* First Finder Compass Seal — a real, scalable Our Map achievement. */

html body .our-map-badge-card.first-finder-badge-card {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr);
  min-height: 132px;
  align-items: center;
  gap: 14px;
  padding: 14px;
  overflow: hidden;
  border: 1px solid rgba(183, 126, 43, 0.34);
  border-radius: 21px;
  color: #173f43;
  background:
    radial-gradient(circle at 4% 3%, rgba(255, 226, 160, 0.7), transparent 34%),
    radial-gradient(circle at 96% 100%, rgba(29, 174, 146, 0.14), transparent 42%),
    linear-gradient(135deg, #fff9e8 0%, #fffdf8 48%, #edf9f4 100%);
  box-shadow:
    0 14px 28px rgba(7, 63, 77, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

html body .our-map-badge-card.first-finder-badge-card::before {
  position: absolute;
  right: -34px;
  bottom: -48px;
  z-index: -1;
  width: 150px;
  height: 150px;
  content: "";
  border: 1px solid rgba(10, 128, 112, 0.1);
  border-radius: 50%;
  box-shadow:
    0 0 0 20px rgba(10, 128, 112, 0.04),
    0 0 0 43px rgba(10, 128, 112, 0.025);
}

html body .our-map-badge-card.first-finder-badge-card::after {
  position: absolute;
  top: -36px;
  left: 34%;
  z-index: -1;
  width: 46px;
  height: 180px;
  content: "";
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.55), transparent);
  opacity: 0.58;
  transform: rotate(28deg);
}

html body .first-finder-seal {
  position: relative;
  isolation: isolate;
  display: grid;
  width: 88px;
  height: 88px;
  flex: 0 0 auto;
  place-items: center;
  filter: drop-shadow(0 9px 10px rgba(5, 47, 69, 0.22));
}

html body .first-finder-seal-burst {
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: linear-gradient(145deg, #fff0bf 0%, #d9a75e 42%, #a86f24 72%, #f6d98e 100%);
  clip-path: polygon(
    50% 0%, 58% 10%, 68% 4%, 73% 17%, 85% 15%, 84% 29%,
    97% 34%, 89% 44%, 100% 53%, 89% 62%, 96% 74%, 82% 77%,
    82% 91%, 68% 87%, 59% 100%, 50% 90%, 39% 100%, 32% 87%,
    17% 91%, 18% 77%, 4% 73%, 11% 62%, 0% 52%, 11% 43%,
    4% 32%, 18% 28%, 17% 15%, 31% 17%, 40% 3%
  );
}

html body .first-finder-seal-art {
  display: block;
  width: 74px;
  height: 74px;
  overflow: visible;
}

html body .first-finder-seal-rank {
  position: absolute;
  right: -1px;
  bottom: 4px;
  display: grid;
  min-width: 31px;
  height: 24px;
  place-items: center;
  padding: 0 5px;
  border: 2px solid #fff0bf;
  border-radius: 999px;
  color: #ffffff;
  background: linear-gradient(145deg, #bd293e, #8f172b);
  box-shadow: 0 5px 10px rgba(179, 49, 59, 0.26);
  font-family: var(--mymappi-brand-font, ui-rounded, system-ui, sans-serif);
  font-size: 0.6rem;
  font-style: normal;
  font-weight: 950;
  letter-spacing: -0.02em;
  line-height: 1;
}

html body .first-finder-badge-copy {
  position: relative;
  z-index: 1;
  display: grid;
  min-width: 0;
  gap: 5px;
}

html body .first-finder-badge-eyebrow {
  color: #9a681f;
  font-size: 0.58rem;
  font-weight: 920;
  letter-spacing: 0.105em;
  line-height: 1.2;
  text-transform: uppercase;
}

html body .our-map-badge-card.first-finder-badge-card .first-finder-badge-copy > strong {
  display: block;
  color: #073f4d;
  font-family: var(--mymappi-brand-font, ui-rounded, system-ui, sans-serif);
  font-size: 1.04rem;
  font-weight: 930;
  letter-spacing: -0.025em;
  line-height: 1.05;
}

html body .our-map-badge-card.first-finder-badge-card .first-finder-badge-copy > small {
  display: block;
  color: #587375;
  font-size: 0.7rem;
  font-weight: 650;
  line-height: 1.42;
}

html body .first-finder-badge-meta {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  flex-wrap: wrap;
  color: #5c7475;
  font-size: 0.64rem;
  font-weight: 760;
}

html body .first-finder-badge-state {
  display: inline-flex;
  min-height: 24px;
  align-items: center;
  padding: 0 9px;
  border: 1px solid rgba(9, 123, 108, 0.17);
  border-radius: 999px;
  color: #08766d;
  background: rgba(229, 248, 241, 0.9);
  font-size: 0.62rem;
  font-weight: 920;
}

html body .first-finder-badge-card.is-earned .first-finder-badge-state::before {
  margin-right: 4px;
  content: "✓";
  font-weight: 950;
}

html body .first-finder-badge-card.is-locked {
  border-color: rgba(90, 117, 117, 0.2);
  background: linear-gradient(135deg, #f6f8f5, #fbfcf9);
  box-shadow: inset 0 1px 0 #ffffff;
}

html body .first-finder-badge-card.is-locked .first-finder-seal {
  filter: grayscale(0.58) saturate(0.45) opacity(0.66);
}

html body .first-finder-badge-card.is-locked .first-finder-badge-eyebrow {
  color: #4e6566;
}

html body .first-finder-badge-card.is-locked .first-finder-badge-state {
  color: #445f60;
  border-color: rgba(90, 117, 117, 0.16);
  background: #edf1ef;
}

html body .our-map-place-request-badge > .first-finder-seal.is-preview {
  width: 48px !important;
  height: 48px !important;
  flex: 0 0 48px !important;
  filter: drop-shadow(0 5px 7px rgba(5, 47, 69, 0.18));
}

html body .first-finder-seal.is-preview .first-finder-seal-art {
  width: 41px;
  height: 41px;
}

html body .first-finder-seal.is-preview .first-finder-seal-rank {
  right: -2px;
  bottom: 0;
  min-width: 20px;
  height: 16px;
  padding-inline: 3px;
  border-width: 1.5px;
  font-size: 0.42rem;
}

html body .first-finder-seal.is-compact {
  width: 21px;
  height: 21px;
  filter: none;
}

html body .first-finder-seal.is-compact .first-finder-seal-burst,
html body .first-finder-seal.is-compact .first-finder-seal-rank {
  display: none;
}

html body .first-finder-seal.is-compact .first-finder-seal-art {
  width: 21px;
  height: 21px;
}

html body .our-map-first-finder-credit {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
}

html body .our-map-first-finder-credit > span:last-child {
  min-width: 0;
}

html body .our-map-place-request-badge small {
  color: #496766 !important;
  font-size: 0.7rem !important;
  line-height: 1.4 !important;
}

html body .our-map-first-story-credit.our-map-first-finder-credit {
  color: #4d696b !important;
  font-size: 0.66rem !important;
}

@media (max-width: 380px) {
  html body .our-map-badge-card.first-finder-badge-card {
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 11px;
    padding: 12px;
  }

  html body .first-finder-seal:not(.is-preview, .is-compact) {
    width: 76px;
    height: 76px;
  }

  html body .first-finder-seal:not(.is-preview, .is-compact) .first-finder-seal-art {
    width: 64px;
    height: 64px;
  }

  html body .first-finder-seal:not(.is-preview, .is-compact) .first-finder-seal-rank {
    right: -2px;
    bottom: 2px;
    min-width: 27px;
    height: 20px;
    border-width: 1.5px;
    font-size: 0.52rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html body .first-finder-badge-card,
  html body .first-finder-seal {
    animation: none !important;
    transition: none !important;
  }
}

@media (forced-colors: active) {
  html body .our-map-badge-card.first-finder-badge-card,
  html body .first-finder-seal-rank,
  html body .first-finder-badge-state {
    border: 1px solid CanvasText;
  }
}