/* ============================================================
   TOKEN COMPATIBILITY — maps Reborn-era variable names onto the
   Homebrew Chronicle design system. Do not remove.
============================================================ */
:root {
  --parchment:       var(--paper, #F6F4EF);
  --parchment-dark:  #EFEBE0;
  --parchment-deep:  #E5DFCE;
  --border-color:    var(--line, #D9D3C5);
  --ink-dark:        var(--ink, #1C1A17);
  --ink-mid:         #3A352C;
  --guide-primary:   var(--campaign, #8A3A2E);
  --guide-light:     #A34A3C;
  --shared-primary:  var(--ttrpg, #33486B);
  --gold:            var(--gamification, #B9791C);
  --gold-dark:       #8A5A12;
  --gold-light:      #D9A84E;
  --font-heading:    var(--font-display, "Fraunces", serif);
  --font-ui:         var(--font-mono, "IBM Plex Mono", monospace);
  --card-radius:     6px;
}

/* ============================================================
   FAIRYTALE MAP — Homebrew Chronicle Reborn v2.1.0
============================================================ */

#hbcr-map-wrap {
  position: relative;
  border: 3px solid var(--border-color);
  border-radius: var(--card-radius);
  box-shadow: 0 4px 24px rgba(26,18,9,0.25);
  background: #48606b;
  overflow: hidden;
}
#hbcr-map {
  width: 100%;
  height: clamp(420px, 72vh, 860px);
  background: #48606b;
  font-family: var(--font-body);
}
#hbcr-map-wrap:fullscreen #hbcr-map { height: 100vh; }

.hbcr-map-hint {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--ink-faded);
  text-align: center;
  margin-bottom: 0.8rem;
}

/* ---------- Toolbar ---------- */
#hbcr-map-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
}
#hbcr-map-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.hbcr-chip {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  padding: 0.32rem 0.75rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--parchment);
  color: var(--ink-mid);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.hbcr-chip:hover { border-color: var(--gold-dark); }
.hbcr-chip.on {
  background: var(--guide-primary);
  border-color: var(--guide-primary);
  color: #fff;
}
.hbcr-map-tools { display: flex; gap: 0.4rem; align-items: center; }
#hbcr-map-search {
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--border-color);
  border-radius: 999px;
  background: var(--parchment);
  color: var(--ink-dark);
  width: clamp(150px, 24vw, 260px);
}
#hbcr-map-home, #hbcr-map-full {
  font-size: 1rem;
  line-height: 1;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  background: var(--parchment);
  color: var(--ink-mid);
  cursor: pointer;
}
#hbcr-map-home:hover, #hbcr-map-full:hover { background: var(--parchment-deep); }

/* ---------- Legend ---------- */
#hbcr-map-legend {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 999;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.9rem;
  background: rgba(253,246,227,0.92);
  border: 1px solid var(--border-color);
  border-radius: var(--card-radius);
  padding: 0.4rem 0.7rem;
  font-family: var(--font-ui);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--ink-mid);
  max-width: min(90%, 560px);
}
#hbcr-map-legend .lg-region { color: #7a5a00; }
#hbcr-map-legend .lg-town   { color: #2a4a1a; }
#hbcr-map-legend .lg-poi    { color: #2a3a6b; }
#hbcr-map-legend .lg-trail  { color: #6b1a1a; }
#hbcr-map-legend .lg-party  { color: #b8962e; }

/* ---------- Markers ---------- */
.hbcr-mk { background: transparent; border: none; }
.hbcr-mk-dot {
  display: block;
  border-radius: 50%;
  border: 2px solid rgba(253,246,227,0.95);
  box-shadow: 0 1px 6px rgba(0,0,0,0.55);
  width: 100%; height: 100%;
  transition: transform 0.12s ease;
}
.hbcr-mk:hover .hbcr-mk-dot { transform: scale(1.35); }
.hbcr-mk-town .hbcr-mk-dot  { background: #3d6b28; }
.hbcr-mk-poi .hbcr-mk-dot   { background: #3a5080; }

.hbcr-mk-region {
  background: transparent; border: none;
  color: #fdf6e3;
  font-family: var(--font-heading);
  font-weight: 700;
  text-shadow: 0 1px 4px rgba(0,0,0,0.85), 0 0 12px rgba(0,0,0,0.5);
  white-space: nowrap;
  text-align: center;
  letter-spacing: 0.14em;
  cursor: pointer;
}
.hbcr-mk-region span { display: inline-block; transform: translate(-50%, -50%); }

.hbcr-mk-party {
  background: transparent; border: none;
  font-size: 26px; line-height: 1;
  color: var(--gold-light);
  text-shadow: 0 0 6px rgba(0,0,0,0.9);
  animation: hbcrPulse 1.8s ease-in-out infinite;
}
@keyframes hbcrPulse {
  0%,100% { transform: scale(1);   filter: drop-shadow(0 0 2px #e8c96a); }
  50%     { transform: scale(1.25); filter: drop-shadow(0 0 10px #e8c96a); }
}

.hbcr-mk-trail {
  background: #6b1a1a;
  border: 2px solid #fdf6e3;
  border-radius: 50%;
  color: #fdf6e3;
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 6px rgba(0,0,0,0.55);
}

/* ---------- Popups ---------- */
.leaflet-popup-content-wrapper {
  background: var(--parchment);
  border: 2px solid var(--border-color);
  border-radius: var(--card-radius);
  box-shadow: 0 6px 20px rgba(26,18,9,0.4);
  font-family: var(--font-body);
  color: var(--ink-dark);
}
.leaflet-popup-tip { background: var(--parchment); border: 1px solid var(--border-color); }
.hbcr-pop h3 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--guide-primary);
  margin: 0 0 0.15rem;
}
.hbcr-pop .hbcr-pop-cat {
  font-family: var(--font-ui);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--gold-dark);
  margin-bottom: 0.45rem;
}
.hbcr-pop p { font-size: 0.9rem; line-height: 1.45; margin: 0 0 0.5rem; }
.hbcr-pop a.hbcr-pop-link {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--shared-primary);
  text-decoration: none;
  border-bottom: 1px dotted var(--shared-primary);
}
.hbcr-pop a.hbcr-pop-link:hover { color: var(--gold-dark); border-color: var(--gold-dark); }

/* ---------- Search results glow ---------- */
.hbcr-mk-hit .hbcr-mk-dot { box-shadow: 0 0 0 4px rgba(232,201,106,0.9), 0 1px 6px rgba(0,0,0,0.55); }

/* ---------- Missing image notice ---------- */
.hbcr-map-missing {
  border: 2px dashed var(--border-color);
  background: var(--parchment-dark);
  border-radius: var(--card-radius);
  padding: 2rem;
  text-align: center;
  font-family: var(--font-body);
  color: var(--ink-mid);
}

@media (max-width: 640px) {
  #hbcr-map-toolbar { flex-direction: column; align-items: stretch; }
  .hbcr-map-tools { justify-content: space-between; }
  #hbcr-map-legend { font-size: 0.6rem; gap: 0.25rem 0.6rem; }
}