/* 怪物地图分布 maps.aspx */
.mm-head h1 { margin-bottom: 6px; }
.mm-card { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px 16px; min-width: 0; }

.mm-groups { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 14px 0; }
.mm-grow { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.mm-grow + .mm-grow { border-top: 1px dashed var(--line); }
.mm-gname { flex: 0 0 auto; min-width: 72px; text-align: center; padding: 4px 8px; border-radius: 6px;
  background: var(--gold-dim); color: var(--btn-text); font-size: 13px; font-weight: 700; }
.mm-glist { display: flex; flex-wrap: wrap; gap: 6px; }
.mm-mapbtn { border: 1px solid var(--line); background: var(--input-bg); color: var(--text); border-radius: 6px;
  padding: 4px 10px; font-size: 13px; cursor: pointer; }
.mm-mapbtn:hover { border-color: var(--gold-dim); }
.mm-mapbtn.on { border-color: var(--gold); color: var(--gold-2); font-weight: 700; }

.mm-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 14px; align-items: start; }
.mm-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.mm-bar h2 { margin: 0; font-size: 18px; }
.mm-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 10px 0 6px; font-size: 13px; }
.mm-tools label { cursor: pointer; white-space: nowrap; }
.mm-coord { font-variant-numeric: tabular-nums; min-width: 92px; }
.mm-zoom { margin-left: auto; display: inline-flex; gap: 4px; }
.mm-zbtn { border: 1px solid var(--line); background: var(--input-bg); color: var(--text); border-radius: 6px;
  min-width: 28px; height: 26px; cursor: pointer; font-size: 13px; }
.mm-zbtn:hover { border-color: var(--gold-dim); }
.mm-zfit { padding: 0 8px; }
.mm-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: var(--muted); margin-bottom: 8px; }
.mm-legend .lg { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.lg-mon { width: 12px; height: 12px; border-radius: 50%; background: #9b2a1c; border: 1px solid #f0b27a; }
.lg-boss { width: 12px; height: 12px; border-radius: 50%; background: #6b1f7a; border: 1px solid #f5d76e; }
.lg-area { width: 14px; height: 10px; background: rgba(190, 50, 30, .22); border: 1px dashed #e0623f; }
.lg-npc { width: 9px; height: 9px; border-radius: 50%; background: #f5d400; }
.lg-gate { width: 10px; height: 10px; border-radius: 50%; background: #6fe3ff; }

.mm-view { position: relative; overflow: auto; background: #1a1d22; border-radius: 8px; max-height: 80vh;
  touch-action: pan-x pan-y; }
.mm-stage { position: relative; margin: 0 auto; user-select: none; }
.mm-stage img { display: block; width: 100%; height: 100%; image-rendering: auto; filter: brightness(.82); }
.mm-layer { position: absolute; inset: 0; }

.mm-pt { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%;
  background: #9b2a1c; border: 1px solid #f0b27a; color: #fff; font: 700 10px/24px Arial, sans-serif; text-align: center;
  cursor: pointer; box-shadow: 0 1px 4px rgba(0,0,0,.6); padding: 0; z-index: 3; }
.mm-pt.sm { width: 20px; height: 20px; line-height: 18px; font-size: 9px; opacity: .9; }
.mm-pt.boss { background: #6b1f7a; border-color: #f5d76e; color: #f5d76e; font-size: 12px; }
.mm-pt:hover, .mm-pt.sel { z-index: 6; box-shadow: 0 0 0 2px #fff, 0 0 10px #ffb070; }
.mm-pt.dim, .mm-area.dim { opacity: .18; }
.mm-pt.hl { box-shadow: 0 0 0 2px #ffe27a, 0 0 12px #ffe27a; z-index: 5; }
.mm-area { position: absolute; background: rgba(190, 50, 30, .16); border: 1px dashed #e0623f; border-radius: 3px; z-index: 1; cursor: pointer; }
.mm-area:hover, .mm-area.sel { background: rgba(220, 70, 40, .3); z-index: 2; }
.mm-area.hl { background: rgba(255, 210, 90, .28); border-color: #ffe27a; }
.mm-area b { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: rgba(120, 25, 15, .9);
  color: #fff; font: 700 11px/18px Arial, sans-serif; padding: 0 6px; border-radius: 9px; white-space: nowrap; pointer-events: none; }
.mm-npc { position: absolute; transform: translate(-50%, -50%); width: 9px; height: 9px; border-radius: 50%; background: #f5d400;
  border: 1px solid #5c4b00; cursor: pointer; z-index: 4; padding: 0; }
.mm-npc.sel { box-shadow: 0 0 0 3px #fff, 0 0 10px #f5d400; z-index: 7; }
.mm-gate { position: absolute; transform: translate(-6px, -50%); z-index: 4; pointer-events: none; white-space: nowrap; }
.mm-gate i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: #6fe3ff; border: 1px solid #0b5a6a; vertical-align: -1px; }
.mm-gate span { margin-left: 3px; color: #ffe9a6; font-size: 12px; text-shadow: 0 0 3px #000, 0 0 3px #000; }
.mm-hide-mon .mm-pt, .mm-hide-mon .mm-area { display: none; }
.mm-hide-npc .mm-npc { display: none; }
.mm-hide-gate .mm-gate span { display: none; }

.mm-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin-bottom: 12px; }
.mm-tabs button { border: 1px solid var(--line); background: var(--input-bg); color: var(--text); padding: 7px 4px;
  border-radius: 6px; cursor: pointer; font-size: 13px; }
.mm-tabs button.on { background: var(--gold-dim); color: var(--btn-text); border-color: var(--gold-dim); font-weight: 700; }
.mm-panel table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mm-panel th, .mm-panel td { border: 1px solid var(--line); padding: 5px 8px; text-align: left; vertical-align: top; }
.mm-panel th { background: var(--th-bg); white-space: nowrap; width: 1%; }
.mm-panel h3 { font-size: 15px; margin: 14px 0 8px; }
.mm-panel h3:first-child { margin-top: 0; }
.mm-mlist td.n { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; }
.mm-mlist tr { cursor: pointer; }
.mm-mlist tr:hover td, .mm-mlist tr.on td { background: var(--nav-hover-bg); }
.mm-mon { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 8px; }
.mm-mon .nm { font-weight: 700; color: var(--gold-2); }
.mm-mon .nm em { font-style: normal; color: var(--muted); font-weight: 400; margin-left: 6px; }
.mm-mon dl { display: grid; grid-template-columns: auto 1fr auto 1fr; gap: 2px 10px; margin: 6px 0 0; font-size: 13px; }
.mm-mon dt { color: var(--muted); }
.mm-mon dd { margin: 0; font-variant-numeric: tabular-nums; }
.mm-empty { color: var(--muted); padding: 10px 0; }
.mm-npclist { list-style: none; margin: 0; padding: 0; font-size: 13px; }
.mm-npclist li { display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px; border-bottom: 1px dashed var(--line); cursor: pointer; }
.mm-npclist li:hover, .mm-npclist li.on { background: var(--nav-hover-bg); }
.mm-npclist li span { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.mm-foot { font-size: 12px; margin-top: 12px; }

@media (max-width: 980px) {
  .mm-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .mm-grow { flex-direction: column; gap: 6px; }
  .mm-gname { min-width: 0; }
  .mm-zoom { margin-left: 0; }
  .mm-mon dl { grid-template-columns: auto 1fr; }
}