/* ===========================================================================
   Where Is Enoch? — Leaflet under the dusk  (v2.0.0)
   Loaded after leaflet.css so these win without !important.
   =========================================================================== */

.leaflet-container {
  background: var(--night-deep);
  font-family: var(--font);
  font-weight: 500;
  outline: none;
}

/* Tiles are graded into the night so they sit under the same light as the
   page. One filter on the pane — cheaper than any per-tile treatment. */
.leaflet-tile-pane {
  filter: invert(1) hue-rotate(192deg) saturate(.5) brightness(1.04) contrast(.92);
}

/* In the game the map is the playing field, so it runs near-natural and
   bright. You cannot hunt a 44px figure across a dark map on a phone. */
body.is-playing .leaflet-tile-pane {
  filter: saturate(.92) contrast(1.02) brightness(1.03);
}

.leaflet-container a { color: var(--aqua); }

/* ------------------------------ Controls ---------------------------------- */

.leaflet-bar,
.leaflet-control-zoom {
  border: 1px solid var(--line);
  border-radius: 99px;
  overflow: hidden;
  box-shadow: var(--lift);
  background: rgba(11, 6, 24, .78);
}

.leaflet-bar a,
.leaflet-bar a:hover {
  background: transparent;
  color: var(--paper-2);
  border: none;
  width: 34px;
  height: 34px;
  line-height: 32px;
  font-family: var(--font);
  font-size: 1.15rem;
  font-weight: 700;
}
.leaflet-bar a:first-child { border-bottom: 1px solid var(--line); }
.leaflet-bar a:hover { background: rgba(106, 44, 255, .4); color: var(--paper); }
.leaflet-bar a.leaflet-disabled { color: rgba(168, 147, 212, .35); background: transparent; }

.leaflet-control-attribution {
  background: rgba(7, 3, 15, .82);
  color: var(--paper-3);
  border-radius: 99px 0 0 0;
  border: 1px solid var(--line);
  border-right: none;
  border-bottom: none;
  font-size: .62rem;
  padding: 3px 10px;
}
.leaflet-control-attribution a { color: var(--paper-2); }

/* ------------------------------- Pins ------------------------------------- */

.enoch-pin { background: none; border: none; }

.enoch-pin svg {
  display: block;
  overflow: visible;
  transition: transform .24s cubic-bezier(.16, 1, .3, 1);
  transform-origin: 50% 100%;
}
.enoch-pin:hover svg,
.enoch-pin:focus-visible svg { transform: scale(1.12) translateY(-2px); }

/* Idle pins sit a half-step out of register; the live one comes into
   alignment. State is an optical property of the medium, not an added glow. */
.enoch-pin__ghost { opacity: .55; }
.enoch-pin--current .enoch-pin__ghost { opacity: 0; }

.enoch-pin__halo { opacity: 0; transform-origin: 50% 76%; }
.enoch-pin--current .enoch-pin__halo {
  opacity: 1;
  animation: halo 2.6s cubic-bezier(.2, .7, .3, 1) infinite;
}
@keyframes halo {
  0%   { transform: scale(.4);  opacity: .7; }
  70%  { transform: scale(1.9); opacity: 0; }
  100% { transform: scale(1.9); opacity: 0; }
}

.enoch-pin--current svg { animation: bob 3.4s cubic-bezier(.4, 0, .2, 1) infinite; }
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-5px); }
}

.enoch-pin--flash svg { animation: flash .5s steps(2) 4; }
@keyframes flash {
  0%, 100% { filter: none; }
  50%      { filter: brightness(1.7); }
}

/* Trail */
.enoch-trail {
  stroke-dasharray: 1 10;
  stroke-linecap: round;
  animation: march 26s linear infinite;
}
@keyframes march { to { stroke-dashoffset: -240; } }

/* ----------------------------- Dossier card ------------------------------- */

.leaflet-popup-content-wrapper {
  background: linear-gradient(180deg, rgba(42, 26, 94, .97), rgba(11, 6, 24, .98));
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-lg), var(--rim);
  padding: 0;
  overflow: hidden;
}

.leaflet-popup-content { margin: 0; width: 296px !important; line-height: 1.55; }

