/* Interactive map: the dashboard's panels and gold accents around a pan-and-zoom stage. Marker sizes stay constant on screen. */
#map-view main { max-width: 1680px; padding-top: 24px; }
#map-view main > * { animation: none; }
.map-intro h1 { font: 400 clamp(26px, 3vw, 32px)/1.2 var(--display); margin: 0 0 8px; letter-spacing: -.02em; }
.map-intro .intro-copy { max-width: 70ch; color: var(--dim); margin: 0 0 16px; }
#map-view footer a { color: var(--gold); }
#map-app a { color: var(--gold); text-underline-offset: 4px; }
#map-app ul { list-style: none; margin: 0; padding: 0; }
:where(#map-app) li { display: block; padding: 0; border: 0; border-radius: 0; background: none; min-width: 0; }

.map-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 360px); gap: var(--section-gap); align-items: start; }
.map-main { display: grid; gap: 10px; min-width: 0; }
.map-side { display: grid; gap: var(--section-gap); min-width: 0; }
.map-panel { min-width: 0; }
.map-panel > * + * { margin-top: 10px; }
.map-panel .head { margin-bottom: 10px; }
.map-panel .hint { margin: 0; }
.map-warning { color: var(--boss); }

.map-toolbar { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px 20px; }
.map-zones { margin: 0; padding: 0; border: 0; min-width: 0; }
.map-zones legend { margin: 0 0 6px; padding: 0; color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.map-zone-options { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.map-zone-options label { position: relative; display: grid; align-content: center; min-height: 44px; padding: 6px 14px; border-radius: 7px; cursor: pointer; color: var(--dim); transition: background-color .2s, color .2s; }
.map-zone-options label:hover { color: var(--text); background: #ffffff09; }
.map-zone-options input { position: absolute; opacity: 0; pointer-events: none; }
.map-zone-options span { font-weight: 600; font-size: 14px; }
.map-zone-options small { font-size: 11px; }
.map-zone-options label:has(input:checked) { color: #1b1405; background: var(--gold); }
.map-zone-options label[data-faction="Elyos"]:has(input:checked) { background: var(--elyos); }
.map-zone-options label[data-faction="Asmodian"]:has(input:checked) { background: var(--asmo); }
.map-zone-options label[data-faction="Abyss"]:has(input:checked) { background: var(--abyss); }
.map-zone-options label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.map-go { display: grid; gap: 6px; min-width: min(100%, 260px); color: var(--dim); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.map-go select { min-height: 44px; width: 100%; text-transform: none; letter-spacing: 0; }

/* Stage. Dragging is handled in script, so the browser must not scroll or zoom the page from a touch on the map. */
.map-viewport { position: relative; height: clamp(440px, calc(100vh - 330px), 880px); overflow: hidden; border: 1px solid var(--line2); border-radius: 12px; background: #141a2b; touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; overscroll-behavior: contain; }
.map-viewport.dragging { cursor: grabbing; }
.map-viewport:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.map-world { position: absolute; left: 0; top: 0; transform-origin: 0 0; overflow: hidden; }
.map-overview, .map-tile { position: absolute; max-width: none; user-select: none; -webkit-user-drag: none; }
.map-overview { left: 0; top: 0; width: 100%; height: 100%; }
.map-tiles { position: absolute; inset: 0; }
.map-tile { opacity: 0; transition: opacity .2s; }
.map-tile.ready { opacity: 1; }
.map-sprite { position: absolute; pointer-events: none; }
.map-pins { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; --inv: 1; --dot: 1; }
.map-pins .pin { transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) scale(var(--inv)); }
.map-pins .map-ring { fill: none; stroke: #fff; stroke-width: 2.5; filter: drop-shadow(0 0 3px #000c); }
.map-pins .dots { fill: none; stroke-width: calc(10px * var(--inv)); stroke-linecap: round; opacity: .92; }
.map-pins .place { fill: #f3ecd6; stroke: #1a1408; stroke-width: 3px; paint-order: stroke; stroke-linejoin: round; font: 700 13px var(--ui); text-anchor: middle; dominant-baseline: middle;
  transform: translate(calc(var(--x) * 1px), calc(var(--y) * 1px)) scale(var(--inv)); }
.map-pins .place.r2 { font-size: 11px; font-weight: 600; display: none; }
.map-pins[data-detail="1"] .place.r2 { display: inline; }

.map-zoom { position: absolute; right: 12px; top: 12px; display: grid; gap: 6px; }
.map-zoom button { display: grid; place-items: center; width: 44px; height: 44px; font: 600 20px var(--ui); color: var(--text); background: #11162ae6; border: 1px solid #394360; border-radius: 10px; cursor: pointer; }
.map-zoom button:hover { border-color: var(--gold2); }
.map-card { position: absolute; left: 12px; bottom: 12px; width: min(340px, calc(100% - 24px)); max-height: calc(100% - 24px); overflow: auto; padding: 14px 16px; background: #11162af2; border: 1px solid var(--gold2); border-radius: 10px;
  box-shadow: 0 12px 32px #000a; cursor: auto; user-select: text; -webkit-user-select: text; touch-action: pan-y; }
.map-card > * { margin: 0; }
.map-card > * + * { margin-top: 6px; }
.map-card h3 { font: 600 17px/1.3 var(--ui); padding-right: 36px; overflow-wrap: anywhere; }
.map-card p { font-size: 13px; color: var(--dim); overflow-wrap: anywhere; }
.map-card .map-card-kicker { color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding-right: 36px; }
.map-card-close { position: absolute; top: 4px; right: 4px; width: 44px; height: 44px; font-size: 22px; color: var(--dim); background: none; border: 0; cursor: pointer; }
.map-card-close:hover { color: var(--text); }
.map-card .btn { margin-top: 10px; }
.map-card.has-portrait .pet-portrait { float: left; margin: 0 12px 4px 0; }
.map-card.has-portrait h3, .map-card.has-portrait .map-card-kicker { padding-left: 0; }
.map-status { margin: 0; color: var(--dim); font-size: 13px; min-height: 1.5em; }

.map-checks { display: grid; gap: 2px; }
.map-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 4px; cursor: pointer; }
.map-check input { width: 18px; height: 18px; accent-color: var(--gold); flex: none; }
.map-check span { flex: 1; min-width: 0; }
.map-check small { color: var(--dim); font-variant-numeric: tabular-nums; }
.map-choice { margin: 0; padding: 0; border: 0; min-width: 0; }
.map-options { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); }
.map-options label { position: relative; flex: 1 1 auto; display: grid; place-items: center; min-height: 44px; padding: 6px 12px; border-radius: 7px; cursor: pointer; color: var(--dim); font-size: 14px; font-weight: 600; text-align: center; }
.map-options label:hover { color: var(--text); background: #ffffff09; }
.map-options input { position: absolute; opacity: 0; pointer-events: none; }
.map-options label:has(input:checked) { color: #1b1405; background: var(--gold); }
.map-options label:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.map-reset { width: 100%; }
.map-legend { display: grid; gap: 4px; }
.map-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); }
.map-legend span { flex: 1; }
.map-legend small { font-variant-numeric: tabular-nums; }
.map-material select, .map-pet-search { width: 100%; min-height: 44px; }
#map-app input[type="search"] { width: 100%; min-height: 44px; font: 500 14px var(--ui); color: var(--text); background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 6px 12px; }
#map-app input[type="search"]:hover { border-color: var(--gold2); }
.map-genus { display: flex; flex-wrap: wrap; gap: 4px; }
.map-genus button { min-height: 44px; padding: 4px 12px; font: 600 13px var(--ui); color: var(--dim); background: none; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; }
.map-genus button:hover { color: var(--text); border-color: var(--gold2); }
.map-genus button[aria-pressed="true"] { color: #1b1405; background: var(--genus, var(--gold)); border-color: transparent; }
.map-pet-actions { display: flex; gap: 8px; }
.map-pet-actions .btn { flex: 1; min-height: 44px; }
.map-pet-list { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 8px; }
.map-pet-list label { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 12px; cursor: pointer; }
.map-pet-list label:hover { background: #ffffff09; }
.map-pet-list input { width: 18px; height: 18px; accent-color: var(--genus, var(--gold)); flex: none; }
.map-pet-list span { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 14px; }
.map-pet-list .pet-portrait { width: 32px; height: 32px; border-radius: 6px; }
.map-pet-list small { color: var(--dim); font-variant-numeric: tabular-nums; }
.map-pet-list > .hint { padding: 12px; }

@media (max-width: 1100px) {
  .map-layout { grid-template-columns: minmax(0, 1fr); }
  .map-viewport { height: clamp(380px, 68vh, 760px); }
}
@media (max-width: 700px) {
  #map-view main { padding-top: 16px; }
  .map-zone-options { display: grid; grid-template-columns: repeat(2, 1fr); width: 100%; }
  .map-zones, .map-go { width: 100%; }
  .map-viewport { height: min(64vh, 560px); min-height: 360px; }
  .map-card { left: 8px; right: 8px; bottom: 8px; width: auto; max-height: 55%; }
}
@media (prefers-reduced-motion: reduce) { .map-tile { transition: none; } }