/* ── Field map ─────────────────────────────────────────────
   The panel is sized to fit the viewport so the whole map is visible
   without scrolling the page. Pin sizes are mirrored in map-view.js. */
#map-view { display: none; max-width: 1400px; margin: 0 auto; padding: 0 20px 80px; }
.map-shell {
  --map-stage-h: clamp(340px, calc(100vh - 170px), 900px);
  --map-stage-h: clamp(340px, calc(100svh - 170px), 900px);
  --map-panel: #040d04;
  position: relative;
  z-index: 10000; /* above the CRT scanlines so small map labels stay crisp */
  display: grid;
  grid-template-rows: auto auto auto;
  background: var(--map-panel);
  border: 1px solid var(--border);
  box-shadow: inset 0 0 40px rgba(57,255,20,0.04);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  font-family: 'Share Tech Mono', monospace;
}

/* Toolbar */
.map-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 20px; padding: 12px 16px 12px 18px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, rgba(57,255,20,0.05), transparent); }
.map-title { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 14px; min-width: 0; }
.map-kicker { font: 700 10px 'Orbitron', sans-serif; letter-spacing: 3px; color: var(--amber); }
.map-heading { margin: 0; font: 24px/1 'VT323', monospace; letter-spacing: 3px; text-transform: uppercase; color: var(--green); text-shadow: 0 0 10px var(--green-glow); }
.map-count { font-size: 12px; letter-spacing: 2px; color: #99b78d; }
.map-controls { display: flex; align-items: center; gap: 6px; }
.map-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 36px; height: 34px; padding: 0 12px; font: 700 10px 'Orbitron', sans-serif; letter-spacing: 2px; color: var(--green); background: rgba(57,255,20,0.04); border: 1px solid var(--border); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s; }
.map-btn-icon { font: 18px/1 'Share Tech Mono', monospace; letter-spacing: 0; }
.map-btn:hover:not([aria-disabled="true"]) { border-color: var(--green-dim); background: rgba(57,255,20,0.1); box-shadow: inset 0 0 12px rgba(57,255,20,0.1); }
.map-btn[aria-disabled="true"] { opacity: 0.35; cursor: default; }
.map-btn[aria-pressed="true"] { color: var(--bg); background: var(--green); border-color: var(--green); }
.map-btn:focus-visible, .map-list-item:focus-visible, .map-callout button:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.map-zoom { min-width: 54px; text-align: center; font-size: 14px; letter-spacing: 1px; color: var(--amber); }

/* Stage */
.map-body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: var(--map-stage-h); }
.map-stage {
  position: relative;
  isolation: isolate;
  height: 100%;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-x pan-y; /* one finger scrolls the page; two fingers move the map */
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  background-color: #020802;
  background-image: linear-gradient(rgba(57,255,20,0.045) 1px, transparent 1px), linear-gradient(90deg, rgba(57,255,20,0.045) 1px, transparent 1px);
  background-size: 44px 44px;
}
.map-stage.is-dragging { cursor: grabbing; }
.map-stage::before { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; box-shadow: inset 0 0 70px rgba(0,0,0,0.55); }
.map-stage:focus-visible::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; border: 2px solid var(--amber); }
.map-img { position: absolute; left: 0; top: 0; width: 4158px; height: 4155px; max-width: none; transform-origin: 0 0; will-change: transform; pointer-events: none; user-select: none; -webkit-user-drag: none; opacity: 0; transition: opacity 0.35s ease; }
.map-img.is-loaded { opacity: 1; }
.map-status { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; font-size: 12px; letter-spacing: 4px; color: var(--green-dim); pointer-events: none; }
.map-status[hidden] { display: none; }
.map-status span::after { content: '_'; animation: map-blink 1s steps(1) infinite; }
@keyframes map-blink { 50% { opacity: 0; } }