.leaflet-popup-tip {
  background: #12082c;
  border: none;
  box-shadow: none;
}

.leaflet-popup-close-button {
  width: 28px; height: 28px;
  top: 10px; right: 10px;
  padding: 0;
  line-height: 26px;
  color: var(--paper-3);
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(11, 6, 24, .7);
  font-family: var(--font);
  font-size: 1rem;
  z-index: 5;
}
.leaflet-popup-close-button:hover { color: var(--paper); background: var(--magenta); border-color: transparent; }

.dossier { padding: 0 0 1rem; }

/* Category band: the venue's own light across the head of the card */
.dossier::before {
  content: "";
  display: block;
  height: 3px;
  background: linear-gradient(90deg, var(--dossier, var(--aqua)) 0%, transparent 92%);
}

.dossier > * { margin-inline: 1.05rem; }

.dossier__cat {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .95rem;
  margin-bottom: .5rem;
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--dossier, var(--aqua));
}
/* Non-colour tell for the category, for greyscale and screenshots */
.dossier__cat::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 2px;
  background: var(--dossier, var(--aqua));
}

.dossier__name {
  margin: 0 1.05rem .15rem;
  font-size: 1.3rem;
  font-variation-settings: "wdth" 104;
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.03em;
}

.dossier__area {
  margin: 0 1.05rem .8rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper-3);
}

.dossier__quote {
  margin: 0 1.05rem .8rem;
  padding: .6rem .75rem;
  font-size: .82rem;
  font-style: italic;
  color: var(--paper-2);
  background: rgba(106, 44, 255, .2);
  border-radius: 10px;
}

.dossier__body { margin: 0 1.05rem .85rem; font-size: .8rem; color: var(--paper-2); }

.dossier__rows {
  margin: 0 1.05rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .25rem .8rem;
  font-size: .76rem;
}
.dossier__rows dt {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--paper-3);
  align-self: center;
}
.dossier__rows dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }

.dossier__srctitle {
  margin: 1.1rem 1.05rem .5rem;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
}

.dossier__sources {
  list-style: none;
  margin: 0 1.05rem;
  padding: 0;
  display: grid;
  gap: .55rem;
  max-height: 174px;
  overflow-y: auto;
}

.src {
  padding: .5rem .6rem;
  border-radius: 10px;
  background: rgba(11, 6, 24, .55);
  border: 1px solid var(--line);
}
.src .ticket { margin: 0 0 .3rem; font-size: .62rem; }
.src__headline { display: block; font-size: .78rem; font-weight: 600; line-height: 1.35; }
.src__headline a { color: var(--paper); text-decoration: none; }
.src__headline a:hover { color: var(--gold); text-decoration: underline; }

.dossier__nosource {
  margin: 0 1.05rem;
  padding: .55rem .7rem;
  font-size: .72rem;
  color: var(--paper-3);
  border: 1px dashed var(--line);
  border-radius: 10px;
}

.dossier__caveat {
  margin: .95rem 1.05rem 0;
  padding-top: .7rem;
  border-top: 1px solid var(--line);
  font-size: .64rem;
  line-height: 1.55;
  color: var(--paper-3);
}

.dossier__live {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin: .9rem 1.05rem 0;
  padding: .2rem .65rem;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--night-deep);
  background: var(--gold);
  border-radius: 99px;
}
.dossier__live::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--night-deep);
  animation: pip 2.2s ease-in-out infinite;
}

/* Tooltip */
.leaflet-tooltip.enoch-tip {
  background: rgba(7, 3, 15, .94);
  color: var(--paper);
  border: 1px solid var(--line);
  border-radius: 99px;
  box-shadow: var(--lift);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .25rem .7rem;
}
.leaflet-tooltip.enoch-tip::before { display: none; }

/* --------------------------- The hunt sprite ------------------------------ */

.enoch-hunt-sprite {
  background: none;
  border: none;
  cursor: pointer;
  overflow: visible !important;
}

.enoch-figure-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 180px;
  height: 110px;
  justify-content: flex-end;
  pointer-events: auto;
}

