/* 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); }
/* A plan's levels (BG-212; MapView.renderLevelTabs()): one shown at a time. */
.map-tools .map-levels[hidden] { display: none; }
.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; }
/* A Key picture painted by the parchment renderer (js/ui/map-key.js): a small square of paper. */
.key-swatch.key-art-box { width: 30px; height: 30px; border-radius: 0; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.45); }
.key-art { display: block; image-rendering: pixelated; }
.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; }

/* ---- the way a stranger walked, and the news of one (BG-209; js/ui/stranger-news.js) ---- */
.key-stranger-way {
  display: inline-block; width: 1.15rem; height: 0.3rem; flex: none;
  background: radial-gradient(circle, var(--text) 0 1.3px, transparent 1.6px) 0 50% / 0.38rem 0.3rem repeat-x;
}
/* a way told in a trade (BG-235): dotted like a stranger's, the dots further apart */
.key-told-way {
  display: inline-block; width: 1.15rem; height: 0.3rem; flex: none;
  background: radial-gradient(circle, var(--text) 0 1.2px, transparent 1.5px) 0 50% / 0.58rem 0.3rem repeat-x;
}
.map-news {
  position: absolute; z-index: 3; bottom: 0.5rem; left: 0.5rem; right: 0.5rem; margin: 0 auto;
  width: fit-content; max-width: min(28rem, calc(100% - 1rem)); box-sizing: border-box;
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.3rem 0.4rem 0.3rem 0.55rem; font-size: 0.75rem; line-height: 1.25;
  background: var(--panel); color: var(--text);
  border: 1px solid rgba(232, 182, 90, 0.75); border-radius: var(--radius);
  box-shadow: 0 0 0.6rem rgba(232, 182, 90, 0.3), 0 4px 14px rgba(0, 0, 0, 0.45);
  pointer-events: auto;
}
.map-news[hidden] { display: none; }
.map-news-dot {
  width: 0.45rem; height: 0.45rem; flex: none; border-radius: 50%;
  background: var(--new-dot, #e8b65a); box-shadow: 0 0 0.45rem 0.05rem var(--new-dot-glow, rgba(232, 182, 90, 0.75));
}
.map-news-text { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; }
.map-news-title { font-weight: 600; color: var(--new-dot, #e8b65a); letter-spacing: 0.02em; }
.map-news-note { font-style: italic; overflow-wrap: anywhere; }
.map-news-actions { display: inline-flex; gap: 0.3rem; flex: none; }
.map-news button {
  font: inherit; font-size: 0.72rem; padding: 0.2rem 0.55rem; border-radius: var(--radius); cursor: pointer;
  background: transparent; color: var(--text); border: 1px solid var(--line-strong);
}
.map-news button:hover, .map-news button:focus-visible { border-color: rgba(232, 182, 90, 0.9); }
.map-news .map-news-seen { border-color: rgba(232, 182, 90, 0.75); }

/* ---- the slate map (BG-224; js/ui/map-slate.js): the frame is the table the slate lies on ---- */
.map-frame.map-style-slate { background: #0c0f11; }

/* ---- the map's journey at a change of its mode (BG-230; js/ui/map-journey.js) --------------------------------
   Over the whole game: the map full screen, its own tools hidden; a black layer for the fade between the two maps;
   players cannot skip it; the owner has a quiet Skip (owner) (a click or tap, Escape, Space or Enter as well). Its opacities are stepped by the
   script, so it plays the same however CSS motion is set (it does not play at all under reduced motion). */
.map-journey { position: fixed; inset: 0; z-index: 200; background: #000; cursor: default; outline: none; touch-action: none; user-select: none; }
.map-journey .mj-map, .map-journey .map-view { position: absolute; inset: 0; height: auto; min-height: 0; gap: 0; }
.map-journey .map-tools, .map-journey .map-card, .map-journey .map-beacon, .map-journey .map-key-pop { display: none !important; }
.map-journey .map-frame { position: absolute; inset: 0; min-height: 0; border: 0; border-radius: 0; margin: 0; }
.map-journey .map-canvas { cursor: default; }
.map-journey .mj-black { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; }
.map-journey.can-skip, .map-journey.can-skip .map-canvas { cursor: pointer; }
.map-journey .mj-skip {
  position: absolute; left: max(1rem, env(safe-area-inset-left)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 1;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(223, 230, 232, 0.55); background: rgba(8, 11, 13, 0.45); border: 1px solid rgba(223, 230, 232, 0.18);
  border-radius: var(--radius); padding: 0.45rem 0.8rem; cursor: pointer;
}
.map-journey .mj-skip:hover, .map-journey .mj-skip:focus-visible { color: #f5f9fa; border-color: rgba(223, 230, 232, 0.5); }

/* The owner's map diagnostics (BG-238; js/ui/map-diag.js). */
.map-diag-pop { width: min(30rem, calc(100vw - 16px)); max-height: min(75vh, 36rem); overflow: auto; }
.map-diag-pop .map-diag-text { margin: 0; white-space: pre-wrap; word-break: break-word; font-size: 0.6875rem; line-height: 1.45; color: var(--text); user-select: text; }
.map-diag-pop .map-diag-tools { margin: 0.6rem 0 0; display: flex; gap: 0.5rem; align-items: center; }
.map-diag-pop .map-diag-note { font-size: 0.6875rem; color: var(--muted); }