/* Pins: positioned by JS with the `translate` property; transform centres them. */
.map-pins { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.map-pin {
  --pin: 22px;
  position: absolute; left: 0; top: 0;
  width: var(--pin); height: var(--pin);
  padding: 0; border: 0; background: none;
  pointer-events: auto; cursor: pointer;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.9));
  will-change: transform;
  transition: width 0.2s ease, height 0.2s ease, transform 0.15s ease, filter 0.15s ease;
}
.map-pin[hidden] { display: none; }
.map-pins.is-detailed .map-pin { --pin: 46px; }
.map-pin-body { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: rgba(4,10,4,0.92); border: 1.5px solid rgba(255,176,0,0.85); clip-path: polygon(0 0, calc(100% - 5px) 0, 100% 5px, 100% 100%, 5px 100%, 0 calc(100% - 5px)); transition: border-color 0.15s, background 0.15s; }
.map-pin-num { font: 900 9px/1 'Orbitron', sans-serif; letter-spacing: 0.5px; color: var(--amber); }
.map-pin-img { display: none; }
.map-pins.is-detailed .map-pin-img { display: block; position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); object-fit: contain; }
.map-pins.is-detailed .map-pin-num { position: absolute; right: 0; bottom: 0; padding: 2px 3px; font-size: 8px; background: rgba(0,0,0,0.78); }
.map-pin:hover, .map-pin.is-hot { z-index: 2; transform: translate(-50%, -50%) scale(1.18); filter: drop-shadow(0 0 7px rgba(255,176,0,0.8)); }
.map-pin:hover .map-pin-body, .map-pin.is-hot .map-pin-body { border-color: #ffd070; }
.map-pin.is-selected { z-index: 3; filter: drop-shadow(0 0 8px rgba(57,255,20,0.9)); }
.map-pin.is-selected .map-pin-body { border-color: var(--green); background: rgba(6,28,6,0.95); }
.map-pin.is-selected .map-pin-num { color: var(--green); }
.map-pin.is-selected::after { content: ''; position: absolute; inset: -7px; border: 1.5px solid var(--green); border-radius: 50%; pointer-events: none; animation: map-ping 1.8s ease-out infinite; }
@keyframes map-ping { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(1.8); opacity: 0; } }

