.hoimap {
  --ink: #0b1230;
  --ink-2: #161f45;
  --panel-line: rgba(240, 215, 140, 0.22);
  --ray: #24306b;
  --pin: #d4af37;
  --nav-h: 64px;
  background: #05060f;
}
.hoimap .nav { position: relative; height: var(--nav-h); padding-top: 0; padding-bottom: 0; background: #05060f; border-bottom: 1px solid rgba(240, 215, 140, 0.12); }

#mapwrap { position: relative; height: calc(100svh - var(--nav-h)); min-height: 440px; overflow: hidden; background: #cfd6e4; }
#map { position: absolute; inset: 0; }
#mapwrap button { font: inherit; cursor: pointer; }
#mapwrap button:focus-visible { outline: 2px solid var(--gold-light); outline-offset: 2px; }

#dirlabels { position: absolute; z-index: 0; left: 0; top: 0; width: 0; height: 0; pointer-events: none; }

.hoimap .maplibregl-marker { z-index: 1; } 

#dirlabels span { position: absolute; transform: translate(-50%, -50%); white-space: nowrap; font: 700 21px/1 var(--font-sans); letter-spacing: .04em;
  color: var(--gold-light); background: var(--ink); border: 2px solid #fff; border-radius: 8px; padding: 4px 9px; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
#dirlabels span.n { font-size: 26px; color: var(--ink); background: var(--pin); padding: 5px 11px; }

#mapwrap .top { position: absolute; z-index: 3; left: 0; right: 0; top: 0; padding: 10px max(12px, env(safe-area-inset-right, 0px)) 0 max(12px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 6px; pointer-events: none; }
#mapwrap .search { pointer-events: auto; display: flex; gap: 6px; background: var(--ink); border: 1px solid var(--panel-line); border-radius: 12px; padding: 6px; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
#mapwrap .seg { display: flex; background: var(--ink-2); border-radius: 9px; padding: 2px; flex: none; }
#mapwrap .seg button { border: 0; background: none; color: var(--fg-muted); font-size: 12.5px; padding: 6px 10px; border-radius: 7px; white-space: nowrap; }
#mapwrap .seg button[aria-pressed="true"] { background: var(--gold); color: #1a1405; font-weight: 700; }
#q { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--fg); font: inherit; font-size: 16px; padding: 6px 4px; outline: none; }
#q::placeholder { color: rgba(242, 239, 230, 0.45); }
#go { flex: none; border: 0; background: var(--ink-2); color: var(--fg); border-radius: 9px; padding: 0 12px; font-size: 13px; }
#mapwrap .results { pointer-events: auto; background: var(--ink); border: 1px solid var(--panel-line); border-radius: 12px; max-height: 45vh; overflow: auto; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
#mapwrap .results button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); background: none; color: var(--fg); padding: 10px 12px; font-size: 14px; }
#mapwrap .results button:last-child { border-bottom: 0; }
#mapwrap .results small { display: block; color: var(--fg-muted); font-size: 11.5px; }
#mapwrap .results .note { padding: 10px 12px; color: var(--fg-muted); font-size: 12.5px; }

#mapwrap .fab { position: absolute; z-index: 2; right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(var(--sheet-h, 190px) + 48px); display: flex; flex-direction: column; gap: 8px; }
#mapwrap .fab button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--panel-line); background: var(--ink); color: var(--fg); font-size: 11px; line-height: 1.1; padding: 0; box-shadow: 0 4px 14px rgba(0, 0, 0, .35); }
#mapwrap .fab #bPlace { border-color: var(--gold-dim); color: var(--gold-light); font-size: 10.5px; }
#mapwrap .fab #bPlace[aria-pressed="true"] { background: var(--gold); color: #1a1405; }

#mapwrap .sheet { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; background: var(--ink); border-top: 1px solid var(--panel-line); border-radius: 16px 16px 0 0;
  padding: 10px max(14px, env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) max(14px, env(safe-area-inset-left, 0px));
  display: flex; flex-direction: column; gap: 7px; box-shadow: 0 -6px 20px rgba(0, 0, 0, .3); }
#mapwrap .sheet-head { display: flex; align-items: flex-start; gap: 8px; }
#mapwrap .sheet-head #bSheet { flex: none; margin-left: auto; }
#mapwrap .sheet-body { display: flex; flex-direction: column; gap: 7px; }
#mapwrap .sheet.collapsed .sheet-body { display: none; }

#mapwrap .sheet.collapsed.show-home .sheet-body { display: flex; }
#mapwrap .sheet.collapsed.show-home .sheet-body > .row { display: none; }

