/* m-maps.css - Haritalar, zindanlar, NPC'ler (module "maps"). Uses the core tokens from wiki.css. */

/* ---- kingdom entrance plates on /haritalar ---- */
.maps-realm {
  --realm: var(--amber); --realm-d: var(--amber-dim);
  position: relative; height: 100%;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line); border-top: 3px solid var(--realm-d);
  padding: 1rem 1rem .75rem;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.maps-realm--shinsoo { --realm: var(--shinsoo-t); --realm-d: var(--shinsoo); }
.maps-realm--chunjo  { --realm: var(--chunjo-t);  --realm-d: var(--chunjo); }
.maps-realm--jinno   { --realm: var(--jinno-t);   --realm-d: var(--jinno); }
.maps-realm__head { display: flex; align-items: center; gap: .85rem; margin-bottom: .6rem; padding-bottom: .6rem; border-bottom: 1px solid var(--line); }
.maps-realm__emblem { flex: none; width: 56px; height: 56px; filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .5)); }
.maps-realm__name { font-size: 1.35rem; color: var(--realm); }
.maps-realm__sub { margin: 0; font-size: .9rem; }

.maps-catdesc { margin: 0 0 .75rem; max-width: 52rem; }
.maps-foot { margin: .75rem 0 0; font-size: .92rem; }
.maps-sub { font-size: 1.05rem; margin: 1.1rem 0 .5rem; color: var(--soft); }
.maps-over { text-decoration: none; cursor: help; color: var(--warn); font-weight: 700; }
.maps-entry { margin-bottom: .85rem; }
.maps-cond { margin: .6rem 0 0; padding-left: 1.15rem; color: var(--soft); }
.maps-cond li { margin: .15rem 0; }
.maps-drop { background: var(--panel); border: 1px solid var(--line); padding: .75rem .9rem; height: 100%; }
.maps-drop__name { font-size: 1.05rem; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-bottom: .5rem; }

/* ---- schematic plot ---- */
.mplot { margin: 0; }
.mplot__svg { display: block; width: 100%; height: auto; max-height: 38rem; border: 1px solid var(--line-2); background: var(--ink-2); }
.mplot__cap { margin-top: .6rem; }
.mplot__legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.1rem; font-size: .92rem; color: var(--soft); }
.mplot__legend li { display: inline-flex; align-items: center; gap: .4rem; }
.mplot__sw { flex: none; }
.mplot__rampbar { display: inline-flex; border: 1px solid var(--line); }
.mplot__rampbar i { display: block; width: 14px; height: 12px; }
.mplot__note { margin: .6rem 0 0; font-size: .88rem; }

.mp-bg { fill: #0b1020; }
.mp-grid { stroke: #26304d; }
.mp-frame { stroke: var(--line-2); }
.mp-d1 { fill: #ffb454; fill-opacity: .14; }
.mp-d2 { fill: #ffb454; fill-opacity: .28; }
.mp-d3 { fill: #ffb454; fill-opacity: .46; }
.mp-d4 { fill: #ffb454; fill-opacity: .66; }
.mp-d5 { fill: #ffc979; fill-opacity: .88; }
.mp-boss   { fill: var(--shinsoo-t); stroke: #1a0c0a; }
.mp-metin  { fill: var(--jade); stroke: #06201a; }
.mp-shop   { fill: var(--amber-hot); stroke: #3a2610; }
.mp-npc    { fill: var(--bone); stroke: #1b2236; }
.mp-portal { fill: var(--info); stroke: #0c1a30; }
.mp-town   { fill: var(--chunjo-t); stroke: #2c2408; }
.mplot__rampbar .mp-d1, .mplot__rampbar .mp-d2, .mplot__rampbar .mp-d3, .mplot__rampbar .mp-d4, .mplot__rampbar .mp-d5 { fill: none; }
.mplot__rampbar .mp-d1 { background: rgba(255, 180, 84, .14); }
.mplot__rampbar .mp-d2 { background: rgba(255, 180, 84, .28); }
.mplot__rampbar .mp-d3 { background: rgba(255, 180, 84, .46); }
.mplot__rampbar .mp-d4 { background: rgba(255, 180, 84, .66); }
.mplot__rampbar .mp-d5 { background: rgba(255, 201, 121, .88); }
.mplot__svg title { pointer-events: none; }

@media (max-width: 640px) {
  .maps-realm { padding: .85rem .85rem .6rem; }
  .mplot__legend { gap: .3rem .8rem; font-size: .88rem; }
}