/* BLACKGLASS map view: Region and Atlas scales, zoom, pan, the hover/tap tile card and the Key
   popover. The map itself is a <canvas> (js/ui/map-view.js draws it; colours live in the
   PALETTE object there). This file styles the surrounding chrome. Uses tokens from base.css. */

.map-view { display: flex; flex-direction: column; height: 100%; min-height: 28rem; gap: 0.6rem; }
.map-view h2 { margin: 0.6rem 0 0.4rem; }
.map-view h2:first-of-type { margin-top: 0.2rem; }

/* ---- toolbar ------------------------------------------------------------------------------ */
.map-tools { position: relative; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.map-tools .seg { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); overflow: hidden; }
.map-tools .seg button {
  background: none; border: 0; color: var(--muted); font-family: var(--font-mono); font-size: 0.6875rem;
  letter-spacing: 0.12em; text-transform: uppercase; padding: 0.45rem 0.7rem; cursor: pointer;
}
.map-tools .seg button + button { border-left: 1px solid var(--line-strong); }
.map-tools .seg button[aria-pressed="true"] { color: var(--text-strong); background: var(--panel-2); }
.map-tools label { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--muted); display: inline-flex; gap: 0.3rem; align-items: center; letter-spacing: 0.06em; }
.map-tools label input { accent-color: var(--accent); }

