/* Campaign-map field notes. The underlying map and embedded pins are untouched. */
.poi-hotspots {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
}

.poi-hotspot {
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 48% 48% 36% 36%;
  background: transparent;
  cursor: help;
  pointer-events: auto;
  touch-action: manipulation;
}

.poi-hotspot::after {
  content: '';
  position: absolute;
  inset: 3% 6% 9%;
  border: 1px solid rgba(242, 212, 132, 0.8);
  border-radius: inherit;
  box-shadow: 0 0 14px rgba(236, 192, 88, 0.55);
  opacity: 0;
  transition: opacity 150ms ease;
}

.poi-hotspot:hover::after,
.poi-hotspot:focus-visible::after,
.poi-hotspot[aria-expanded='true']::after { opacity: 1; }
.poi-hotspot:focus-visible { outline: 2px solid #f1db9b; outline-offset: 3px; }

.poi-parchment[hidden],
.poi-hotspots[hidden] { display: none !important; }

.poi-parchment {
  --poi-ink: #38291a;
  --poi-rule: #98713d;
  position: fixed;
  z-index: 12000;
  box-sizing: border-box;
  width: min(460px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  padding: 22px 25px 15px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #614524;
  border-radius: 4px 12px 5px 9px;
  color: var(--poi-ink);
  background: linear-gradient(112deg, rgba(171, 119, 43, 0.18), rgba(255, 245, 213, 0.32) 42%, rgba(155, 99, 35, 0.17)), url('../assets/img/background.png') center / cover;
  box-shadow: 0 16px 46px rgba(10, 8, 4, 0.5), 0 3px 8px rgba(0, 0, 0, 0.25), inset 0 0 32px rgba(126, 76, 22, 0.21);
  font-family: 'Quattrocento', Georgia, serif;
  line-height: 1.55;
  animation: poi-reveal 140ms ease-out;
}

.poi-parchment::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(118, 81, 37, 0.46);
  border-radius: 2px 7px 2px 5px;
  pointer-events: none;
}

.poi-parchment:focus { outline: none; }
.poi-parchment:focus-visible { outline: 2px solid #ead39a; outline-offset: 3px; }

.poi-parchment__header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 126px;
  flex-shrink: 0;
  padding: 6px 21px 13px 0;
  border-bottom: 1px solid rgba(120, 80, 31, 0.4);
}

.poi-parchment__coin {
  display: block;
  width: 136px;
  height: 136px;
  flex: 0 0 136px;
  object-fit: contain;
  filter: drop-shadow(0 4px 4px rgba(65, 39, 13, 0.2));
}

.poi-parchment__eyebrow {
  margin: 0 0 4px;
  color: #79582f;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.poi-parchment h2 {
  margin: 0 0 7px;
  color: var(--poi-ink);
  font-family: 'Jim Nightshade', Georgia, serif;
  font-size: 34px;
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.015em;
  overflow-wrap: anywhere;
}

.poi-parchment__subtitle { margin: 0; color: #725337; font-size: 11px; line-height: 1.5; }
.poi-parchment__body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 3px 4px 0 0; scrollbar-width: thin; scrollbar-color: #aa8550 transparent; }
.poi-parchment__body p { margin: 15px 0 0; font-size: 14px; line-height: 1.65; }
.poi-parchment__body p:first-child::first-letter { float: left; padding: 2px 4px 0 0; font-family: 'Jim Nightshade', Georgia, serif; font-size: 38px; line-height: 0.88; color: #764c24; }
.poi-parchment a { color: #754121; text-decoration-color: #ab8c56; text-underline-offset: 3px; }
.poi-parchment a:hover { color: #291a10; }
.poi-parchment a:focus-visible, .poi-parchment button:focus-visible { outline: 2px solid #775025; outline-offset: 3px; }

.poi-parchment__footer { display: flex; flex-shrink: 0; justify-content: space-between; align-items: end; gap: 14px; margin-top: 14px; padding-top: 10px; border-top: 1px solid rgba(120, 80, 31, 0.25); }
.poi-parchment__signature { margin: 0; font-family: 'Bilbo', cursive; font-size: 25px; line-height: 1.05; }
.poi-parchment__hint { margin: 6px 0 0; max-width: 310px; font-size: 10px; color: #765b3c; }
.poi-parchment__close { border: 0; border-bottom: 1px solid #ab8c56; background: none; padding: 3px 0; color: #725337; font: inherit; font-size: 11px; cursor: pointer; }

.poi-hold-timer {
  position: absolute;
  top: 14px;
  right: 15px;
  width: 29px;
  height: 29px;
  color: #8a663a;
  opacity: 0.8;
  z-index: 1;
}
.poi-hold-timer svg { display: block; width: 100%; height: 100%; overflow: visible; }
.poi-hold-timer__track { fill: none; stroke: currentColor; stroke-width: 1; opacity: 0.22; }
.poi-hold-timer__fill { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; transform: rotate(-90deg); transform-origin: center; }
.poi-hold-timer__label { position: absolute; inset: 0; display: grid; place-items: center; font-family: Georgia, serif; font-size: 10px; font-variant-numeric: tabular-nums; }
.poi-parchment[data-held='true'] .poi-hold-timer { color: #5b6240; }

@keyframes poi-reveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 520px) {
  .poi-parchment { padding: 20px 19px 14px; }
  .poi-parchment__header { gap: 10px; min-height: 98px; }
  .poi-parchment__coin { width: 106px; height: 106px; flex-basis: 106px; }
  .poi-parchment h2 { font-size: 29px; }
  .poi-parchment__body p { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .poi-parchment { animation: none; }
  .poi-hotspot::after { transition: none; }
}