@media (max-height: 720px) { #mapwrap .fab { flex-direction: row; } #mapwrap .sheet { max-height: calc(100% - 320px); overflow-y: auto; overscroll-behavior: contain; }
  #mapwrap.sheet-open .fab { display: none; } } 
#mapwrap .status { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 4px 10px; flex-wrap: wrap; min-height: 1.6em; }
#mapwrap .status b { color: var(--gold-light); font-size: 18px; font-weight: 700; letter-spacing: .04em; }
#mapwrap .status span { color: var(--fg-muted); font-size: 12.5px; }
#mapwrap .status .near { color: var(--gold-light); white-space: nowrap; } 

#mapwrap .status button.near { background: none; border: 0; border-radius: 0; padding: 8px 0; margin: -8px 0; font: inherit; line-height: inherit; text-decoration: underline dotted; text-underline-offset: 3px; cursor: pointer; }
#mapwrap .status button.near::after { content: "?"; display: inline-block; width: 1.25em; height: 1.25em; margin-left: 4px; border: 1px solid currentColor; border-radius: 50%; font-size: 10.5px; font-weight: 700; line-height: 1.15em; text-align: center; vertical-align: 1px; }
#mapwrap .status .near-note { flex-basis: 100%; margin: 2px 0 0; color: var(--fg); font-size: 12.5px; line-height: 1.6; }
#mapwrap .status .near-note[hidden] { display: none; }
#mapwrap .row { display: flex; align-items: center; gap: 6px 8px; flex-wrap: wrap; }
#mapwrap .row[hidden] { display: none; }
#mapwrap .lbl { color: var(--fg-muted); font-size: 12px; width: 5.2em; flex: none; }
#declIn { width: 4.6em; background: var(--ink-2); color: var(--fg); border: 1px solid var(--panel-line); border-radius: 8px; padding: 4px 6px; font: inherit; font-size: 16px; }
#mapwrap .unit { color: var(--fg-muted); font-size: 13px; }
#mapwrap button.small { border: 1px solid var(--panel-line); background: none; color: var(--fg-muted); border-radius: 8px; padding: 5px 8px; font-size: 12px; }
#mapwrap .decl { flex-basis: 100%; color: var(--fg-muted); font-size: 11.5px; padding-left: calc(5.2em + 8px); }

#mapwrap .globe-note { margin: 0; color: var(--fg-muted); font-size: 12px; line-height: 1.6; }
#mapwrap .foot { display: flex; gap: 8px; }
#mapwrap .foot button { flex: 1; border: 1px solid var(--gold-dim); background: var(--ink-2); color: var(--gold-light); border-radius: 10px; padding: 8px; font-size: 13px; }

.toast { position: absolute; z-index: 4; left: 50%; transform: translateX(-50%); bottom: calc(var(--sheet-h, 190px) + 48px); max-width: calc(100% - 32px);
  background: var(--ink-2); color: var(--fg); border: 1px solid var(--panel-line); border-radius: 14px; padding: 7px 14px; font-size: 12.5px; text-align: center; }
.toast[hidden] { display: none; }

.crosshair { position: absolute; z-index: 2; left: 50%; top: calc(var(--pad-top, 0px) + (100% - var(--pad-top, 0px) - var(--pad-bottom, 0px)) / 2); width: 44px; height: 44px; margin: -22px 0 0 -22px; pointer-events: none; }
.crosshair[hidden] { display: none; }
.crosshair svg { display: block; width: 100%; height: 100%; }
.crosshair path { fill: none; stroke-linecap: round; }
.crosshair .edge { stroke: #fff; stroke-width: 7; }
.crosshair .ink { stroke: var(--pin); stroke-width: 3; }
#mapwrap.placing #dirlabels, #mapwrap.placing .geonote { display: none; }

#mapwrap .placebar { display: flex; flex-direction: column; gap: 8px; }
#mapwrap .placebar[hidden] { display: none; }
#mapwrap .placebar p { margin: 0; color: var(--fg); font-size: 13px; line-height: 1.7; }
#mapwrap .place-btns { display: flex; gap: 8px; }
#mapwrap .place-btns .small { flex: none; padding: 8px 14px; font-size: 13px; }
#mapwrap .place-btns .primary { flex: 1; border: 1px solid var(--gold); background: var(--gold); color: #1a1405; font-weight: 700; border-radius: 10px; padding: 9px; font-size: 14px; }
#mapwrap .sheet.placing .sheet-head, #mapwrap .sheet.placing .sheet-body { display: none; }

.geonote { position: absolute; z-index: 4; right: max(12px, env(safe-area-inset-right, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); top: 76px;
  display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--ink); border: 1px solid var(--gold-dim); color: var(--fg); font-size: 12.5px; line-height: 1.7; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.geonote[hidden] { display: none; }
.geonote p { margin: 0; flex: 1; }
.geonote button { flex: none; }
.maperr { position: absolute; z-index: 4; left: 16px; right: 16px; top: 40%; padding: 14px 16px; border-radius: 11px; background: var(--ink); border: 1px solid var(--gold-dim); color: var(--fg); font-size: 13.5px; text-align: center; }
.maperr[hidden] { display: none; }

.hoimap .pin { width: 18px; height: 18px; border-radius: 50%; background: var(--pin); border: 3px solid var(--ink); box-shadow: 0 0 0 2px var(--pin); cursor: grab; }
.hoimap .pin.dest { width: 14px; height: 14px; background: #fff; border: 3px solid var(--pin); box-shadow: none; cursor: pointer; }

.hoimap .maplibregl-popup-content { background: var(--ink); color: var(--fg); border-radius: 12px; padding: 12px 14px; font: 13px/1.6 var(--font-sans); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
.hoimap .maplibregl-popup-anchor-bottom .maplibregl-popup-tip, .hoimap .maplibregl-popup-anchor-bottom-left .maplibregl-popup-tip, .hoimap .maplibregl-popup-anchor-bottom-right .maplibregl-popup-tip { border-top-color: var(--ink); }
.hoimap .maplibregl-popup-anchor-top .maplibregl-popup-tip, .hoimap .maplibregl-popup-anchor-top-left .maplibregl-popup-tip, .hoimap .maplibregl-popup-anchor-top-right .maplibregl-popup-tip { border-bottom-color: var(--ink); }
.hoimap .maplibregl-popup-anchor-left .maplibregl-popup-tip { border-right-color: var(--ink); }
.hoimap .maplibregl-popup-anchor-right .maplibregl-popup-tip { border-left-color: var(--ink); }
.hoimap .pop b { display: block; font-size: 20px; color: var(--gold-light); }
.hoimap .pop small { display: block; color: var(--fg-muted); font-size: 12px; max-width: 15em; }
.hoimap .maplibregl-ctrl-bottom-right, .hoimap .maplibregl-ctrl-bottom-left { bottom: var(--sheet-h, 190px); }
.hoimap .maplibregl-ctrl-top-right { display: none; }

@media (min-width: 768px) {
  #mapwrap .top { right: auto; width: 440px; padding-top: 14px; padding-left: 14px; }
  #mapwrap .sheet { left: 14px; right: auto; bottom: 14px; width: 420px; border: 1px solid var(--panel-line); border-radius: 14px; padding-bottom: 12px; }
  #mapwrap .fab { right: 14px; bottom: 48px; }
  .toast { bottom: 48px; }
  .geonote { right: auto; left: 14px; width: 440px; top: 80px; }
  .hoimap .maplibregl-ctrl-bottom-right { bottom: 0; }
  .hoimap .maplibregl-ctrl-bottom-left { bottom: calc(var(--sheet-h, 190px) + 14px); }
  .hoimap .maplibregl-ctrl-top-right { display: block; top: 8px; }
}

.hoimap .howto { position: relative; z-index: 1; max-width: 680px; margin: 0 auto; padding: 36px 18px 56px; color: var(--fg); font-size: 14px; line-height: 1.9; }
.hoimap .howto h1 { font-size: 1.2rem; color: var(--gold-light); letter-spacing: .08em; margin: 0 0 12px; }
.hoimap .howto h2 { font-size: 1rem; color: var(--gold-light); letter-spacing: .06em; margin: 28px 0 8px; }
.hoimap .howto p { margin: 0 0 12px; }
.hoimap .howto dt { color: var(--gold-light); font-weight: 600; margin-top: 12px; }
.hoimap .howto dd { margin: 2px 0 0; color: var(--fg-muted); }
.hoimap .howto ul { margin: 0 0 12px; padding-left: 1.3em; color: var(--fg-muted); }
.hoimap .howto .credit { font-size: 12px; color: var(--fg-muted); overflow-wrap: anywhere; }
.hoimap .howto a { color: var(--gold-light); }
.hoimap .howto .clear { border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .05); color: var(--fg); border-radius: 10px; padding: 9px 14px; font: inherit; font-size: 13px; cursor: pointer; }
.hoimap .howto #back { display: block; margin-top: 26px; padding: 13px; border-radius: 11px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); color: rgba(232, 236, 248, .7); font-size: 13px; text-align: center; text-decoration: none; }