.zoom-tools { display: inline-flex; align-items: center; gap: 0.25rem; }
.zoom-tools .btn-icon, .zoom-tools .btn-centre {
  font-family: var(--font-mono); background: none; color: var(--muted); cursor: pointer;
  border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.zoom-tools .btn-icon:hover:not(:disabled), .zoom-tools .btn-centre:hover { border-color: var(--accent); color: var(--text-strong); }
.zoom-tools .btn-icon { width: 1.7rem; height: 1.7rem; line-height: 1; font-size: 0.9375rem; padding: 0; }
.zoom-tools .btn-icon:disabled { opacity: 0.35; cursor: not-allowed; }
.zoom-tools .btn-centre { font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.4rem 0.6rem; }

.btn-key {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase;
  background: none; color: var(--muted); cursor: pointer; border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 0.4rem 0.6rem;
}
.btn-key:hover, .btn-key[aria-expanded="true"], .btn-key[aria-pressed="true"] { border-color: var(--accent); color: var(--text-strong); }
/* The owner's "Full map" link (js/ui/map-view.js, owner only) looks like the other toolbar keys. */
a.btn-key { display: inline-block; text-decoration: none; line-height: normal; }

/* ---- key popover ---------------------------------------------------------------------------- */
/* position: fixed (not absolute) so the popover escapes the side panel's overflow:auto clipping;
   its left/top are set from the Key button's rect in MapView.positionKeyPopover(). */
.map-key-pop {
  position: fixed; z-index: 50; width: 19rem; max-width: calc(100vw - 1.5rem);
  max-height: min(75vh, 30rem); overflow: auto; background: var(--panel); border: 1px solid var(--line-strong);
  border-radius: var(--radius); padding: 0.7rem 0.8rem; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.5);
}
.map-key-pop[hidden] { display: none; }
.map-key-pop h3 { margin: 0.7rem 0 0.35rem; font-size: 0.6875rem; letter-spacing: 0.14em; color: var(--muted); }
.map-key-pop h3:first-of-type { margin-top: 0; }
.map-key-pop .key-close {
  position: absolute; top: 0.3rem; right: 0.4rem; background: none; border: 0; color: var(--faint);
  font-size: 1rem; line-height: 1; cursor: pointer; padding: 0.2rem;
}
.map-key-pop .key-close:hover { color: var(--text-strong); }
.key-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(7.6rem, 1fr)); gap: 0.3rem 0.5rem; }
.key-row { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-mono); font-size: 0.75rem; color: var(--text); }
.key-swatch { display: inline-block; width: 0.85rem; height: 0.85rem; border-radius: 2px; flex: none; }
.key-chip {
  display: inline-flex; align-items: center; justify-content: center; width: 1.15rem; height: 1.15rem;
  border-radius: 40%; font-size: 0.6875rem; flex: none; line-height: 1;
}
.key-chip.key-you { background: radial-gradient(circle, #fff 0 35%, rgba(255, 255, 255, 0.25) 36% 62%, transparent 64%); }
.key-dot, .key-tick { display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 50%; flex: none; }
.key-tick { border-radius: 0 0 2px; clip-path: polygon(40% 100%, 100% 100%, 100% 40%); }
.map-key-pop .key-note { margin: 0.7rem 0 0; font-size: 0.6875rem; color: var(--faint); }

/* ---- frame / canvas ------------------------------------------------------------------------- */
.map-frame {
  position: relative; flex: 1 1 auto; min-height: max(16rem, 62vh); overflow: hidden;
  background: #000; border: 1px solid var(--line); touch-action: none; cursor: grab;
}
.map-frame.dragging { cursor: grabbing; }
/* The camera follows the travel animation on its own; panning/zooming is disabled meanwhile. */
.map-frame.travelling { cursor: default; }
.map-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.map-canvas:focus-visible { outline: 1px solid var(--accent); outline-offset: -2px; }

/* The beacon (BG-153; map-view.js showBeacon()): a memory or place opened in the Recollections. A gold
   core with rings spreading outward, for a few seconds. Without motion (reduced motion, ?anim=0) the
   rings' resting state shows: one steady ring. Never takes a click. Its colour and pulse are tunable in
   Admin → GUI settings (BG-159): --gui-beacon, --gui-beacon-glow and --gui-beacon-pulse, from /gui-settings.css. */
.map-beacon {
  --tile: 16px; --beacon: var(--gui-beacon, #f2c14e); --beacon-glow: var(--gui-beacon-glow, rgba(242, 193, 78, 0.85));
  position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; pointer-events: none;
}
.map-beacon[hidden], .map-beacon.is-off-view { display: none; }
.map-beacon .core, .map-beacon .ring {
  position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-50%, -50%);
}
.map-beacon .core {
  width: max(0.6rem, calc(var(--tile) * 0.55)); height: max(0.6rem, calc(var(--tile) * 0.55));
  background: var(--beacon); border: 2px solid rgba(20, 14, 4, 0.85); box-shadow: 0 0 0.6rem 0.15rem var(--beacon-glow);
}
.map-beacon .ring {
  width: max(2.6rem, calc(var(--tile) * 2.6)); height: max(2.6rem, calc(var(--tile) * 2.6));
  border: 2px solid var(--beacon); box-shadow: 0 0 0.5rem var(--beacon-glow), inset 0 0 0.4rem var(--beacon-glow);
  opacity: 0.9;
}
.map-beacon .ring + .ring { opacity: 0; }
.map-beacon.is-on .ring { animation: map-beacon-ring var(--gui-beacon-pulse, 1.5s) cubic-bezier(0.2, 0.6, 0.4, 1) infinite both; }
.map-beacon.is-on .ring:nth-child(2) { animation-delay: calc(var(--gui-beacon-pulse, 1.5s) / 3); }
.map-beacon.is-on .ring:nth-child(3) { animation-delay: calc(var(--gui-beacon-pulse, 1.5s) * 2 / 3); }
@keyframes map-beacon-ring {
  0% { transform: translate(-50%, -50%) scale(0.15); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .map-beacon.is-on .ring { animation: none; }
}

/* ---- hover / tap card ------------------------------------------------------------------------ */
.map-card {
  position: absolute; z-index: 3; top: 0; left: 0; max-width: min(17rem, calc(100% - 1.2rem));
  background: var(--panel); border: 1px solid var(--line-strong); border-radius: var(--radius);
  padding: 0.6rem 0.7rem; font-size: 0.875rem; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}
.map-card[hidden] { display: none; }
/* a small picture of the place as it is now (placeart-view.js placeThumbURL) */
.map-card .map-thumb { display: block; margin: 0 0 0.4rem; image-rendering: pixelated; background: var(--bg); object-fit: cover; } /* a place made epic (480 x 270) keeps the card's 4:3 box (BG-152) */
.map-card .map-thumb.smooth { image-rendering: auto; }
[data-place-art="0"] .map-card .map-thumb { display: none; }
.map-card .name { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-strong); padding-right: 1rem; }
.map-card .small { font-size: 0.8125rem; margin-top: 0.25rem; }
.map-card .memory { color: var(--warn); font-style: italic; font-size: 0.8125rem; margin-top: 0.3rem; }
.map-card .note-text { color: var(--accent-strong); }
.map-card .drop-text .item-icon { margin-right: 0.35rem; }
.map-card .row { margin-top: 0.45rem; }
.map-card .card-close {
  position: absolute; top: 0.25rem; right: 0.3rem; background: none; border: 0; color: var(--faint);
  font-size: 1rem; line-height: 1; cursor: pointer; padding: 0.2rem;
}
.map-card .card-close:hover { color: var(--text-strong); }
.map-card .note-input { font-size: 0.8125rem; padding: 0.4rem 0.55rem; }

/* ---- places ---------------------------------------------------------------------------------- */
.places { list-style: none; padding: 0; margin: 0; }
.places li { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0; border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.places li .g { font-family: var(--font-mono); width: 1.2rem; text-align: center; }
.places li .g.icon { display: inline-flex; align-items: center; justify-content: center; width: auto; min-width: 1.2rem; }
.places li .here { font-family: var(--font-mono); font-size: 0.6875rem; color: var(--accent); letter-spacing: 0.1em; text-transform: uppercase; }
.places li .btn { margin-left: auto; }

/* ---- mobile ------------------------------------------------------------------------------------ */
@media (max-width: 62rem) {
  .map-view { min-height: 0; }
  .map-frame { min-height: max(14rem, calc(100dvh - 16rem)); }
}
@media (max-width: 30rem) {
  .map-card { max-width: calc(100% - 1rem); }
}

/* Places with nothing new for now. */
.places li.is-explored > span:not(.g) { color: var(--faint); }
.places .tick { color: var(--ok); font-family: var(--font-mono); font-weight: 700; }

/* Places popover: every known place with View (show on the map) and Go (travel). */
.map-places-pop { width: min(24rem, calc(100vw - 16px)); max-height: min(70vh, 32rem); overflow: auto; }
.map-places-pop .places { list-style: none; margin: 0; padding: 0; }
.map-places-pop .places li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--line); }
.map-places-pop .places li > span:nth-child(2) { flex: 1; min-width: 0; }
.map-places-pop .place-actions { display: inline-flex; gap: 0.35rem; align-items: center; }
.map-places-pop .places li .btn { margin-left: 0; }
.map-places-pop .drop-place { color: var(--faint); }

/* ---- where a stranger came from (BG-146): a hollow figure, and a pointer at the map's edge ---- */
.map-stranger-marks { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.map-stranger-mark { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; pointer-events: auto; cursor: help; }
.map-stranger-mark svg { display: block; overflow: visible; }
.map-stranger-mark .sm-fig { fill: none; stroke: #f0ece2; stroke-width: 1.6; stroke-linejoin: round; }
.map-stranger-mark .sm-arrow { fill: none; stroke: #f0ece2; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.map-stranger-mark svg { filter: drop-shadow(0 0 1.5px #100e0b) drop-shadow(0 0 1px #100e0b); }
.map-stranger-mark:focus-visible { outline: 1px dashed var(--accent); outline-offset: 2px; }
.key-stranger {
  display: inline-block; width: 1.15rem; height: 1.15rem; flex: none; border-radius: 50%;
  border: 1.5px solid var(--text); box-sizing: border-box; position: relative;
}
.key-stranger::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0.3rem; height: 0.3rem; margin: -0.15rem 0 0 -0.15rem; border: 1.5px solid var(--text); border-radius: 50%; box-sizing: border-box; }