.enoch-speech {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  z-index: 10;
  animation: speechPop .45s cubic-bezier(.16, 1, .3, 1) forwards, speechPulse 3s ease-in-out infinite alternate .5s;
  transform-origin: 50% 100%;
}

@keyframes speechPop {
  0%   { transform: translateX(-50%) scale(0) translateY(12px); opacity: 0; }
  70%  { transform: translateX(-50%) scale(1.08) translateY(-2px); opacity: 1; }
  100% { transform: translateX(-50%) scale(1) translateY(0); opacity: 1; }
}

@keyframes speechPulse {
  0%   { transform: translateX(-50%) scale(1); }
  100% { transform: translateX(-50%) scale(1.04) rotate(-0.5deg); }
}

.enoch-speech__bubble {
  background: #ffffff;
  color: #0b0618;
  border: 2px solid #ff2d95;
  border-radius: 12px;
  padding: .35rem .65rem;
  font-family: var(--font);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.2;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(11, 6, 24, .6), 0 0 10px rgba(255, 45, 149, .4);
}

.enoch-speech__tail {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 7px solid #ff2d95;
  margin-top: -1px;
}

.enoch-hunt-sprite svg {
  display: block;
  overflow: visible;
  transition: transform .18s cubic-bezier(.16, 1, .3, 1);
}
.enoch-hunt-sprite:hover svg { transform: scale(1.14); }
.enoch-hunt-sprite:hover .enoch-speech { animation: speechPop .3s ease-out forwards; }

/* Exponential ease-out; the overshoot lives in the keyframes, not in a
   springy curve. Same curve family as every other resolve on the page. */
.enoch-hunt-sprite--found svg { animation: caught .62s cubic-bezier(.16, 1, .3, 1) 3; }
.enoch-hunt-sprite--found .enoch-speech__bubble {
  background: #ffb347;
  border-color: #0b0618;
  color: #0b0618;
  box-shadow: 0 0 16px rgba(255, 179, 71, .8);
}
@keyframes caught {
  0%   { transform: translateY(0) rotate(0) scale(1); }
  28%  { transform: translateY(-17px) rotate(-8deg) scale(1.18); }
  55%  { transform: translateY(-2px) rotate(5deg) scale(1.04); }
  78%  { transform: translateY(0) rotate(-2deg) scale(1.01); }
  100% { transform: translateY(0) rotate(0) scale(1); }
}

/* ------------------------------ Responsive -------------------------------- */

@media (max-width: 640px) {
  .leaflet-popup-content {
    width: min(calc(100vw - 44px), 304px) !important;
  }
  .leaflet-popup-close-button {
    width: 32px;
    height: 32px;
    line-height: 30px;
    font-size: 1.1rem;
    top: 8px;
    right: 8px;
  }
  .dossier__name {
    font-size: 1.16rem;
  }
  .dossier > * {
    margin-inline: .9rem;
  }
  .dossier__name,
  .dossier__area,
  .dossier__quote,
  .dossier__body,
  .dossier__rows,
  .dossier__srctitle,
  .dossier__sources,
  .dossier__nosource,
  .dossier__caveat,
  .dossier__live {
    margin-inline: .9rem;
  }
  .dossier__sources {
    max-height: 145px;
    -webkit-overflow-scrolling: touch;
  }
  .leaflet-control-zoom {
    margin-top: max(12px, env(safe-area-inset-top));
    margin-right: max(12px, env(safe-area-inset-right));
  }
  .leaflet-control-attribution {
    font-size: .55rem;
    padding: 2px 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .enoch-pin--current svg,
  .enoch-pin--current .enoch-pin__halo,
  .enoch-pin--flash svg,
  .enoch-trail,
  .enoch-hunt-sprite--found svg,
  .dossier__live::before { animation: none; }
  .enoch-pin--current .enoch-pin__halo { opacity: .45; }
}

/* The figure is a game piece, not a map pin: it needs a readable edge on any
   tile it lands on, so it carries its own halo rather than a drop shadow. */
.enoch-hunt-sprite svg,
.enoch-hunt-sprite img {
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, .95))
    drop-shadow(0 3px 5px rgba(11, 6, 24, .5));
}
.enoch-hunt-sprite img { display: block; width: 44px; height: 62px; object-fit: contain; }