/* Hover tip */
.map-tip { position: absolute; left: 0; top: 0; z-index: 3; display: flex; align-items: center; gap: 10px; width: max-content; max-width: 280px; padding: 7px 12px 7px 7px; background: rgba(2,8,2,0.95); border: 1px solid var(--amber); pointer-events: none; opacity: 0; transition: opacity 0.12s ease; }
.map-tip.is-visible { opacity: 1; }
.map-tip img { width: 40px; height: 40px; flex-shrink: 0; object-fit: contain; background: #0a160a; }
.map-tip-text { display: grid; gap: 2px; min-width: 0; }
.map-tip-meta { font-size: 10px; letter-spacing: 1px; color: rgba(255,176,0,0.7); }
.map-tip-name { font: 700 11px/1.3 'Orbitron', sans-serif; letter-spacing: 1px; color: #ffd070; }
.map-tip-loc { font-size: 11px; color: rgba(255,176,0,0.75); }

/* Selected location */
.map-callout { position: absolute; left: 0; top: 0; z-index: 4; width: min(276px, calc(100% - 16px)); background: #040d04; border: 1px solid var(--green); box-shadow: 0 12px 40px rgba(0,0,0,0.75), 0 0 24px rgba(57,255,20,0.18); color: var(--green); cursor: default; }
.map-callout[hidden] { display: none; }
.map-callout.is-offscreen { visibility: hidden; }
.map-callout::after { content: ''; position: absolute; left: var(--arrow-x, 50%); bottom: -7px; width: 12px; height: 12px; background: #040d04; border-right: 1px solid var(--green); border-bottom: 1px solid var(--green); transform: translateX(-50%) rotate(45deg); }
.map-callout.is-below::after { top: -7px; bottom: auto; transform: translateX(-50%) rotate(225deg); }
.map-callout-head { display: grid; grid-template-columns: 56px minmax(0, 1fr) 28px; gap: 10px; padding: 10px 6px 8px 10px; }
.map-callout-img { width: 56px; height: 56px; object-fit: contain; background: #0a160a; border: 1px solid var(--border); }
.map-callout-meta { font-size: 10px; letter-spacing: 1.5px; color: var(--amber); }
.map-callout-name { margin: 3px 0 0; font: 700 12px/1.3 'Orbitron', sans-serif; letter-spacing: 1px; color: var(--green); }
.map-callout-loc { margin-top: 3px; font-size: 11px; line-height: 1.4; color: #99b78d; }
.map-callout-close { align-self: start; width: 28px; height: 28px; font: 20px/1 'Share Tech Mono', monospace; color: var(--text-dim); background: none; border: 0; cursor: pointer; }
.map-callout-close:hover { color: var(--green); }
.map-callout-stats { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 10px 10px; }
.map-callout-stats span { padding: 1px 7px; font: 16px/1.3 'VT323', monospace; border: 1px solid; }
.map-callout-stats .cc { color: #00e5ff; border-color: rgba(0,229,255,0.3); background: rgba(0,229,255,0.04); }
.map-callout-stats .dr { color: #4466aa; border-color: #2a4466; }
.map-callout-stats .wt { color: #996655; border-color: #663322; }
.map-callout-actions { display: grid; grid-template-columns: 36px 1fr 36px; border-top: 1px solid var(--border); }
.map-callout-actions button { height: 38px; font: 700 10px 'Orbitron', sans-serif; letter-spacing: 2px; color: var(--green); background: none; border: 0; cursor: pointer; }
.map-callout-actions button:hover { background: rgba(57,255,20,0.08); }
.map-callout-actions [data-callout="stats"] { color: var(--bg); background: var(--green); }
.map-callout-actions [data-callout="stats"]:hover { background: #6dff4f; }
.map-callout-actions [data-callout="prev"], .map-callout-actions [data-callout="next"] { font: 18px/1 'Share Tech Mono', monospace; }

/* Gesture hint */
.map-hint { position: absolute; left: 50%; bottom: 18px; z-index: 5; max-width: calc(100% - 24px); padding: 10px 16px; font: 700 10px/1.4 'Orbitron', sans-serif; letter-spacing: 2px; text-align: center; text-transform: uppercase; color: var(--green); background: rgba(2,8,2,0.94); border: 1px solid var(--green-dim); box-shadow: 0 6px 24px rgba(0,0,0,0.6); pointer-events: none; opacity: 0; transform: translate(-50%, 8px); transition: opacity 0.18s ease, transform 0.18s ease; }
.map-hint.is-visible { opacity: 1; transform: translate(-50%, 0); }

/* Location list */
.map-list-panel { display: flex; flex-direction: column; min-height: 0; border-left: 1px solid var(--border); background: rgba(2,7,2,0.6); }
.map-list-head { display: flex; justify-content: space-between; align-items: center; padding: 11px 14px; font: 700 9px 'Orbitron', sans-serif; letter-spacing: 3px; color: var(--text-dim); border-bottom: 1px solid var(--border); }
.map-list-head strong { color: var(--amber); font-weight: 700; }
.map-list { position: relative; flex: 1; min-height: 0; margin: 0; padding: 4px 0; list-style: none; overflow-y: auto; }
.map-list li[hidden] { display: none; }
.map-list-item { display: grid; grid-template-columns: 34px 22px minmax(0, 1fr) auto; align-items: center; gap: 9px; width: 100%; padding: 6px 12px 6px 10px; text-align: left; color: var(--green); background: none; border: 0; border-left: 2px solid transparent; cursor: pointer; font-family: 'Share Tech Mono', monospace; transition: background 0.12s, border-color 0.12s; }
.map-list-item:hover, .map-list-item.is-hot { background: rgba(57,255,20,0.06); }
.map-list-item.is-selected { background: rgba(57,255,20,0.11); border-left-color: var(--green); }
.map-list-thumb { width: 34px; height: 34px; object-fit: contain; background: #0a160a; border: 1px solid var(--border); }
.map-list-num { font: 900 11px 'Orbitron', sans-serif; color: var(--amber); }
.map-list-text { min-width: 0; }
.map-list-name, .map-list-loc { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.map-list-name { font-size: 13px; color: #b9f5a6; }
.map-list-loc { margin-top: 2px; font-size: 11px; color: var(--text-dim); }
.map-list-lvl { padding: 3px 6px; font: 700 9px 'Orbitron', sans-serif; letter-spacing: 1px; color: var(--green); border: 1px solid var(--border); white-space: nowrap; }
.map-list-item.is-selected .map-list-lvl { color: var(--bg); background: var(--green); border-color: var(--green); }
.map-list-empty { padding: 18px 14px; font-size: 12px; line-height: 1.6; color: var(--amber); }
.map-list-empty[hidden] { display: none; }

/* Footer: threat legend and gesture help */
.map-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px 24px; padding: 10px 18px 12px; border-top: 1px solid var(--border); }
.map-legend { display: flex; align-items: center; gap: 14px; min-width: 0; }
.map-legend-label { font: 700 9px 'Orbitron', sans-serif; letter-spacing: 2px; color: var(--text-dim); white-space: nowrap; }
.map-legend-scale { width: min(340px, 52vw); }
.map-legend-bar { height: 7px; background: linear-gradient(90deg, #6992ae, #7cb7b6, #8fb97c, #b7cb7f, #ddd37b, #d9b85e, #cd9458, #be7152, #9e4a48); }
.map-legend-ticks { display: grid; grid-template-columns: repeat(9, 1fr); margin-top: 4px; font-size: 10px; color: #8aa98a; text-align: center; }
.map-help { font-size: 11px; letter-spacing: 1px; color: var(--text-dim); }
.map-help kbd { font: inherit; color: var(--green); }

/* Charm and magazine layers (main catalog): a blue Vault-Tec disc with a star, a magenta diamond with a book. */
.map-pin--item { --pin: 22px; }
.map-pins.is-detailed .map-pin--item { --pin: 30px; }
.map-pin--item .map-pin-body { clip-path: none; }
.map-pin--item svg { width: 64%; height: 64%; }
.map-pin--charms .map-pin-body { border-radius: 50%; border-color: #5aa2ff; background: rgba(6,18,44,0.95); color: #ffd23f; }
.map-pin--magazines .map-pin-body { inset: 13%; border-radius: 2px; border-color: #ff6ad5; background: rgba(34,6,30,0.95); color: #ff9be6; transform: rotate(45deg); }
.map-pin--magazines svg { width: 78%; height: 78%; transform: rotate(-45deg); }
.map-pin--charms:hover .map-pin-body, .map-pin--charms.is-hot .map-pin-body { border-color: #9cc8ff; }
.map-pin--magazines:hover .map-pin-body, .map-pin--magazines.is-hot .map-pin-body { border-color: #ffb3ec; }
.map-pin--charms:hover, .map-pin--charms.is-hot { filter: drop-shadow(0 0 7px rgba(90,162,255,0.85)); }
.map-pin--magazines:hover, .map-pin--magazines.is-hot { filter: drop-shadow(0 0 7px rgba(255,106,213,0.8)); }
.map-tip[data-kind="charms"] { border-color: #5aa2ff; }
.map-tip[data-kind="magazines"] { border-color: #ff6ad5; }
.map-callout-arc { padding: 0 10px 10px; }
.map-callout-arc:empty { display: none; }
.map-callout-arc .arc-badge { margin-top: 0; }
.map-list-group { padding: 12px 14px 5px; font: 700 8px 'Orbitron', sans-serif; letter-spacing: 3px; color: var(--text-dim); }
.map-list-group:first-child { padding-top: 6px; }
.map-list-icon { display: grid; place-items: center; width: 20px; height: 20px; }
.map-list-icon svg { width: 12px; height: 12px; }
.map-list-item--charms .map-list-icon { border: 1.5px solid #5aa2ff; border-radius: 50%; background: rgba(6,18,44,0.95); color: #ffd23f; }
.map-list-item--magazines .map-list-icon { width: 15px; height: 15px; margin-left: 3px; border: 1.5px solid #ff6ad5; border-radius: 2px; background: rgba(34,6,30,0.95); color: #ff9be6; transform: rotate(45deg); }
.map-list-item--magazines .map-list-icon svg { width: 10px; height: 10px; transform: rotate(-45deg); }
.map-list-item--charms .map-list-lvl { color: #9cc8ff; border-color: #2f5385; }
.map-list-item--magazines .map-list-lvl { color: #ffa6e8; border-color: #6e2d60; }
.map-layers { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.map-layers[hidden] { display: none; }
.map-layer { display: inline-flex; align-items: center; gap: 7px; min-height: 30px; padding: 4px 10px 4px 7px; font: 12px 'Share Tech Mono', monospace; color: #b9f5a6; background: rgba(57,255,20,0.05); border: 1px solid var(--border); cursor: pointer; transition: opacity 0.15s, background 0.15s; }
.map-layer:hover { background: rgba(57,255,20,0.1); }
.map-layer[aria-pressed="false"] { opacity: 0.5; background: none; }
.map-layer[aria-pressed="false"] .map-layer-icon { filter: grayscale(1); }
.map-layer:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }
.map-layer-count { font: 700 9px 'Orbitron', sans-serif; color: var(--amber); }
.map-layer-icon { display: grid; place-items: center; flex: none; width: 16px; height: 16px; }
.map-layer-icon svg { width: 10px; height: 10px; }
.map-layer-icon--backpack { border: 1.5px solid rgba(255,176,0,0.85); background: rgba(4,10,4,0.92); clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px)); }
.map-layer-icon--charms { border: 1.5px solid #5aa2ff; border-radius: 50%; background: rgba(6,18,44,0.95); color: #ffd23f; }
.map-layer-icon--magazines { width: 13px; height: 13px; margin: 0 1px; border: 1.5px solid #ff6ad5; border-radius: 2px; background: rgba(34,6,30,0.95); color: #ff9be6; transform: rotate(45deg); }
.map-layer-icon--magazines svg { width: 8px; height: 8px; transform: rotate(-45deg); }

/* Expanded: the map takes over the viewport, so plain scrolling can zoom. */
body.map-expanded { overflow: hidden; padding-right: var(--scrollbar-w, 0px); }
.map-shell.is-expanded { position: fixed; inset: 0; z-index: 15000; height: 100vh; height: 100dvh; grid-template-rows: auto minmax(0, 1fr) auto; border: 0; clip-path: none; animation: map-expand 0.22s ease-out; }
.map-shell.is-expanded .map-body { grid-template-rows: minmax(0, 1fr); }
.map-shell.is-expanded .map-stage { touch-action: none; }
@keyframes map-expand { from { opacity: 0; transform: scale(0.985); } }

/* ── Full-screen catalog map (#map-view[data-gmap]): it works like Google Maps ──────────────
   Sidebar with search, layer chips, results and the selected place; the map fills the rest.
   On phones the search floats over the map and the sidebar becomes a bottom sheet. */
#map-view[data-gmap] { position: fixed; inset: 0; z-index: 15000; max-width: none; margin: 0; padding: 0; background: #020802; }
#map-view[data-gmap] .map-shell { --side: 384px; position: absolute; inset: 0; z-index: auto; display: grid; grid-template-columns: var(--side) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr);
  border: 0; clip-path: none; box-shadow: none; transition: grid-template-columns 0.25s ease; }
#map-view[data-gmap] .map-shell.is-folded { grid-template-columns: 0 minmax(0, 1fr); }
#map-view[data-gmap] .map-stage { grid-column: 2; grid-row: 1 / 3; height: auto; touch-action: none; }

/* Search bar, brand line and layer chips */
.gm-bar { grid-column: 1; grid-row: 1; display: grid; gap: 10px; min-width: 0; padding: 14px 14px 12px; overflow: hidden; background: #040d04; border-right: 1px solid var(--border); }
.gm-brand { display: flex; align-items: baseline; gap: 10px; white-space: nowrap; }
.gm-brand-title { font: 700 12px 'Orbitron', sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--green); text-shadow: 0 0 10px var(--green-glow); }
.gm-search { position: relative; display: flex; align-items: center; height: 46px; background: #020802; border: 1px solid rgba(57,255,20,0.45); box-shadow: inset 0 0 18px rgba(57,255,20,0.06);
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); }
.gm-search:focus-within { border-color: var(--green); box-shadow: inset 0 0 18px rgba(57,255,20,0.12), 0 0 0 1px var(--green); }
.gm-back { flex: none; display: grid; place-items: center; width: 46px; height: 100%; padding: 0; color: var(--green); background: none; border: 0; border-right: 1px solid var(--border); cursor: pointer; }
.gm-back svg, .gm-place-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; }
.gm-back:hover { background: rgba(57,255,20,0.12); }
.gm-back:focus-visible, .gm-clear:focus-visible, .gm-close:focus-visible, .gm-collapse:focus-visible, .gm-act:focus-visible, .gm-place-top button:focus-visible, .gm-grab:focus-visible { outline: 2px solid var(--amber); outline-offset: -2px; }
#gm-search { flex: 1; min-width: 0; height: 100%; padding: 0 38px 0 12px; font: 15px 'Share Tech Mono', monospace; letter-spacing: 0.5px; color: #c8f5b4; background: none; border: 0; outline: none; }
#gm-search::placeholder { color: #5d8a55; }
#gm-search::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.gm-clear { position: absolute; right: 6px; width: 30px; height: 30px; font: 22px/1 'Share Tech Mono', monospace; color: #7fae74; background: none; border: 0; cursor: pointer; }
.gm-clear:hover { color: var(--green); }
.gm-search-icon { position: absolute; right: 13px; width: 16px; height: 16px; fill: none; stroke: #5d8a55; stroke-width: 1.6; pointer-events: none; }
.gm-clear:not([hidden]) + .gm-search-icon { display: none; }
.gm-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.gm-chips::-webkit-scrollbar { display: none; }
.gm-chips .map-layer { flex: 0 0 auto; }

/* Sidebar: results, the selected place, the threat legend */
.gm-side { grid-column: 1; grid-row: 2; display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; background: #040d04; border-right: 1px solid var(--border); }
.gm-grab { display: none; }
.gm-results { display: flex; flex-direction: column; flex: 1; min-height: 0; border-top: 1px solid var(--border); }
.gm-results[hidden], .gm-place[hidden] { display: none; }
.gm-results .map-list { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.gm-legend { display: grid; gap: 6px; padding: 10px 14px 12px; border-top: 1px solid var(--border); }
.gm-legend .map-legend-scale { width: 100%; }
.map-shell.is-folded .gm-bar, .map-shell.is-folded .gm-side { visibility: hidden; }

/* The selected place */
.gm-place { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--border); }
.gm-place-top { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 10px; background: #040d04; border-bottom: 1px solid var(--border); }
.gm-place-back { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px 0 4px; font: 700 10px 'Orbitron', sans-serif; letter-spacing: 2px; color: var(--green); background: none; border: 0; cursor: pointer; }
.gm-place-back:hover { background: rgba(57,255,20,0.1); }
.gm-place-nav { display: flex; align-items: center; gap: 6px; font: 12px 'Share Tech Mono', monospace; color: #7fae74; }
.gm-place-nav button { width: 30px; height: 30px; font: 16px/1 'Share Tech Mono', monospace; color: var(--green); background: none; border: 1px solid var(--border); cursor: pointer; }
.gm-place-nav button:hover:not(:disabled) { border-color: var(--green-dim); background: rgba(57,255,20,0.1); }
.gm-place-nav button:disabled { opacity: 0.3; cursor: default; }
.gm-place-hero { position: relative; display: grid; place-items: center; height: 214px; margin: 0; overflow: hidden; border-bottom: 1px solid var(--border);
  background: radial-gradient(ellipse at 50% 42%, #133015, #030903 72%); }
.gm-place-hero.is-pack img { max-width: 72%; max-height: 184px; object-fit: contain; filter: drop-shadow(0 12px 18px rgba(0,0,0,0.65)); }
.gm-place-hero.is-photo img { width: 100%; height: 100%; object-fit: cover; }
.gm-place-hero figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 14px 8px; font: 13px 'Share Tech Mono', monospace; color: var(--amber); background: linear-gradient(transparent, rgba(0,0,0,0.88)); }
.gm-place-body { display: grid; gap: 9px; padding: 14px 16px 22px; }
.gm-place-kicker { display: flex; align-items: center; gap: 8px; font: 700 9px 'Orbitron', sans-serif; letter-spacing: 2px; color: var(--amber); }
.gm-kind { display: grid; place-items: center; flex: none; width: 15px; height: 15px; }
.gm-kind svg { width: 9px; height: 9px; }
.gm-kind--backpack { border: 1.5px solid rgba(255,176,0,0.85); background: rgba(4,10,4,0.92); clip-path: polygon(0 0, calc(100% - 4px) 0, 100% 4px, 100% 100%, 4px 100%, 0 calc(100% - 4px)); }
.gm-kind--charms { border: 1.5px solid #5aa2ff; border-radius: 50%; background: rgba(6,18,44,0.95); color: #ffd23f; }
.gm-kind--magazines { width: 12px; height: 12px; margin: 0 2px; border: 1.5px solid #ff6ad5; border-radius: 2px; background: rgba(34,6,30,0.95); color: #ff9be6; transform: rotate(45deg); }
.gm-kind--magazines svg { width: 7px; height: 7px; transform: rotate(-45deg); }
.gm-place-name { margin: 0; font: 700 22px/1.15 'Roboto Condensed', sans-serif; color: #e4ffd8; }
.gm-place-loc { margin: 0; font: 15px/1.45 'Roboto Condensed', sans-serif; color: #a8d89a; }
.gm-place-stats, .gm-place-effects { display: flex; flex-wrap: wrap; gap: 6px; }
.gm-place-stats span { padding: 3px 9px; font: 700 15px/1.3 'Roboto Condensed', sans-serif; border: 1px solid; }
.gm-place-stats .cc { color: #41e2ff; border-color: rgba(65,226,255,0.35); background: rgba(65,226,255,0.05); }
.gm-place-stats .dr { color: #94bbff; border-color: rgba(148,187,255,0.35); }
.gm-place-stats .wt { color: #d9a35f; border-color: rgba(217,163,95,0.35); }
.gm-place-effects span { padding: 4px 9px; font: 14px/1.3 'Roboto Condensed', sans-serif; color: #c8f5b4; background: rgba(57,255,20,0.05); border: 1px solid rgba(57,255,20,0.3); }
.gm-place-body .arc-badge { margin: 2px 0; }
.gm-place-actions { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin-top: 6px; }
.gm-act { height: 40px; padding: 0 14px; font: 700 10px 'Orbitron', sans-serif; letter-spacing: 2px; color: var(--green); background: rgba(57,255,20,0.06); border: 1px solid rgba(57,255,20,0.5); cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 7px) 0, 100% 7px, 100% 100%, 7px 100%, 0 calc(100% - 7px)); transition: background 0.12s, color 0.12s; }
.gm-act:hover { background: rgba(57,255,20,0.16); }
.gm-act.is-primary { color: #041104; background: var(--green); border-color: var(--green); }
.gm-act.is-primary:hover { background: #6dff4f; }

/* On the map: fold tab, zoom stack, Close Map */
.gm-collapse { position: absolute; z-index: 7; top: 50%; left: var(--side); display: grid; place-items: center; width: 22px; height: 54px; padding: 0; color: var(--green); background: #040d04; border: 1px solid var(--border); border-left: 0; cursor: pointer;
  transform: translateY(-50%); transition: left 0.25s ease; }
.gm-collapse svg { width: 10px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; transition: transform 0.25s; }
.gm-collapse:hover { background: #0a1a0a; }
.map-shell.is-folded .gm-collapse { left: 0; }
.map-shell.is-folded .gm-collapse svg { transform: rotate(180deg); }
#map-view[data-gmap] .gm-zoom { position: absolute; z-index: 7; right: 16px; bottom: 22px; display: flex; flex-direction: column; align-items: stretch; gap: 0; width: auto; }
#map-view[data-gmap] .gm-zoom .map-btn { flex: none; width: 42px; height: 42px; min-width: 0; padding: 0; background: rgba(4,13,4,0.95); box-shadow: 0 4px 14px rgba(0,0,0,0.5); }
#map-view[data-gmap] .gm-zoom .map-btn + .map-btn { margin-top: -1px; }
#map-view[data-gmap] .gm-zoom .gm-fit { margin-top: 10px; }
#map-view[data-gmap] .gm-zoom svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.gm-close { position: absolute; z-index: 7; top: 14px; right: 16px; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px; font: 700 11px 'Orbitron', sans-serif; letter-spacing: 2px; color: var(--green);
  background: rgba(4,13,4,0.95); border: 1px solid var(--green); box-shadow: 0 4px 18px rgba(0,0,0,0.55), 0 0 16px rgba(57,255,20,0.18); cursor: pointer;
  clip-path: polygon(0 0, calc(100% - 9px) 0, 100% 9px, 100% 100%, 9px 100%, 0 calc(100% - 9px)); transition: background 0.12s, color 0.12s; }
.gm-close span { font-size: 15px; }
.gm-close:hover { color: #041104; background: var(--green); }

/* Phones: the search floats over the map, the sidebar is a bottom sheet */
@media (max-width: 760px) {
  #map-view[data-gmap] .map-shell { display: block; }
  #map-view[data-gmap] .map-stage { position: absolute; inset: 0; height: auto; aspect-ratio: auto; max-height: none; }
  #map-view[data-gmap] .gm-bar { position: absolute; z-index: 8; top: 0; left: 0; right: 0; gap: 8px; padding: calc(8px + env(safe-area-inset-top)) 10px 12px; border: 0;
    background: linear-gradient(180deg, rgba(2,8,2,0.97) 62%, rgba(2,8,2,0)); overflow: visible; }
  #map-view[data-gmap] .gm-brand, #map-view[data-gmap] .gm-collapse, #map-view[data-gmap] .gm-close, #map-view[data-gmap] .gm-zoom, #map-view[data-gmap] .gm-legend { display: none; }
  #map-view[data-gmap] .gm-search { height: 48px; box-shadow: 0 6px 20px rgba(0,0,0,0.6); }
  #map-view[data-gmap] .gm-chips { width: auto; margin: 0 -10px; padding: 0 10px; }
  #map-view[data-gmap] .gm-chips .map-layer { flex: 0 0 auto; padding: 4px 11px 4px 8px; font-size: 12px; background: rgba(4,13,4,0.95); }
  #map-view[data-gmap] .gm-side { position: absolute; z-index: 9; left: 0; right: 0; top: var(--sheet-top, 120px); bottom: 0; padding-bottom: env(safe-area-inset-bottom);
    border: 0; border-top: 1px solid var(--green-dim); box-shadow: 0 -10px 30px rgba(0,0,0,0.65); transform: translateY(var(--sheet-y, 100%)); transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
  #map-view[data-gmap] .gm-side.is-instant { transition: none; }
  #map-view[data-gmap] .gm-grab { display: grid; place-items: center; flex: none; height: 28px; cursor: grab; touch-action: none; }
  #map-view[data-gmap] .gm-grab span { width: 42px; height: 4px; background: rgba(57,255,20,0.5); }
  #map-view[data-gmap] .gm-results, #map-view[data-gmap] .gm-place { border-top: 0; }
  #map-view[data-gmap] .gm-results .map-list-head { touch-action: none; cursor: grab; }
  #map-view[data-gmap] .gm-place-hero { height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  #map-view[data-gmap] .map-shell, .gm-collapse, .gm-collapse svg, #map-view[data-gmap] .gm-side { transition: none; }
}

@media (max-width: 860px) {
  .map-body { grid-template-columns: 1fr; grid-template-rows: auto; }
  .map-stage { height: auto; aspect-ratio: 1 / 1.06; max-height: 72vh; max-height: 72svh; }
  .map-list-panel { border-left: 0; border-top: 1px solid var(--border); }
  .map-list { overflow: visible; }
  .map-shell.is-expanded .map-stage { height: 100%; aspect-ratio: auto; max-height: none; }
  .map-shell.is-expanded .map-list-panel { display: none; }
}
@media (max-width: 600px) {
  #map-view { padding: 0 12px 60px; }
  .map-toolbar { padding: 10px 12px; }
  .map-controls { width: 100%; }
  .map-controls .map-btn { flex: 1; padding: 0 8px; }
  .map-zoom { min-width: 46px; }
  .map-btn-label { display: none; }
  .map-footer { padding: 10px 12px 12px; }
  .map-legend { width: 100%; flex-wrap: wrap; gap: 6px; }
  .map-legend-scale { width: 100%; }
  .map-help { width: 100%; }
  .map-layers { width: 100%; flex-wrap: nowrap; gap: 6px; }
  .map-layers .map-legend-label { display: none; }
  .map-layer { flex: 1 1 0; justify-content: center; min-width: 0; gap: 5px; padding: 4px 4px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .map-pin, .map-img, .map-tip, .map-hint, .map-list-item { transition: none; }
  .map-pin.is-selected::after, .map-status span::after { animation: none; }
  .map-shell.is-expanded { animation: none; }
}