/* The "On the map" card of the entity pages (gen/minimap.py, map.js mini mode) and the pin
   notes of /map (map.js). The map panel is the game's own map list frame (menu_map.md
   section 1): the dark-frame nine slice, whose nine 6 px pieces are one flat colour
   (#130F0E, rounded corners), so a flat box with a 2 px radius draws it at any size, and the
   corner decoration at its own size (171 x 174), never stretched. */

.mmap { display: flex; flex-direction: column; gap: 10px; }
.mmap-lead { margin: 0; }
.mmap-frame {
  position: relative;
  padding: 6px;
  background: #130f0e;
  border-radius: 2px;
}
.mmap-frame::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 6;
  width: 171px;
  height: 174px;
  max-width: 50%;
  max-height: 60%;
  background: url("/assets/ui/game/corner_decoration.png?v=f71d28e9") right bottom / 171px 174px no-repeat;
  opacity: 0.74;
  pointer-events: none;
}
/* the box has its height before any script runs: nothing below the card moves */
.mmap .mmap-view {
  height: clamp(220px, 46vw, 320px);
  border-color: #2a2220;
  touch-action: auto;
  cursor: default;
}
.mmap.open .mmap-view {
  height: min(72vh, 620px);
  touch-action: none;
  cursor: grab;
}
.mmap.open .mmap-view.drag { cursor: grabbing; }
.mmap .mmap-stage img.map-art,
.mmap .imap-stage img.map-art {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  pointer-events: none;
}
.mmap-hd { position: absolute; pointer-events: none; }
.mmap .mmap-zoom { left: 14px; top: 14px; right: auto; bottom: auto; }
.mmap-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 14px; }
.mmap-key { display: inline-flex; align-items: center; gap: 6px; }
.mmap-key b { font-weight: 700; }
.mmap-also { margin: 0; font-size: 14px; }
.mmap-foot { display: flex; flex-wrap: wrap; gap: 8px; }
.mmap-foot .big-btn { flex: 1 1 200px; min-width: 0; }

/* ------------------------------------------------------------ /map pin notes */
.imap-mynote { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.imap-mynote .imap-h { display: block; }
.imap-mynote-row { display: flex; gap: 6px; flex-wrap: wrap; }
.imap-mynote-row input {
  flex: 1 1 160px;
  min-width: 0;
  box-sizing: border-box;
  padding: 6px 8px;
  font: 16px "Philosopher", serif;
  color: var(--ink);
  background: #1d1417;
  border: 1px solid #6b5334;
  border-radius: 0;
}
.imap-mynote-row input:focus { outline: 2px solid var(--gold); outline-offset: -1px; }
.imap-mynote .imap-note { margin: 6px 0 0; font-size: 12.5px; }

.imap-notes { padding: 14px 14px 16px; }
.imap-notes ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.imap-notes li { padding: 6px 8px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1); }
.imap-notes-row { display: flex; align-items: flex-start; gap: 6px; }
.imap-notes-go {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 0;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
}
button.imap-notes-go { cursor: pointer; }
button.imap-notes-go:hover strong { color: #fff6df; text-decoration: underline; }
.imap-notes-go strong { font-weight: 700; overflow-wrap: anywhere; }
.imap-notes-go em { font-style: normal; font-size: 12.5px; color: var(--ink-muted); }
.imap-notes-x {
  flex: none;
  width: 30px;
  height: 30px;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--ink-muted);
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
}
.imap-notes-x:hover { color: #fff6df; border-color: var(--gold); }
.imap-notes-t { margin: 4px 0 0; font-size: 14px; overflow-wrap: anywhere; }
.imap-notes .map-layer-actions { margin-top: 10px; }
.imap-notes-io { margin-top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.imap-notes-io[hidden] { display: none; }
.imap-notes-io textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  font: 13px ui-monospace, Menlo, monospace;
  color: var(--ink);
  background: #1d1417;
  border: 1px solid #6b5334;
  resize: vertical;
}
.imap-notes-io .imap-note { margin: 0; font-size: 12.5px; }
@media (max-width: 900px) {
  .imap .imap-notes { order: 5; }
}

/* ---------------------------------------------------------------- /map layer groups and filters
   (map lane 2026-09-30). The layer panel is grouped (travel, bosses, shops, places, collectibles,
   loot, creatures): the group name toggles its layers, "Only" shows that group alone. Same
   flat rows, colours and fonts as the layer buttons of style.css. */
.imap [data-layer="minibosses"] { --c: #ff9a8f; }
.imap [data-layer="breakables"] { --c: #b89a6a; }
.imap [data-layer="people"] { --c: #7fd6e0; }
.imap-grps { display: flex; flex-direction: column; gap: 12px; }
.imap-grp-h { display: flex; align-items: stretch; gap: 6px; margin-bottom: 4px; }
.imap-grp-t {
  flex: 1 1 auto;
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 8px;
  font: 700 14px "Cinzel", Georgia, serif;
  color: var(--gold, #e8c773);
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(237, 227, 204, 0.12);
  cursor: pointer;
}
.imap-grp-t .map-layer-n { margin-left: auto; font-family: inherit; font-weight: 400; color: var(--ink); }
.imap-grp-t:hover { color: #fff6df; }
.imap-grp-only {
  flex: none;
  font: inherit;
  font-size: 13px;
  padding: 2px 10px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
}
.imap-grp-only:hover { border-color: var(--gold, #e8c773); color: #fff6df; }
/* creature level filter */
.imap-lv { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 8px 8px 0; font-size: 14px; }
.imap-lv-t { flex: 1 0 100%; color: var(--ink-muted); font-size: 13px; }
.imap-lv input {
  width: 64px;
  box-sizing: border-box;
  padding: 5px 6px;
  font: inherit;
  color: var(--ink);
  background: #120c0e;
  border: 1px solid #6b5334;
  border-radius: 0;
}
.imap-lv input:focus { outline: 2px solid var(--gold, #e8c773); outline-offset: -1px; }
.imap-lv-x {
  font: inherit;
  font-size: 13px;
  padding: 4px 9px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  cursor: pointer;
}
/* the sources of an item search, under the search box */
.imap-src { margin-top: 10px; }
.imap-pct { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-muted); }
.imap-pct select {
  flex: 1 1 auto;
  padding: 5px 6px;
  font: inherit;
  color: var(--ink);
  background: #120c0e;
  border: 1px solid #6b5334;
  border-radius: 0;
}
.imap-src-list { margin-top: 8px; max-height: 300px; overflow-y: auto; background: #120c0e; border: 1px solid #4a3a2a; }
.imap-src-list > p { margin: 0; padding: 8px 10px; font-size: 14px; }
.imap-srows { list-style: none; margin: 0; padding: 0; }
.imap-srow {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 6px 10px;
  font: inherit;
  text-align: left;
  color: var(--ink);
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(237, 227, 204, 0.06);
  cursor: pointer;
}
.imap-srow:hover,
.imap-srow:focus { background: rgba(232, 199, 115, 0.12); outline: none; }
.imap-srow strong { font-family: "Cinzel", serif; font-weight: 700; font-size: 14px; }
.imap-srow em { font-style: normal; font-size: 12.5px; color: var(--ink-muted); }