/* ui-minimap.css — owned by ui-map (styles for js/ui/minimap.js).
 * Top-right HUD minimap (dial + name banner + coordinate chip) and the full-screen world-map overlay.
 * Height budget: the minimap stays inside the top ~218 px so the quest tracker (right-middle) is free.
 */

/* Root covers the screen but never catches clicks itself (only its children do). */
.layer > .mm-root,
.mm-root {
  position: absolute;
  inset: 0;
  pointer-events: none;
  font-family: var(--font, 'Kanit', 'Leelawadee UI', Tahoma, sans-serif);
  color: var(--c-text, #f3e6c8);
}
.mm-root.mm-empty .mm-mini { display: none; }

/* ------------------------------------------------------------------------------ minimap */
.mm-mini {
  position: absolute;
  top: 8px;
  right: 12px;
  width: 188px;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  transform-origin: top right;
}
.mm-mini > * { pointer-events: auto; }

/* Red lacquer banner with the map name (swallow-tail ribbon). */
.mm-banner {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 128px;
  max-width: 188px;
  height: 26px;
  padding: 0 20px;
  color: var(--c-gold, #e8c46a);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.3px;
  line-height: 1;
  white-space: nowrap;
  text-shadow: 0 1px 0 #000, 0 0 8px rgba(232, 196, 106, 0.35);
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255, 180, 120, 0.22), transparent 70%),
    linear-gradient(180deg, #8a2418 0%, #5c130c 55%, #3e0b07 100%);
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 50%, 100% 100%, 0 100%, 9px 50%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.7));
}
.mm-banner::before {
  content: '';
  position: absolute;
  inset: 2px 3px;
  pointer-events: none;
  border-top: 1px solid rgba(232, 196, 106, 0.75);
  border-bottom: 1px solid rgba(232, 196, 106, 0.75);
  clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 50%, 100% 100%, 0 100%, 8px 50%);
}
.mm-name { overflow: hidden; text-overflow: ellipsis; max-width: 140px; }
.mm-tags { display: inline-flex; gap: 3px; flex: none; }
.mm-tags:empty { display: none; }
.mm-zone {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  box-shadow: 0 0 0 1px #140904, 0 0 6px currentColor;
}
.mm-zone-safe { color: #7ddc6a; background: radial-gradient(circle at 35% 30%, #d8ffcc, #5fbf4a 60%, #2d6e20); }
.mm-zone-pvp { color: #ff5b45; background: radial-gradient(circle at 35% 30%, #ffd0c0, #e0412f 60%, #7a120a); }
.mm-zone-boss { color: #c77dff; background: radial-gradient(circle at 35% 30%, #f0dcff, #9b4ddb 60%, #4a1a78); }

/* The round dial: canvas inside a gold/bronze ring. */
.mm-dial {
  position: relative;
  z-index: 2;
  width: 164px;
  height: 164px;
  margin-top: -5px;
  border-radius: 50%;
  background: #1a110b;
  box-shadow:
    0 0 0 1px #0b0503,
    0 0 0 3px #4a2e16,
    0 0 0 5px #b8893f,
    0 0 0 6px #f0d488,
    0 0 0 8px #5a3616,
    0 0 0 9px #0b0503,
    0 6px 18px rgba(0, 0, 0, 0.65);
}
.mm-dial::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.85), inset 0 0 16px rgba(0, 0, 0, 0.6), inset 0 0 3px rgba(232, 196, 106, 0.4);
}
.mm-canvas {
  position: absolute;
  inset: 0;
  width: 164px;
  height: 164px;
  display: block;
  border-radius: 50%;
  cursor: crosshair;
  touch-action: none;
}
/* Compass studs on the ring (E / S / W; the banner sits on N). */
.mm-ticks {
  position: absolute;
  inset: -7px;
  z-index: 2;
  pointer-events: none;
  --stud: radial-gradient(circle, #fff3c4 0 1.5px, #d8a948 2px, #6a4418 3.4px, transparent 3.8px);
  background:
    var(--stud) right 0 center / 8px 8px no-repeat,
    var(--stud) left 0 center / 8px 8px no-repeat,
    var(--stud) center bottom 0 / 8px 8px no-repeat;
}

.mm-btn {
  position: absolute;
  z-index: 3;
  width: 24px;
  height: 24px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font: 700 16px/1 var(--font, 'Kanit', sans-serif);
  color: var(--c-gold-light, #fff0b8);
  text-shadow: 0 1px 0 #000;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid #f0d488;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 200, 150, 0.35), transparent 60%),
    linear-gradient(180deg, #b83224 0%, #7a1a10 60%, #4e0e08 100%);
  box-shadow: 0 0 0 1px #140904, 0 2px 5px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 220, 180, 0.35);
  transition: filter 0.12s, transform 0.08s, box-shadow 0.12s;
}
.mm-btn:hover:not(:disabled) { filter: brightness(1.25); box-shadow: 0 0 0 1px #140904, 0 0 10px rgba(255, 200, 110, 0.55), inset 0 1px 0 rgba(255, 220, 180, 0.35); }
.mm-btn:active:not(:disabled) { transform: scale(0.92); }
.mm-btn:disabled { filter: grayscale(0.8) brightness(0.6); cursor: default; }
.mm-btn:focus-visible { outline: 2px solid rgba(232, 196, 106, 0.7); outline-offset: 1px; }
/* Buttons sit on the ring (lower-left at ~170° / ~145°, lower-right at ~30°) so they hide almost no map. */
.mm-zin { left: -21px; top: 86px; }
.mm-zout { left: -5px; top: 123px; }
.mm-wbtn {
  right: -13px;
  top: 113px;
  width: 30px;
  height: 30px;
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 245, 200, 0.55), transparent 62%),
    linear-gradient(180deg, #f3d98c 0%, #c89a42 55%, #8a6220 100%);
  color: #3a1d08;
  text-shadow: none;
  border-color: #fff0b8;
}
.mm-wbtn svg { display: block; }
.mm-root.world-open .mm-wbtn { box-shadow: 0 0 0 1px #140904, 0 0 12px rgba(255, 220, 120, 0.85); }

/* Level range + coordinates chip under the dial. */
.mm-chip {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 7px;
  height: 21px;
  margin-top: -9px;
  padding: 0 11px;
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  color: #f1e2c2;
  text-shadow: 0 1px 1px #000;
  background: linear-gradient(180deg, rgba(58, 32, 18, 0.97), rgba(22, 12, 7, 0.97));
  border: 1px solid #b8893f;
  border-radius: 11px;
  box-shadow: 0 0 0 1px #0b0503, 0 3px 8px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 220, 160, 0.15);
}
.mm-lv { color: var(--c-gold, #e8c46a); font-weight: 600; }
.mm-lv:empty, .mm-lv:empty + .mm-sep { display: none; }
.mm-sep { width: 1px; height: 11px; background: rgba(232, 196, 106, 0.45); }
.mm-xy { font-variant-numeric: tabular-nums; letter-spacing: 0.2px; }
.mm-root[data-zone="pvp"] .mm-chip { border-color: #e0412f; }
.mm-root[data-zone="safe"] .mm-chip { border-color: #8fcf6a; }

/* FPS / ping readout: beside the chip (left), so the minimap never grows taller than ~206 px. */
.mm-perf {
  position: absolute;
  right: calc(100% - 16px);
  bottom: 3px;
  white-space: nowrap;
  padding: 1px 8px;
  font-size: 11px;
  line-height: 15px;
  color: #b8f5a8;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 1px #000, 0 0 3px #000;
  background: rgba(10, 5, 2, 0.55);
  border-radius: 8px;
}
.mm-perf.warn { color: #ffcf6a; }

/* ------------------------------------------------------------------------------ world map overlay */
.mm-world {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  pointer-events: auto;
  background:
    radial-gradient(circle at 50% 45%, rgba(20, 10, 5, 0.45), rgba(8, 4, 2, 0.82));
  animation: mm-fade 0.16s ease-out;
}
.mm-world.hidden { display: none !important; }
@keyframes mm-fade { from { opacity: 0; } to { opacity: 1; } }

.mm-world > .win.mm-wwin {
  position: relative;
  width: auto;
  max-width: calc(100vw - 24px);
  max-height: calc(100vh - 24px);
}
.mm-wwin > .win-title { cursor: default; }
.mm-wbody {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 14px;
  padding: 12px 14px 14px;
  min-height: 0;
}
.mm-wleft { display: flex; flex-direction: column; gap: 8px; width: calc(var(--mm-wsize, 600px) + 18px); min-width: 0; }
.mm-whead {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 2px;
}
.mm-wh-text { flex: 1 1 auto; min-width: 0; }
.mm-wh-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--c-gold-light, #fff0b8);
  text-shadow: 0 1px 0 #000, 0 0 12px rgba(232, 196, 106, 0.25);
}
.mm-preview-badge {
  padding: 1px 8px;
  font-size: 11px;
  font-weight: 500;
  color: #e2d0ff;
  background: rgba(120, 70, 230, 0.25);
  border: 1px solid rgba(195, 155, 255, 0.55);
  border-radius: 9px;
}
.mm-wh-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 3px; }
.mm-wh-lv { font-size: 13px; font-weight: 600; color: var(--c-gold, #e8c46a); margin-right: 3px; }
.mm-wh-pos {
  flex: none;
  padding: 4px 10px;
  font-size: 12px;
  color: #f1e2c2;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(232, 196, 106, 0.3);
  border-radius: 12px;
}
.mm-wh-back { flex: none; }

.mm-wmap {
  position: relative;
  padding: 8px;
  background:
    radial-gradient(circle at 50% 50%, rgba(80, 50, 25, 0.35), transparent 70%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 9px),
    #140c07;
}
.mm-wcanvas { display: block; touch-action: none; cursor: crosshair; }

.mm-legend {
  flex: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px 10px;
  margin-top: 8px;
  padding: 7px 10px;
  background: rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(232, 196, 106, 0.18);
  border-radius: var(--radius, 3px);
  box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.5);
}
.mm-lg { display: flex; align-items: center; gap: 6px; min-width: 0; height: 20px; font-size: 12px; color: #dccbaa; white-space: nowrap; }
.mm-lg span { overflow: hidden; text-overflow: ellipsis; }
.mm-lg-ico { flex: none; width: 20px; height: 20px; }

.mm-wside {
  display: flex;
  flex-direction: column;
  width: 320px;
  min-height: 0;
  height: calc(var(--mm-wsize, 600px) + 70px);
}
.mm-tabs { flex: none; margin-bottom: 6px; }
.mm-side-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}
.mm-side-body > .section-title:first-child { margin-top: 2px; }
.mm-side-body .list { overflow: visible; }

.mm-route, .mm-npc, .mm-mon, .mm-maprow { gap: 9px; padding: 5px 8px; min-height: 40px; }
.mm-route.disabled, .mm-npc.disabled, .mm-mon.disabled { opacity: 1; cursor: default; }
.mm-route.disabled:hover, .mm-npc.disabled:hover, .mm-mon.disabled:hover { background: rgba(255, 255, 255, 0.025); border-color: transparent; }
.mm-route.locked .mm-rt-name { color: #d8b0a8; }
.mm-ico { flex: none; width: 18px; height: 18px; }
.mm-mon .mm-ico { width: 20px; height: 20px; }
.mm-rt-main, .mm-mr-main { flex: 1 1 auto; min-width: 0; }
.mm-rt-name, .mm-mr-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--c-text, #f3e6c8);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.mm-rt-sub, .mm-mr-sub {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 7px;
  margin-top: 1px;
  font-size: 11.5px;
  line-height: 1.35;
  color: #cdbb97;
}
.mm-dist {
  flex: none;
  font-size: 11px;
  color: var(--c-gold, #e8c46a);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.mm-dist:empty { display: none; }

.mm-thumb {
  flex: none;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 3px;
  background: #2a1a10;
  box-shadow: 0 0 0 1px #0b0503, 0 0 0 2px rgba(184, 137, 63, 0.7);
}
.mm-thumb canvas { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: auto; }
.mm-maprow.active .mm-thumb { box-shadow: 0 0 0 1px #0b0503, 0 0 0 2px #f0d488, 0 0 10px rgba(232, 196, 106, 0.5); }
.mm-maprow.selected { background: rgba(120, 70, 230, 0.18); border-color: rgba(195, 155, 255, 0.5); }
.mm-mr-lv { color: var(--c-gold, #e8c46a); font-weight: 600; }
.mm-here, .mm-link {
  flex: none;
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 16px;
  border-radius: 8px;
}
.mm-here { color: #2a1608; background: linear-gradient(180deg, #fff0b8, #e8c46a 55%, #b08a3a); }
.mm-link { color: var(--c-gold, #e8c46a); border: 1px solid rgba(232, 196, 106, 0.55); }

.mm-tag {
  display: inline-flex;
  align-items: center;
  padding: 0 6px;
  font-size: 10.5px;
  font-weight: 500;
  line-height: 16px;
  white-space: nowrap;
  border-radius: 8px;
  color: #efe3c6;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.mm-tag-safe { color: #c6f5b5; background: rgba(95, 191, 74, 0.18); border-color: rgba(125, 220, 106, 0.5); }
.mm-tag-pvp { color: #ffd0c6; background: rgba(224, 65, 47, 0.25); border-color: rgba(255, 107, 91, 0.6); }
.mm-tag-f1 { color: #cfe7ff; background: rgba(111, 183, 255, 0.18); border-color: rgba(111, 183, 255, 0.55); }
.mm-tag-f2 { color: #ffd6cf; background: rgba(255, 107, 91, 0.18); border-color: rgba(255, 107, 91, 0.55); }
.mm-tag-boss { color: #ecd6ff; background: rgba(155, 77, 219, 0.25); border-color: rgba(199, 125, 255, 0.6); }
.mm-tag-dungeon { color: #e0d6c8; background: rgba(90, 70, 60, 0.4); border-color: rgba(180, 160, 140, 0.4); }
.mm-tag-min { color: #e8dcc0; }
.mm-tag.locked { color: #ffb4a8; border-color: rgba(255, 107, 91, 0.7); background: rgba(120, 20, 10, 0.35); }

.mm-npc-mark {
  flex: none;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
  color: #140904;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff6c0, #ffd84a 55%, #a07a18);
  box-shadow: 0 0 0 1px #140904;
}
.mm-npc-mark.q-available, .mm-npc-mark.q-ready {
  color: #ffd23f;
  background: radial-gradient(circle at 50% 40%, #4a2a10, #1a0d05);
  box-shadow: 0 0 0 1px #ffd23f, 0 0 8px rgba(255, 210, 63, 0.6);
  text-shadow: 0 0 4px rgba(255, 200, 60, 0.9);
}
.mm-npc-mark.q-progress { color: #d8d0bf; background: radial-gradient(circle at 50% 40%, #3a2e22, #1a120b); box-shadow: 0 0 0 1px #9a907e; }
.mm-svc {
  padding: 0 5px;
  font-size: 10.5px;
  line-height: 15px;
  color: #e8dcc0;
  border-radius: 7px;
  background: rgba(232, 196, 106, 0.1);
  border: 1px solid rgba(232, 196, 106, 0.25);
}
.mm-mon.boss .mm-rt-name { color: #ffb09a; }
.lv-grey { color: #9a9288; }
.lv-white { color: #f3e6c8; }
.lv-yellow { color: #ffd84a; }
.lv-red { color: #ff6b5b; }

.mm-wwin.narrow .mm-wbody { flex-direction: column; overflow-y: auto; max-height: calc(100vh - 70px); }
.mm-wwin.narrow .mm-wside { width: auto; height: auto; }
.mm-wwin.narrow .mm-side-body { max-height: 340px; }
.mm-wwin.narrow .mm-legend { grid-template-columns: repeat(3, minmax(0, 1fr)); }

@media (max-width: 720px) {
  .mm-mini { transform: scale(0.8); }
}
@media (max-height: 560px) {
  .mm-mini { transform: scale(0.78); }
}