:root {
  color-scheme: dark;
  --ink: #f2f0e8;
  --muted: rgba(242, 240, 232, .62);
  --hud: rgba(17, 20, 19, .76);
  --hud-soft: rgba(17, 20, 19, .56);
  --line: rgba(244, 242, 233, .15);
  --accent: #e7e1d3;
  --accent-ink: #242725;
  --orange: #d38a61;
  font-family: "Avenir Next", Avenir, "Helvetica Neue", sans-serif;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { background: #171b19; color: var(--ink); font-size: 12px; }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline: 1px solid var(--accent); outline-offset: 2px; }

.app-shell { width: 100%; height: 100%; position: relative; overflow: hidden; background: #171b19; }
.map-stage { position: absolute; inset: 0; overflow: hidden; background: #65745d; isolation: isolate; }
.map-stage::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 13, 12, .36), transparent 20%, transparent 76%, rgba(10, 13, 12, .38)); }
#terrain-map { width: 100%; height: 100%; display: block; image-rendering: pixelated; cursor: grab; touch-action: none; }
.map-stage.is-panning #terrain-map { cursor: grabbing; }
.map-stage.is-panning .map-hover, .map-stage.is-panning .map-crosshair { opacity: 0; }

.topbar { height: 54px; position: absolute; z-index: 5; inset: 0 0 auto; display: flex; align-items: center; gap: 28px; padding: 0 20px; background: linear-gradient(180deg, rgba(12, 15, 14, .68), rgba(12, 15, 14, .32)); }
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 500; letter-spacing: .18em; text-transform: lowercase; }
.brand svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.45; opacity: .8; }
.brand i { width: 1px; height: 15px; margin: 0 3px 0 5px; background: var(--line); }
.brand small { color: var(--muted); font-size: 10px; font-weight: 400; letter-spacing: .22em; }
.seed-form { width: min(430px, 47vw); display: flex; align-items: center; gap: 9px; }
.seed-form > label, .panel-label { color: var(--muted); font-size: 9px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.seed-field { height: 31px; min-width: 0; flex: 1; display: flex; align-items: center; border-bottom: 1px solid rgba(244, 242, 233, .28); background: rgba(10, 13, 12, .19); }
.seed-field:focus-within { border-color: var(--accent); }
.seed-field input { width: 100%; min-width: 0; height: 100%; padding: 0 9px; border: 0; outline: 0; background: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; letter-spacing: .04em; }
.icon-button, .square-button { display: inline-grid; flex: 0 0 auto; place-items: center; border: 1px solid transparent; background: transparent; color: rgba(246, 245, 238, .82); transition: color .15s, background .15s, border-color .15s; }
.icon-button { width: 31px; height: 31px; font-size: 20px; line-height: 1; }
.icon-button svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }
.icon-button:hover, .square-button:hover { background: rgba(255, 255, 255, .1); color: white; }
.load-button { height: 31px; padding: 0 14px; border: 1px solid rgba(255,255,255,.38); border-radius: 2px; background: var(--accent); color: var(--accent-ink); font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.load-button:hover { background: #fffaf0; }
.top-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.generator-status { display: inline-flex; align-items: center; gap: 7px; margin-right: 10px; color: var(--muted); font-size: 10px; letter-spacing: .06em; }
.generator-status i { width: 5px; height: 5px; border-radius: 50%; background: #aabf94; box-shadow: 0 0 8px rgba(193, 219, 165, .4); }

.tool-panel { width: 228px; max-height: calc(100% - 130px); position: absolute; z-index: 3; top: 70px; left: 15px; overflow: auto; padding: 13px; border: 1px solid var(--line); border-radius: 3px; background: var(--hud); box-shadow: 0 8px 26px rgba(8, 11, 10, .17); backdrop-filter: blur(9px); scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.23) transparent; }
.coords-form { display: grid; grid-template-columns: 1fr 1fr 31px 31px; align-items: center; gap: 5px; }
.coords-form label { height: 30px; display: flex; align-items: center; gap: 5px; padding: 0 7px; border: 1px solid var(--line); background: rgba(5, 8, 7, .2); }
.coords-form label span { color: var(--muted); font-size: 9px; letter-spacing: .08em; }
.coords-form input { width: 100%; min-width: 0; border: 0; outline: 0; background: transparent; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; }
.coords-form input::-webkit-inner-spin-button, .coords-form input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.square-button { width: 30px; height: 30px; border: 1px solid var(--line); font-size: 16px; }
.panel-rule { height: 1px; margin: 12px 0; background: var(--line); }
.tool-panel > .panel-label { display: block; margin-bottom: 7px; }
.layer-switch { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3px; }
.layer-switch button { min-width: 0; height: 28px; padding: 0 4px; border: 1px solid transparent; background: transparent; color: var(--muted); font-size: 10px; letter-spacing: .02em; }
.layer-switch button:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.layer-switch button.active { border-color: rgba(255,255,255,.19); background: rgba(235,231,220,.92); color: #292d2b; }
.highlight-control { display: flex; flex-direction: column; gap: 6px; }
.highlight-control select { width: 100%; height: 29px; padding: 0 8px; border: 1px solid var(--line); border-radius: 0; background: rgba(5, 8, 7, .36); color: var(--ink); font-size: 10px; }
.highlight-control select option { background: #222725; color: var(--ink); }
.toggle-row { min-height: 28px; display: flex; align-items: center; justify-content: space-between; margin-top: 4px; color: rgba(245,244,235,.82); font-size: 10px; cursor: pointer; }
.toggle-row input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.toggle-row i { width: 27px; height: 14px; position: relative; border: 1px solid rgba(255,255,255,.22); border-radius: 10px; background: rgba(0,0,0,.18); transition: background .15s; }
.toggle-row i::after { content: ""; width: 8px; height: 8px; position: absolute; top: 2px; left: 2px; border-radius: 50%; background: rgba(255,255,255,.68); transition: transform .15s, background .15s; }
.toggle-row input:checked + i { border-color: #e7e1d3; background: #e7e1d3; }
.toggle-row input:checked + i::after { background: #262a27; transform: translateX(13px); }
.toggle-row input:focus-visible + i { outline: 1px solid white; outline-offset: 2px; }
.chest-search .saved-row { margin-bottom: 7px; }
.chest-query { width: 100%; height: 31px; padding: 0 8px; border: 1px solid var(--line); border-radius: 0; outline: 0; background: rgba(5, 8, 7, .28); color: var(--ink); font-size: 10px; }
.chest-query::placeholder { color: rgba(242,240,232,.4); }
.chest-query:focus { border-color: rgba(242,240,232,.52); }
.chest-search-summary { margin: 7px 0 4px; color: var(--muted); font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.chest-results { max-height: 185px; overflow: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.23) transparent; }
.chest-result { width: 100%; display: flex; flex-direction: column; gap: 3px; padding: 7px 5px; border: 0; border-top: 1px solid rgba(255,255,255,.09); background: transparent; text-align: left; }
.chest-result:hover, .chest-result:focus-visible { background: rgba(255,255,255,.08); }
.chest-result strong { overflow: hidden; color: rgba(245,244,235,.9); font-size: 10px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.chest-result span { color: var(--muted); font: 9px ui-monospace, SFMono-Regular, Menlo, monospace; }
.chest-empty { margin: 8px 2px; color: var(--muted); font-size: 10px; }
.saved-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.saved-count { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10px; }
.save-place-button, .saved-menu summary { width: 100%; min-height: 29px; display: flex; align-items: center; justify-content: flex-start; gap: 7px; padding: 0 8px; border: 1px solid var(--line); background: rgba(255,255,255,.035); color: rgba(245,244,235,.82); font-size: 10px; text-align: left; }
.save-place-button > span { font-size: 15px; line-height: 1; }
.save-place-button:hover, .saved-menu summary:hover { background: rgba(255,255,255,.1); color: white; }
.saved-menu { position: relative; margin-top: 5px; }
.saved-menu summary { list-style: none; cursor: pointer; color: var(--muted); }
.saved-menu summary::-webkit-details-marker { display: none; }
.saved-menu summary::after { content: "⌄"; margin-left: auto; color: var(--muted); }
.saved-menu[open] summary { color: var(--ink); }
.saved-list { width: 100%; max-height: 210px; overflow: auto; padding: 5px 7px; border: 1px solid var(--line); border-top: 0; background: rgba(10,13,12,.78); }
.empty-saved { margin: 7px 0; color: var(--muted); font-size: 10px; }
.saved-item { min-height: 30px; display: flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(255,255,255,.08); }
.saved-marker { width: 5px; height: 5px; flex: 0 0 5px; border-radius: 50%; background: var(--orange); }
.saved-place-name { min-width: 0; flex: 1; overflow: hidden; padding: 0; border: 0; background: transparent; color: rgba(245,244,235,.85); font-size: 10px; text-align: left; text-overflow: ellipsis; white-space: nowrap; }
.saved-place-name:hover { color: white; }
.saved-place-coords { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.remove-saved { border: 0; background: transparent; color: var(--muted); font-size: 15px; }
.remove-saved:hover { color: #f3a785; }

.map-topline { position: absolute; z-index: 2; top: 66px; right: 16px; display: flex; gap: 6px; pointer-events: none; }
.map-topline span, .map-hover, .map-pin-card, .map-footer, .zoom-stack, .loading-pill { border: 1px solid rgba(244,242,233,.15); background: var(--hud-soft); color: var(--ink); box-shadow: 0 3px 13px rgba(7,10,9,.12); backdrop-filter: blur(8px); }
.map-topline span { padding: 6px 8px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; letter-spacing: .05em; }
.map-hover { min-width: 140px; position: absolute; z-index: 3; top: 66px; left: 50%; display: flex; flex-direction: column; gap: 3px; padding: 7px 10px; text-align: center; opacity: 0; visibility: hidden; transform: translateX(-50%); transition: opacity .12s; }
.map-hover.visible { opacity: 1; visibility: visible; }
.map-hover strong { font-size: 11px; font-weight: 500; }
.map-hover span { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.map-crosshair { width: 20px; height: 20px; position: absolute; z-index: 3; display: none; align-items: center; justify-content: center; border: 1px solid rgba(255,255,255,.92); border-radius: 50%; box-shadow: 0 1px 7px rgba(0,0,0,.55); pointer-events: none; transform: translate(-50%, -50%); }
.map-crosshair span { width: 4px; height: 4px; border-radius: 50%; background: var(--orange); box-shadow: 0 0 0 1px white; }
.map-crosshair.visible { display: flex; }
.chest-marker { pointer-events: none; }
.map-pin-card { min-width: 166px; position: absolute; z-index: 4; left: 50%; top: 18%; display: none; flex-direction: column; align-items: flex-start; gap: 5px; padding: 9px 11px; transform: translateX(-50%); }
.map-pin-card.active { display: flex; }
.pin-title { display: flex; align-items: center; gap: 7px; }
.pin-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }
.pin-title strong { max-width: 190px; overflow: hidden; font-size: 11px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.map-pin-card small { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.map-pin-card > button { margin: 2px 0 0 13px; padding: 0; border: 0; background: transparent; color: var(--accent); font-size: 9px; letter-spacing: .1em; text-transform: uppercase; }
.map-pin-card > button:hover { color: #fff; }

.zoom-stack { position: absolute; z-index: 3; top: 50%; right: 16px; display: flex; flex-direction: column; align-items: center; padding: 3px; transform: translateY(-50%); }
.zoom-stack button { width: 32px; height: 32px; border: 0; background: transparent; color: rgba(246,245,238,.88); font-size: 19px; line-height: 1; }
.zoom-stack button:hover { background: rgba(255,255,255,.11); color: white; }
.zoom-stack span { min-width: 32px; padding: 3px 0; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; text-align: center; }
.zoom-stack i { width: 24px; height: 1px; margin: 2px 0; background: var(--line); }

.map-footer { min-height: 33px; position: absolute; z-index: 2; right: 15px; bottom: 12px; left: 15px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 9px; background: rgba(14,17,16,.47); }
.footer-readout { display: flex; align-items: center; gap: 12px; color: rgba(245,244,235,.83); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 9px; }
.compass { color: var(--accent); font-family: "Avenir Next", Avenir, sans-serif; font-size: 10px; font-weight: 600; }
.scale-mark { display: inline-flex; align-items: center; gap: 5px; }
.scale-mark i { width: 30px; height: 6px; display: block; border-bottom: 1px solid rgba(255,255,255,.78); border-left: 1px solid rgba(255,255,255,.78); border-right: 1px solid rgba(255,255,255,.78); }
.scale-mark b { color: var(--muted); font-weight: 400; }
.gesture-note { color: rgba(245,244,235,.48); font-size: 9px; letter-spacing: .05em; }
.footer-selection { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 9px; font-size: 9px; }
.footer-selection strong { max-width: 160px; overflow: hidden; color: rgba(245,244,235,.88); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.footer-selection span { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.loading-pill { position: absolute; z-index: 6; left: 50%; bottom: 58px; display: flex; align-items: center; gap: 9px; padding: 7px 10px; font-size: 10px; transform: translateX(-50%); }
.loading-pill[hidden] { display: none; }
.loading-pill > span:nth-child(2) { min-width: 125px; }
.loading-pill > span:last-child { color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.spinner { width: 11px; height: 11px; border: 1px solid rgba(255,255,255,.3); border-top-color: white; border-radius: 50%; animation: spin .7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.toast { position: fixed; z-index: 20; left: 50%; bottom: 58px; padding: 9px 12px; border: 1px solid var(--line); background: rgba(17,20,19,.9); color: var(--ink); font-size: 10px; opacity: 0; pointer-events: none; transform: translate(-50%, 9px); transition: opacity .16s, transform .16s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

@media (max-width: 760px) {
  .topbar { height: 48px; gap: 13px; padding: 0 10px; }
  .brand { gap: 5px; font-size: 12px; }
  .brand svg { width: 20px; height: 20px; }
  .seed-form { width: auto; min-width: 0; flex: 1; gap: 6px; }
  .seed-form > label { display: none; }
  .seed-field { height: 29px; }
  .load-button { height: 29px; padding: 0 9px; font-size: 9px; }
  .generator-status { display: none; }
  .top-actions { gap: 0; }
  .top-actions .icon-button { width: 28px; }
  .tool-panel { width: 205px; top: 58px; left: 8px; max-height: calc(100% - 108px); padding: 10px; }
  .map-topline { top: 57px; right: 8px; flex-direction: column; align-items: flex-end; gap: 4px; }
  .zoom-stack { right: 8px; }
  .map-footer { right: 8px; bottom: 7px; left: 8px; gap: 8px; padding: 0 7px; }
  .footer-readout { gap: 7px; }
  .gesture-note { display: none; }
  .footer-selection { gap: 5px; }
  .footer-selection strong { max-width: 72px; }
  .footer-selection span { max-width: 94px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .map-hover { top: 57px; left: 50%; }
}

@media (max-width: 390px) {
  .brand small, .brand i { display: none; }
  .top-actions .icon-button { width: 25px; }
  .map-topline span { padding: 5px; font-size: 8px; }
  .tool-panel { width: 192px; }
  .footer-readout #map-range-label { display: none; }
}