/* map.php - interactive map in the portal look: map browser tabs, a framed game window for the map, a side window. */
.mx { --mx-edge: #3a2f1b; --mx-panel: #0c1018; --mx-panel-2: #121826; --mx-mob: #5fd68f; --mx-elite: #6db8ff; --mx-mini: #ffab4a; --mx-boss: #ff5a4a; --mx-portal: #b993ff; --mx-npc: #ffd65a;
  max-width: 1500px; margin: 0 auto; padding: 22px var(--p-gr, 16px) 48px var(--p-gl, 16px); display: flex; flex-direction: column; gap: 16px; color: var(--p-text, #e9e3d2); font-family: var(--p-body, "Noto Sans", sans-serif); }

/* ---------- map browser ---------- */
.mx-browser { display: flex; flex-direction: column; gap: 0; }
.mx-tabs { display: flex; align-items: flex-end; gap: 4px; border-bottom: 1px solid var(--p-gold-lo, #7d5e25); flex-wrap: wrap; }
.mx-tab { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px 9px; border: 1px solid var(--mx-edge); border-bottom: 0; background: linear-gradient(#141a26, #0b0f17); color: var(--p-muted, #a59f8e);
  font: 600 15px/1 var(--p-display, "Barlow Condensed", sans-serif); letter-spacing: .08em; text-transform: uppercase; cursor: pointer; clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 8px); }
.mx-tab span { min-width: 20px; padding: 2px 6px; border-radius: 3px; background: rgba(255,255,255,.06); font-size: 12px; letter-spacing: 0; color: var(--p-dim, #8a8577); }
.mx-tab::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: currentColor; opacity: .35; }
.mx-tab.gL { color: #8cc6ff; } .mx-tab.gF { color: #ff9a85; } .mx-tab.gP { color: #e2c27a; } .mx-tab.gD { color: #c4b3ff; } .mx-tab.gJ { color: var(--p-gold-hi, #f7dd9b); }
.mx-tab:hover { background: linear-gradient(#1b2232, #0f141f); }
.mx-tab.is-on { background: linear-gradient(#2a2112, #120e08); border-color: var(--p-gold-lo, #7d5e25); margin-bottom: -1px; padding-bottom: 10px; }
.mx-tab.is-on::before { opacity: 1; box-shadow: 0 0 10px currentColor; }
.mx-tab:focus-visible, .mx-maplist a:focus-visible, .mx-mark:focus-visible, .mx-side button:focus-visible { outline: 2px solid var(--p-gold-hi, #f7dd9b); outline-offset: 2px; }
.mx-back { margin-left: auto; align-self: center; padding: 6px 12px; color: var(--p-gold, #d9ad57); font-size: 13.5px; text-decoration: none; border: 1px solid rgba(217,173,87,.35); }
.mx-back:hover { background: rgba(217,173,87,.1); }
.mx-maplist { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 12px 14px; background: linear-gradient(rgba(42,33,18,.55), rgba(12,16,24,.6)); border: 1px solid var(--p-gold-lo, #7d5e25); border-top: 0; }
.mx-maplist + .mx-maplist { border-top: 1px dashed rgba(125,94,37,.4); }
.mx-maplist__label { width: 100%; font: 600 12px/1 var(--p-display, sans-serif); letter-spacing: .12em; text-transform: uppercase; color: var(--p-dim, #8a8577); }
.mx.is-js .mx-maplist__label { display: none; }
.mx.is-js .mx-maplist[data-off] { display: none; }
.mx.is-js .mx-maplist + .mx-maplist { border-top: 0; }
.mx-maplist a { padding: 6px 12px; color: #d8cfb6; text-decoration: none; font-size: 14px; border: 1px solid rgba(217,173,87,.18); background: rgba(8,10,15,.55); }
.mx-maplist a:hover { border-color: rgba(217,173,87,.6); color: #fff; }
.mx-maplist a.is-on { color: #17120a; font-weight: 700; border-color: var(--p-gold-hi, #f7dd9b); background: linear-gradient(var(--p-gold-hi, #f7dd9b), var(--p-gold, #d9ad57)); }

/* ---------- layout ---------- */
.mx-main { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }

/* ---------- map window ---------- */
.mx-window { position: relative; width: min(100%, calc(100vh - 150px)); min-width: min(100%, 560px); justify-self: center; background: #05070b; border: 1px solid var(--p-gold-lo, #7d5e25); box-shadow: 0 0 0 1px #000, 0 18px 40px rgba(0,0,0,.55); }
.mx-window::before, .mx-window::after { content: ""; position: absolute; z-index: 4; width: 18px; height: 18px; border: 2px solid var(--p-gold, #d9ad57); pointer-events: none; }
.mx-window::before { top: -5px; left: -5px; border-right: 0; border-bottom: 0; }
.mx-window::after { bottom: -5px; right: -5px; border-left: 0; border-top: 0; }
.mx-title { display: flex; align-items: center; gap: 12px; padding: 9px 14px; background: linear-gradient(#211a0e, #0e0b06); border-bottom: 1px solid var(--p-gold-lo, #7d5e25); }
.mx-title h2 { margin: 0; font: 700 22px/1.1 var(--p-display, sans-serif); letter-spacing: .05em; text-transform: uppercase; color: var(--p-gold-hi, #f7dd9b); text-wrap: balance; }
.mx-title__group { padding: 3px 8px; font: 600 12px/1 var(--p-display, sans-serif); letter-spacing: .1em; text-transform: uppercase; border: 1px solid currentColor; }
.mx-title__group.gL { color: #8cc6ff; } .mx-title__group.gF { color: #ff9a85; } .mx-title__group.gP { color: #e2c27a; } .mx-title__group.gD { color: #c4b3ff; } .mx-title__group.gJ { color: var(--p-gold-hi, #f7dd9b); }
.mx-title__lv { margin-left: auto; font: 600 16px/1 var(--p-display, sans-serif); letter-spacing: .06em; color: var(--p-text, #e9e3d2); }
.mx-window.is-full { width: 100vw; height: 100vh; min-width: 0; display: flex; flex-direction: column; }
.mx-window.is-full .jo-map__stage { flex: 1; aspect-ratio: auto; height: auto; width: min(100vw, calc(100vh - 46px)); margin: 0 auto; }

/* ---------- stage ---------- */
.jo-map__stage { --k: 1; position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: #0d0b08; touch-action: pan-y; user-select: none; }
.jo-map__stage.is-zoomed { cursor: grab; touch-action: none; }
.jo-map__stage.is-dragging { cursor: grabbing; }
.jo-map__view { position: absolute; inset: 0; transform-origin: 0 0; }
.jo-map__stage.is-dragging .jo-map__view { will-change: transform; }
.jo-map__view.is-gliding { transition: transform .35s cubic-bezier(.2,.7,.2,1); }
.jo-map__stage img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; -webkit-user-drag: none; }
.jo-map__stage img.jo-map__terrain { opacity: 0; transition: opacity .25s; }
.jo-map__stage.is-terrain img.jo-map__terrain { opacity: 1; }
.jo-map__stage svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.jo-map__marks { position: absolute; inset: 0; }

/* spawn spots: only when zoomed in close or when they belong to the current pick */
.jo-map__stage circle { fill: var(--mx-mob); stroke: #06120b; stroke-width: 1.4; opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(var(--k)); transition: opacity .2s; }
.jo-map__stage circle.k1 { fill: var(--mx-elite); } .jo-map__stage circle.k2 { fill: var(--mx-mini); } .jo-map__stage circle.k3 { fill: var(--mx-boss); }
.jo-map__stage.is-close circle { opacity: .75; pointer-events: auto; cursor: pointer; }
.jo-map__stage.is-filtered circle.is-hit, .jo-map__stage.has-pick circle.is-hit { opacity: 1; pointer-events: auto; cursor: pointer; stroke: #fff; stroke-width: 2; transform: scale(calc(var(--k) * 1.25)); }
.jo-map__stage.is-close.is-filtered circle:not(.is-hit) { opacity: .18; }

/* markers (HTML, counter-scaled so they keep their size on screen) */
.mx-mark { position: absolute; display: inline-flex; align-items: center; gap: 4px; padding: 0 7px; height: 22px; transform: scale(var(--k)) translate(-50%, -50%); transform-origin: 0 0;
  border: 1px solid rgba(0,0,0,.75); border-radius: 3px; background: rgba(7,12,9,.86); color: #fff; font: 700 12.5px/1 var(--p-display, sans-serif); letter-spacing: .03em; white-space: nowrap; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0,0,0,.6); transition: opacity .15s, background-color .15s; }
.mx-mark:hover { z-index: 3; }
.mx-mob { border-color: rgba(95,214,143,.75); color: #c9ffdc; }
.mx-mob::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--mx-mob); box-shadow: 0 0 6px var(--mx-mob); }
.mx-mob.k1 { border-color: rgba(109,184,255,.8); color: #d4ebff; } .mx-mob.k1::before { display: none; } .mx-mob.k1 i { color: var(--mx-elite); font-size: 10px; }
.mx-mob.k2, .mx-mob.k3 { z-index: 2; height: 26px; padding: 0 9px; font-size: 13.5px; }
.mx-mob.k2 { border-color: var(--mx-mini); background: rgba(40,22,4,.92); color: #ffe2bd; } .mx-mob.k2::before, .mx-mob.k3::before { display: none; }
.mx-mob.k2 i { color: var(--mx-mini); }
.mx-mob.k3 { border-color: var(--mx-boss); background: rgba(48,8,6,.94); color: #ffd9d4; box-shadow: 0 0 12px rgba(255,90,74,.45); }
.mx-mob.k3 i { color: var(--mx-boss); }
.mx-mob small { font-size: 11px; opacity: .75; }
/* crowded: a small dot that still shows the spot */
.mx-mob.is-dot { width: 8px; height: 8px; opacity: .8; padding: 0; border-radius: 50%; background: var(--mx-mob); border: 1.5px solid #06120b; font-size: 0; gap: 0; box-shadow: none; }
.mx-mob.is-dot::before, .mx-mob.is-dot i, .mx-mob.is-dot b, .mx-mob.is-dot small { display: none; }
.mx-mob.k1.is-dot { background: var(--mx-elite); } .mx-mob.k2.is-dot { background: var(--mx-mini); }
.jo-map__stage.is-close .mx-mob.is-dot { opacity: 0; pointer-events: none; }
.mx-npc { width: 24px; height: 24px; padding: 0; justify-content: center; border-radius: 50%; border: 1.5px solid #2b1e05; background: radial-gradient(#ffe590, #d9a73a); color: #2b1e05; font-size: 11px; z-index: 2; }
.mx-npc.n-gate { background: radial-gradient(#e5d4ff, #9b74f0); border-color: #241444; color: #241444; }
.mx-npc.n-quest { background: radial-gradient(#fff4a8, #f2c230); }
.mx-npc.n-warehouse, .mx-npc.n-guild, .mx-npc.n-reset { background: radial-gradient(#cfe6ff, #6aa6e6); border-color: #0b2340; color: #0b2340; }
.mx-portal { height: 24px; border-color: var(--mx-portal); background: rgba(24,12,44,.9); color: #e8dcff; font-size: 12.5px; z-index: 2; }
.mx-portal i { color: var(--mx-portal); }
.mx-mark.is-pick { outline: 2px solid #fff; outline-offset: 2px; z-index: 4; }
/* filtering: everything else steps back */
.jo-map__stage.is-filtered .mx-mob:not(.is-hit) { opacity: .2; }
.jo-map__stage.is-filtered .mx-mob.is-hit { z-index: 3; box-shadow: 0 0 0 2px #fff, 0 0 14px rgba(255,255,255,.4); }
.jo-map__stage.is-filtered .mx-mob.is-hit.is-dot { opacity: 1; }
.jo-map__stage.is-searching .mx-npc:not(.is-hit), .jo-map__stage.is-searching .mx-portal:not(.is-hit) { opacity: .25; }
.jo-map__stage.is-searching .mx-npc.is-hit, .jo-map__stage.is-searching .mx-portal.is-hit { box-shadow: 0 0 0 2px #fff; }
.jo-map__stage.no-mobs .mx-mob, .jo-map__stage.no-mobs circle, .jo-map__stage.no-npcs .mx-npc, .jo-map__stage.no-portals .mx-portal { display: none; }

/* controls */
.jo-map__zoom { position: absolute; right: 10px; top: 10px; z-index: 5; display: flex; flex-direction: column; gap: 4px; }
.jo-map__zoom button, .jo-map__layers button { border: 1px solid var(--p-gold-lo, #7d5e25); background: linear-gradient(#1c1a14, #0b0a07); color: var(--p-gold-hi, #f7dd9b); cursor: pointer; box-shadow: 0 2px 6px rgba(0,0,0,.6); }
.jo-map__zoom button { width: 36px; height: 36px; font-size: 14px; }
.jo-map__zoom button:hover, .jo-map__layers button:hover { border-color: var(--p-gold, #d9ad57); background: linear-gradient(#2a2416, #120f08); }
.jo-map__zoom button.is-on { background: linear-gradient(var(--p-gold-hi, #f7dd9b), var(--p-gold, #d9ad57)); color: #17120a; }
.jo-map__layers { position: absolute; left: 10px; bottom: 10px; z-index: 5; display: flex; gap: 4px; flex-wrap: wrap; }
.jo-map__layers button { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; font: 600 13px/1 var(--p-display, sans-serif); letter-spacing: .06em; text-transform: uppercase; }
.jo-map__layers button[aria-pressed="false"] { opacity: .5; color: var(--p-dim, #8a8577); }
.mx-key { display: inline-block; width: 10px; height: 10px; }
.mx-key--mob { border-radius: 50%; background: var(--mx-mob); }
.mx-key--npc { border-radius: 50%; background: var(--mx-npc); }
.mx-key--portal { background: var(--mx-portal); transform: rotate(45deg) scale(.85); }
.jo-map__tip { position: absolute; z-index: 6; display: none; pointer-events: none; max-width: 280px; padding: 7px 10px; background: rgba(8,10,15,.96); border: 1px solid var(--p-gold-lo, #7d5e25); color: var(--p-text, #e9e3d2); font-size: 13px; line-height: 1.45; white-space: nowrap; box-shadow: 0 6px 16px rgba(0,0,0,.6); }
.jo-map__tip small { color: var(--p-muted, #a59f8e); margin-left: 4px; }

/* ---------- side window ---------- */
.mx-side { position: sticky; top: 90px; display: flex; flex-direction: column; gap: 10px; min-width: 0; max-height: calc(100vh - 110px); }
.mx-search { position: relative; flex: none; }
.mx-side > :not(.mx-list) { flex: none; }
.mx-search i { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--p-dim, #8a8577); font-size: 14px; }
.mx-search input { width: 100%; box-sizing: border-box; padding: 12px 14px 12px 38px; border: 1px solid var(--p-gold-lo, #7d5e25); background: #080b11; color: var(--p-text, #e9e3d2); font-size: 15px; border-radius: 0; }
.mx-search input:focus { outline: none; border-color: var(--p-gold, #d9ad57); box-shadow: 0 0 0 1px var(--p-gold, #d9ad57); }
.mx-detail { padding: 14px 15px; background: linear-gradient(var(--mx-panel-2), var(--mx-panel)); border: 1px solid var(--p-gold-lo, #7d5e25); max-height: 46vh; overflow: auto; }
.mx-hint { margin: 0; color: var(--p-muted, #a59f8e); font-size: 14px; line-height: 1.5; }
.mx-detail__head { display: flex; align-items: center; gap: 12px; }
.mx-detail__head h3 { margin: 0; font: 700 20px/1.1 var(--p-display, sans-serif); letter-spacing: .03em; color: var(--p-gold-hi, #f7dd9b); }
.mx-detail__head small { color: var(--p-muted, #a59f8e); font-size: 13px; }
.mx-detail__lv { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--mx-mob); background: rgba(95,214,143,.1); color: #c9ffdc; font: 700 18px/1 var(--p-display, sans-serif); }
.mx-detail__lv.k1 { border-color: var(--mx-elite); color: #d4ebff; background: rgba(109,184,255,.1); }
.mx-detail__lv.k2 { border-color: var(--mx-mini); color: #ffe2bd; background: rgba(255,171,74,.12); }
.mx-detail__lv.k3 { border-color: var(--mx-boss); color: #ffd9d4; background: rgba(255,90,74,.14); }
.mx-drops { list-style: none; margin: 12px 0 0; padding: 0; }
.mx-drops li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-top: 1px solid rgba(217,173,87,.12); font-size: 14px; }
.mx-drops b { color: var(--p-gold, #d9ad57); white-space: nowrap; }
.mx-drops summary { cursor: pointer; }
.mx-drops details p { margin: 5px 0 0; color: var(--p-muted, #a59f8e); font-size: 12.5px; line-height: 1.5; }
.mx-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.mx-act { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border: 1px solid rgba(217,173,87,.4); background: rgba(217,173,87,.06); color: var(--p-gold-hi, #f7dd9b); font-size: 13px; text-decoration: none; cursor: pointer; }
.mx-act:hover { background: rgba(217,173,87,.16); }
.mx-act.is-done { border-color: var(--mx-mob); color: var(--mx-mob); }
.mx-chip[hidden] { display: none; }
.mx-chip { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--p-gold, #d9ad57); background: none; color: var(--p-gold-hi, #f7dd9b); font-size: 13.5px; cursor: pointer; }
.mx-listtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--p-gold-lo, #7d5e25); }
.mx-listtabs button { flex: 1; padding: 9px 10px; border: 1px solid transparent; border-bottom: 0; background: none; color: var(--p-muted, #a59f8e); font: 600 14px/1 var(--p-display, sans-serif); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; }
.mx-listtabs button span { color: var(--p-dim, #8a8577); font-size: 12px; }
.mx-listtabs button.is-on { color: var(--p-gold-hi, #f7dd9b); border-color: var(--p-gold-lo, #7d5e25); background: linear-gradient(#211a0e, #0c1018); margin-bottom: -1px; }
.mx-list { flex: 1; min-height: 160px; overflow: auto; background: var(--mx-panel); border: 1px solid var(--p-gold-lo, #7d5e25); border-top: 0; }
.mx-list button { display: flex; width: 100%; align-items: center; gap: 10px; padding: 8px 12px; border: 0; border-bottom: 1px solid rgba(217,173,87,.08); background: none; color: var(--p-text, #e9e3d2); font-size: 14px; text-align: left; cursor: pointer; }
.mx-list button:hover, .mx-list button.is-on { background: rgba(217,173,87,.12); }
.mx-row__lv { flex: none; width: 30px; height: 22px; display: grid; place-items: center; background: rgba(255,255,255,.05); color: var(--p-muted, #a59f8e); font: 700 13px/1 var(--p-display, sans-serif); }
.mx-row__name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mx-list em { margin-left: auto; flex: none; padding: 3px 7px; font: 600 11.5px/1 var(--p-display, sans-serif); letter-spacing: .06em; text-transform: uppercase; font-style: normal; color: var(--p-muted, #a59f8e); border: 1px solid rgba(255,255,255,.12); }
.mx-list em.k1 { color: #8fd0ff; border-color: rgba(109,184,255,.45); } .mx-list em.k2 { color: #ffb964; border-color: rgba(255,171,74,.5); } .mx-list em.k3 { color: #ff8d80; border-color: rgba(255,90,74,.55); }
.mx-list p { margin: 0; padding: 14px; color: var(--p-muted, #a59f8e); font-size: 14px; }
.mx-ico { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: radial-gradient(#ffe590, #d9a73a); color: #2b1e05; font-size: 11px; }
.mx-detail__head .mx-ico { width: 42px; height: 42px; font-size: 16px; }
.mx-ico.n-gate { background: radial-gradient(#e5d4ff, #9b74f0); color: #241444; }
.mx-ico.n-warehouse, .mx-ico.n-guild, .mx-ico.n-reset { background: radial-gradient(#cfe6ff, #6aa6e6); color: #0b2340; }
.mx-ico.portal { border-radius: 3px; background: rgba(24,12,44,.9); border: 1px solid var(--mx-portal); color: var(--mx-portal); }

/* ---------- smaller screens ---------- */
@media (max-width: 1100px) {
  .mx-main { grid-template-columns: minmax(0, 1fr) 320px; }
}
@media (max-width: 980px) {
  .mx-main { grid-template-columns: minmax(0, 1fr); }
  .mx-window { width: 100%; min-width: 0; }
  .mx-side { position: static; max-height: none; }
  .mx-list { max-height: 60vh; }
  .mx-detail { max-height: none; }
}
@media (max-width: 600px), (pointer: coarse) {
  .jo-map__zoom button { width: 42px; height: 42px; font-size: 16px; }
  .jo-map__layers button { min-height: 38px; }
  .mx-list button { padding: 11px 12px; font-size: 15px; }
}
@media (max-width: 600px) {
  .mx { padding-top: 12px; gap: 12px; }
  .mx-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .mx-tabs::-webkit-scrollbar { display: none; }
  .mx-tab { flex: none; padding: 10px 13px 9px; font-size: 14px; }
  .mx-back { display: none; }
  .mx-maplist { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 10px; }
  .mx-maplist::-webkit-scrollbar { display: none; }
  .mx-maplist a { flex: none; white-space: nowrap; padding: 9px 13px; }
  .mx-title h2 { font-size: 19px; }
  .mx-search input { font-size: 16px; }
  .jo-map__tip { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .jo-map__view.is-gliding { transition: none; }
}