/* ══════════════════════════════════════════════════════
   map-shell.css — "map-first" layout for the map tools.

   Loaded AFTER map-core.css. Opt-in: only pages whose body has
   .map-shell get any of this. The map fills the viewport under the nav,
   every control floats over it in .hud panels, and the long-form guide /
   reference / comments content continues below the fold, where search
   engines still read it and visitors no longer wade through it.

   Visual language: warm smoked panels that let the map's color through
   (a tinted blur, not frosted white), small radii, hairline rules,
   uppercase micro-labels, and inverted "ink" blocks for active states.
   Skins (body[data-skin]): smoke (default), ember (redder tint),
   black (flat and opaque).

   All HUD panels live INSIDE #mapContainer so pseudo-fullscreen (which
   re-parents the container onto <body>) carries the controls along.
   ══════════════════════════════════════════════════════ */

.map-shell {
  --nav-h: 58px;
  --hud-edge: 14px;
  --ruler-w: 22px;
  --ruler-h: 20px;
  /* default skin: smoke (warm tinted blur over the map) */
  --panel: rgba(24, 17, 16, 0.6);
  --panel-solid: #1a1311;
  --blur: blur(14px) saturate(150%);
  --line: rgba(255, 236, 220, 0.11);
  --line-strong: rgba(255, 236, 220, 0.24);
  --ink: #f3ece4;
  --ink-2: rgba(243, 236, 228, 0.62);
  --ink-3: rgba(243, 236, 228, 0.6);
  --active-bg: #efe6da;
  --active-ink: #1b1412;
  --hover-bg: rgba(255, 236, 220, 0.08);
  --field-bg: rgba(0, 0, 0, 0.3);
  --field-border: rgba(255, 236, 220, 0.2);
  --btn-bg: rgba(255, 236, 220, 0.1);
  --btn-bg-hover: rgba(255, 236, 220, 0.17);
  --btn-border: rgba(255, 236, 220, 0.24);
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.7);
}
.map-shell[data-skin="black"] {
  --panel: rgba(10, 10, 9, 0.8);
  --panel-solid: #0c0c0b;
  --blur: blur(10px) saturate(120%);
  --line: rgba(255, 255, 255, 0.09);
  --line-strong: rgba(255, 255, 255, 0.2);
  --ink: #ece7dd;
  --ink-2: rgba(236, 231, 221, 0.62);
  --ink-3: rgba(236, 231, 221, 0.6);
  --active-bg: #ece7dd;
  --active-ink: #0c0c0b;
  --hover-bg: rgba(255, 255, 255, 0.07);
  --field-bg: rgba(0, 0, 0, 0.5);
  --field-border: rgba(255, 255, 255, 0.2);
  --btn-bg: rgba(255, 255, 255, 0.1);
  --btn-bg-hover: rgba(255, 255, 255, 0.17);
  --btn-border: rgba(255, 255, 255, 0.22);
  --radius: 3px;
  --radius-sm: 2px;
  --shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.8);
}
.map-shell[data-skin="ember"] {
  --panel: rgba(58, 18, 12, 0.52);
  --panel-solid: #2a0f0b;
  --blur: blur(14px) saturate(170%);
  --line: rgba(255, 190, 150, 0.16);
  --line-strong: rgba(255, 190, 150, 0.32);
  --ink: #fbe9dc;
  --ink-2: rgba(251, 233, 220, 0.66);
  --ink-3: rgba(251, 233, 220, 0.62);
  --active-bg: #f0a36a;
  --active-ink: #210b05;
  --hover-bg: rgba(255, 190, 150, 0.1);
  --field-bg: rgba(20, 4, 2, 0.4);
  --field-border: rgba(255, 190, 150, 0.26);
  --btn-bg: rgba(255, 190, 150, 0.12);
  --btn-bg-hover: rgba(255, 190, 150, 0.2);
  --btn-border: rgba(255, 190, 150, 0.3);
  --radius: 8px;
  --radius-sm: 4px;
  --shadow: 0 10px 28px -14px rgba(0, 0, 0, 0.7);
}

/* ── Stage ── */
.map-stage {
  position: relative; z-index: 2;
  height: calc(100vh - var(--nav-h));
  height: calc(100svh - var(--nav-h));
  min-height: 520px;
}
.map-shell .map-stage .map-container {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  aspect-ratio: auto; max-height: none;
  border: none; border-bottom: 1px solid var(--line);
  cursor: grab;
}
.map-shell .map-stage .map-container.grabbing { cursor: grabbing; }
.map-shell .map-stage .map-container.cursor-pointer { cursor: pointer; }
/* Nearest-neighbor upscale: on high-DPI screens terrain stays crisp and
   blocky instead of being smeared by the browser's bilinear scaling. (The
   iOS icon smearing once blamed on this was the icons' glow; fixed in
   map-core.css by giving each icon its own compositing layer.) */
.map-shell #map { image-rendering: pixelated; image-rendering: crisp-edges; }

/* Rulers: drawn translucent by map-core (cfg.rulerTheme), blurred here so
   they read as the same material as the panels. */
.map-shell .ruler-x, .map-shell .ruler-z, .map-shell .ruler-corner {
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
.map-shell .ruler-x { box-shadow: 0 1px 0 var(--line); }
.map-shell .ruler-z { box-shadow: 1px 0 0 var(--line); }
.map-shell .ruler-corner { background: var(--panel); border-color: var(--line); }
.map-shell .map-container.pseudo-fullscreen { border: none; }

/* ── Panel base ── */
.hud {
  position: absolute; z-index: 12;
  font-family: var(--font-data);
  color: var(--ink);
  animation: hudIn 0.45s ease-out both;
}
.hud-glass {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
}
@keyframes hudIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.hud-tl { animation-delay: 0.05s; }
.hud-tr { animation-delay: 0.1s; }
.hud-bl, .hud-br { animation-delay: 0.15s; }

.hud-label {
  font-size: 0.54rem; font-weight: 500; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--ink-2);
}

/* Chevron toggle, shared by the world + layers panels */
.hud-chev {
  width: 26px; height: 26px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--radius-sm);
  color: var(--ink); cursor: pointer; padding: 0;
  transition: background 0.12s;
}
.hud-chev:hover { background: var(--btn-bg-hover); }
.hud-chev svg { width: 14px; height: 14px; transition: transform 0.25s ease; }
.collapsed > .hud-title-row .hud-chev svg,
.hud-tr.collapsed .layers-head .hud-chev svg { transform: rotate(-90deg); }

/* ── Top-left: identity + world ── */
.hud-tl {
  top: calc(var(--ruler-h) + var(--hud-edge));
  left: calc(var(--ruler-w) + var(--hud-edge));
  width: 312px; padding: 14px 14px 14px 16px;
}
.hud-title-row { display: flex; align-items: center; gap: 10px; }
.map-shell .hud .tool-title {
  font-family: var(--font-brand); font-weight: 400;
  font-size: 1.14rem; line-height: 1; letter-spacing: 0.04em; white-space: nowrap;
  text-transform: uppercase; color: var(--ink); margin: 0; flex: 1;
}
.hud-badge {
  font-size: 0.5rem; font-weight: 500; letter-spacing: 0.2em;
  color: var(--ink-2); white-space: nowrap;
}
.world-body {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease;
}
.world-inner { min-height: 0; overflow: hidden; }
.hud-tl.collapsed .world-body { grid-template-rows: 0fr; }
.map-shell .hud .tool-subtitle {
  font-size: 0.64rem; line-height: 1.55; color: var(--ink-2);
  margin: 10px 0 16px; max-width: none;
}

.hud-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.hud-field:last-child { margin-bottom: 0; }
.hud-row { display: flex; align-items: center; gap: 8px; }
.hud-world-row { display: flex; flex-direction: column; gap: 10px; }
/* Inputs report a ~20ch intrinsic width; without this the seed row refuses
   to shrink and shoves the edition control out of the panel on phones. */
.hud-world-row > *, .hud-row > * { min-width: 0; }
.world-mobile-btns, .world-pill { display: none; }

.hud-input {
  flex: 1; min-width: 0; height: 34px;
  background: var(--field-bg); border: 1px solid var(--field-border);
  border-radius: var(--radius-sm); color: var(--ink);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  font-family: var(--font-data); font-size: 0.86rem; font-variant-numeric: tabular-nums;
  padding: 0 9px; outline: none; cursor: text;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.hud-input:hover { border-color: var(--line-strong); }
.hud-input:focus { border-color: var(--ink); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45), 0 0 0 2px rgba(236, 231, 221, 0.14); }
.hud-input.coord { width: 0; }
.hud-coord-tag { font-size: 0.56rem; font-weight: 500; letter-spacing: 0.15em; color: var(--ink-2); }

.hud-btn {
  height: 34px; min-width: 34px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  background: var(--btn-bg); border: 1px solid var(--btn-border); border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  color: var(--ink); cursor: pointer;
  font-family: var(--font-data); font-size: 0.58rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.hud-btn:hover { background: var(--btn-bg-hover); }
.hud-btn:active { transform: translateY(1px); }
.hud-btn.small { height: 26px; padding: 0 9px; font-size: 0.5rem; gap: 6px; }
.hud-btn.small svg { width: 12px; height: 12px; }
.hud-btn.icon { padding: 0; width: 34px; }
.hud-btn svg { width: 15px; height: 15px; display: block; flex-shrink: 0; }
.hud-btn.primary { background: var(--active-bg); color: var(--active-ink); border-color: var(--active-bg); }
.hud-btn.primary:hover { filter: brightness(1.06); }

/* Segmented control (edition): the active cell is an ink block */
.seg {
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 3px;
  border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  background: var(--field-bg); padding: 3px; height: 34px;
}
.seg-thumb { display: none; }
.seg button {
  background: transparent; border: none; cursor: pointer; border-radius: 2px;
  font-family: var(--font-data); font-size: 0.56rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ink-2); transition: background 0.15s, color 0.15s;
}
.seg button.on { background: var(--active-bg); color: var(--active-ink); }
.seg button:not(.on):hover { color: var(--ink); }

.hud-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line);
  gap: 10px;
}
/* the button keeps its size; the tip text wraps instead */
.hud-foot .hud-btn { flex-shrink: 0; white-space: nowrap; }
/* Tips are plain small print: sentence case, no tracking, faint. Nothing
   clickable ever looks like this. */
.hud-tip {
  font-size: 0.58rem; letter-spacing: 0; text-transform: none; color: var(--ink-3);
  line-height: 1.4; text-align: right;
}
.tip-touch { display: none; }
@media (pointer: coarse) { .tip-touch { display: inline; } .tip-mouse { display: none; } }

/* ── Top-right: layers ── */
.hud-tr {
  top: calc(var(--ruler-h) + var(--hud-edge));
  right: var(--hud-edge);
  width: 256px; max-height: calc(100% - var(--ruler-h) - 2 * var(--hud-edge) - 60px);
  display: flex; flex-direction: column;
}
.layers-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 9px 10px 9px 16px; cursor: pointer; user-select: none;
  background: none; border: none; border-bottom: 1px solid var(--line);
  width: 100%; color: inherit; text-align: left;
}
.hud-tr.collapsed .layers-head { border-bottom-color: transparent; }
.layers-body {
  overflow-y: auto; padding: 0 16px;
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease;
}
.hud-tr.collapsed .layers-body { grid-template-rows: 0fr; overflow: hidden; }
.layers-inner { min-height: 0; }
.layers-sheet-handle { display: none; }
/* Fit steps (map-shell.js initLayerFit): applied one by one until the panel
   needs no scrollbar, so a 1080p window shows everything without one. */
.hud-tr.fit-1 .layer { padding: 8px 0; }
.hud-tr.fit-1 .chips { margin-top: 8px; gap: 3px; }
.hud-tr.fit-1 .chip { height: 23px; }
.hud-tr.fit-1 .chip-sub { gap: 3px; }
.hud-tr.fit-1 .layer-desc { margin-top: 2px; }
.hud-tr.fit-2 .layer { padding: 6px 0; }
.hud-tr.fit-2 .chips { margin-top: 6px; gap: 2px; }
.hud-tr.fit-2 .chip { height: 21px; }
.hud-tr.fit-2 .layer-desc { font-size: 0.54rem; line-height: 1.3; }
.hud-tr.fit-2 .layer-extra + .layer-extra { margin-top: 5px; }
.hud-tr.fit-3 .layer-desc { display: none; }
.hud-tr.fit-3 .layer-name small { display: none; }
.hud-tr.fit-3 .layer { padding: 5px 0; }

.layer { padding: 12px 0; border-top: 1px solid var(--line); }
.layer:first-child { border-top: none; }
.layer-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; }
.layer-name {
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-2); transition: color 0.12s;
}
.layer[data-toggle].on .layer-name { color: var(--ink); }
/* Layer icons: a small pixel icon to the left of each layer's name */
.layer-name.has-icon { position: relative; padding-left: 27px; display: block; min-height: 18px; }
.layer-name.has-icon .layer-icon {
  position: absolute; left: 0; top: -2px; width: 18px; height: 18px;
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.5));
}
.layer:has(> .layer-row.toggle-item:not(.active)) .layer-icon,
.layer[data-toggle]:not(.on) .layer-icon { opacity: 0.45; filter: grayscale(0.7); }
.layer-name small {
  display: block; margin-top: 4px;
  font-size: 0.58rem; letter-spacing: 0.02em; text-transform: none; color: var(--ink-3);
}

/* On/off: a small square that fills */
.switch {
  width: 13px; height: 13px; flex-shrink: 0; border-radius: 3px;
  border: 1px solid var(--line-strong); background: transparent;
  transition: background 0.12s, border-color 0.12s;
}
.layer[data-toggle].on .switch { background: var(--active-bg); border-color: var(--active-bg); }

.layer-extra { margin-top: 12px; display: flex; align-items: center; gap: 10px; }
.layer[data-toggle]:not(.on) .layer-extra { opacity: 0.35; }
.map-shell .layer-extra .overhang-input {
  width: 44px; height: 26px; padding: 0; margin: 0;
  background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
  color: var(--ink); font-family: var(--font-data); font-size: 0.74rem; text-align: center;
}
.hud-range {
  -webkit-appearance: none; appearance: none; flex: 1; height: 18px; background: none; cursor: pointer;
}
.hud-range::-webkit-slider-runnable-track {
  height: 2px; border-radius: 2px;
  background: linear-gradient(to right, var(--active-bg) var(--fill, 10%), var(--line-strong) var(--fill, 10%));
}
.hud-range::-moz-range-track { height: 2px; background: var(--line-strong); }
.hud-range::-moz-range-progress { height: 2px; background: var(--active-bg); }
.hud-range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 16px; margin-top: -7px; border-radius: 3px;
  background: var(--active-bg); border: none; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}
.hud-range::-moz-range-thumb { width: 12px; height: 16px; border-radius: 3px; background: var(--active-bg); border: none; }

/* Dimension switch (seed maps): a .seg with links between the dimension pages */
.dim-seg { grid-template-columns: 1fr 1fr 1fr; }
.dim-seg a, .dim-seg button {
  display: flex; align-items: center; justify-content: center; text-decoration: none;
  font-family: var(--font-data); font-size: 0.56rem; font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-2); border-radius: 2px;
}
.dim-seg a:hover { color: var(--ink); }
.dim-seg .on { background: var(--active-bg); color: var(--active-ink); }
.dim-seg .soon { opacity: 0.4; cursor: default; }
@media (max-width: 700px) {
  .hud-tl .dim-field { display: none; }
  .hud-tl.expanded .dim-field { display: flex; margin: 8px 3px 3px; }
  .hud-tl.expanded .dim-field .hud-label { display: block; }
}

/* "Everything" link on the single-purpose pages: points at the seed map
   that shows it all (map-shell.js carries seed, edition and position). */
.everything-link {
  display: flex; align-items: center; gap: 9px; margin: 0 0 14px; padding: 8px 10px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.035); color: var(--ink-2); text-decoration: none;
  font-family: var(--font-data); font-size: 0.6rem; line-height: 1.4;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.everything-link:hover { border-color: var(--active-bg); color: var(--ink); background: rgba(255, 255, 255, 0.06); }
.everything-link b { color: var(--ink); font-weight: 600; }
.everything-link svg { flex-shrink: 0; width: 15px; height: 15px; color: var(--active-bg); }
@media (max-width: 700px) {
  .hud-tl:not(.expanded) .everything-link { display: none; }
  .hud-tl.expanded .everything-link { margin: 8px 3px 3px; }
}

/* Structure tags */
.chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 12px; }
.layer[data-toggle]:not(.on) .chips { opacity: 0.3; pointer-events: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 8px 0 4px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--line-strong);
  color: var(--ink-2); cursor: pointer;
  font-family: var(--font-data); font-size: 0.52rem; font-weight: 500;
  letter-spacing: 0.14em; text-transform: uppercase;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.chip img { width: 16px; height: 16px; image-rendering: pixelated; filter: grayscale(1); opacity: 0.5; }
.chip.on { background: var(--active-bg); color: var(--active-ink); border-color: var(--active-bg); }
.chip.on img { filter: none; opacity: 1; }
/* Chip group: a parent chip (the structure) over its variant chips, so
   "Housing" / "Treasure" read as kinds of bastion rather than loose tags. */
.chip-group { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; }
.chip-group > .chip { align-self: flex-start; }
.chip.partial { background: transparent; color: var(--ink); border-color: var(--active-bg); }
.chip.partial img { filter: none; opacity: 1; }
.chip-sub {
  display: flex; flex-wrap: wrap; gap: 4px;
  margin-left: 11px; padding-left: 10px; border-left: 1px solid var(--line-strong);
}
.chip-group.no-variants .chip-sub { display: none; }

/* Biome key */
.biome-key { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; margin-top: 12px; }
.biome-key span {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.52rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-2);
}
.biome-key i { width: 8px; height: 8px; flex-shrink: 0; border-radius: 2px; }

/* ── Layer rows driven by a page's existing toggle script ──
   The finder pages keep their original wiring: clicking a .toggle-item
   flips .active on the row and .on on its .toggle-dot. DOM order is
   [switch, name] so a script that rewrites the row's lastChild text (the
   netherite "Terrain (y=N)" label) edits the name, not the switch;
   row-reverse puts the switch back on the right. */
.map-shell .layer-row.toggle-item {
  font: inherit; text-transform: none; letter-spacing: 0; color: inherit;
  flex-direction: row-reverse; justify-content: space-between; gap: 12px;
}
.map-shell .layer-row .switch.toggle-dot {
  width: 13px; height: 13px; border-radius: 3px; flex-shrink: 0;
  border: 1px solid var(--line-strong); background: transparent;
}
.map-shell .layer-row .switch.toggle-dot.on { background: var(--active-bg); border-color: var(--active-bg); }
.map-shell .layer-row.toggle-item.active .layer-name { color: var(--ink); }
.layer-desc { font-size: 0.58rem; line-height: 1.45; color: var(--ink-3); margin-top: 4px; }
.layer:has(> .layer-row.toggle-item:not(.active)) > :not(.layer-row) { opacity: 0.35; }

/* Stacked slider rows (Y min / Y max / ...) */
.layers-body { overflow-x: hidden; }
.layer-extra > * { min-width: 0; }
.layer-extra .hud-range { width: 100%; }
.layer-extra .hud-label { min-width: 12px; white-space: nowrap; flex-shrink: 0; }
.layer-extra .overhang-input { flex-shrink: 0; }
.layer-extra.labelled .hud-label { width: 52px; letter-spacing: 0.12em; }
.layer-extra + .layer-extra { margin-top: 8px; }
.layer-check {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; cursor: pointer;
  font-size: 0.6rem; color: var(--ink-2);
}
.layer-check input { accent-color: var(--active-bg); width: 15px; height: 15px; margin: 0; }

/* "Advanced" drawer at the bottom of the layers panel */
.layer-adv { border-top: 1px solid var(--line); padding: 11px 0 4px; }
.layer-adv > summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2);
}
.layer-adv > summary::-webkit-details-marker { display: none; }
.layer-adv > summary svg { width: 13px; height: 13px; transition: transform 0.25s; }
.layer-adv[open] > summary { color: var(--ink); }
.layer-adv[open] > summary svg { transform: rotate(180deg); }
.layer-adv .layer { border-top: none; padding: 12px 0 2px; }
@media (max-width: 700px) { .hud-tr.scrubbing .layer-adv > summary { opacity: 0; } }

/* Legends that live inside a layer (diamond depth scale + biome list) */
.map-shell .hud .biome-legend {
  position: static; inset: auto; z-index: auto; pointer-events: auto;
  background: none; border: none; padding: 0; margin-top: 12px;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.map-shell .hud #legendStack { position: static; display: block; }
.map-shell .hud #legendStack.hidden { opacity: 1; }
.map-shell .hud .legend-head { display: none; }
.map-shell .hud .depth-bar-labels { color: var(--ink-2); font-size: 0.55rem; }
.map-shell .hud .depth-bar { height: 46px; border-color: var(--line-strong); }
.map-shell .hud #biomesList {
  display: grid; grid-template-columns: 1fr 1fr; gap: 5px 10px;
  max-height: 128px; overflow-y: auto; overscroll-behavior: contain;
}
.map-shell .hud .biome-row { display: flex; align-items: center; gap: 7px; margin: 0; }
.map-shell .hud .biome-swatch { width: 8px; height: 8px; border-radius: 2px; }
.map-shell .hud .biome-name {
  font-size: 0.52rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Zoom hint (finder pages): top center, clear of the panels */
.map-shell .zoom-hint {
  position: absolute; left: 50%; transform: translateX(-50%); pointer-events: none;
  opacity: 0; transition: opacity 0.25s; font-family: var(--font-data); white-space: nowrap;
  top: calc(var(--ruler-h) + var(--hud-edge)); bottom: auto;
  z-index: 11; padding: 8px 13px; border-radius: var(--radius);
  font-size: 0.56rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink);
  background: var(--panel); border: 1px solid var(--line);
  backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
}
@media (max-width: 1100px) { .map-shell .zoom-hint { top: auto; bottom: 64px; } }
.map-shell .zoom-hint.show { opacity: 1; }

/* ── Bottom-left: live position + scale ── */
.hud-bl {
  left: calc(var(--ruler-w) + var(--hud-edge)); bottom: var(--hud-edge);
  padding: 10px 12px 10px 14px; display: flex; align-items: center; gap: 16px;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bl-min {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; margin-left: -4px; color: var(--ink-2);
  border: 1px solid var(--btn-border); background: var(--btn-bg); border-radius: var(--radius-sm);
}
.bl-min svg { width: 11px; height: 11px; }
.hud-bl:hover .bl-min { background: var(--btn-bg-hover); color: var(--ink); }
.hud-bl.mini { padding: 7px 10px; gap: 0; }
.hud-bl.mini .pos { gap: 10px; }
.hud-bl.mini .pos b, .hud-bl.mini .scale, .hud-bl.mini .bl-min { display: none; }
.pos { display: flex; gap: 14px; font-variant-numeric: tabular-nums; }
.pos div { display: flex; align-items: baseline; gap: 7px; }
.pos b { font-size: 0.52rem; font-weight: 500; color: var(--ink-2); letter-spacing: 0.2em; }
.map-shell .pos .live-coord {
  position: static; width: auto; display: inline !important;
  font-size: 0.84rem; font-weight: 500; color: var(--ink); min-width: 5.2ch;
  text-align: left; letter-spacing: 0; transition: none;
}
.map-shell .pos .live-coord.active { color: var(--ink); }
.scale {
  display: flex; flex-direction: column; gap: 4px; padding-left: 16px;
  border-left: 1px solid var(--line);
}
.scale-bar {
  height: 4px; border: 1px solid var(--ink); border-top: none;
  width: 80px; transition: width 0.12s;
}
.scale-label { font-size: 0.5rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.map-shell .hud .map-status { display: none; }

/* ── Bottom-right: map actions ── */
.hud-br {
  right: var(--hud-edge); bottom: var(--hud-edge);
  display: flex; align-items: flex-end; gap: 8px;
}
.hud-stack, .hud-actions { display: flex; padding: 0; overflow: hidden; }
.hud-stack { flex-direction: column; }
.hud-stack .hud-btn, .hud-actions .hud-btn { border: none; border-radius: 0; height: 36px; }
.hud-stack .hud-btn { width: 36px; }
.hud-stack .hud-btn + .hud-btn { border-top: 1px solid var(--line); }
.hud-actions .hud-btn + .hud-btn { border-left: 1px solid var(--line); }
.hud-layers-btn { display: none; }

.map-shell .hud .share-btn, .map-shell .hud .fullscreen-btn {
  position: static; inset: auto; backdrop-filter: none; -webkit-backdrop-filter: none;
}

/* ── Touch hygiene: long-presses on the map, its icons and waypoints are
   gestures, not text selection or Safari's image/link callout. ── */
.map-shell .map-container, .map-shell .map-container * {
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
.map-shell .map-container input { -webkit-user-select: text; user-select: text; }

/* Waypoints: tap to arm, x to remove (map-core, smooth mode) */
.map-shell .waypoint-label { position: relative; cursor: pointer; }
.waypoint-del {
  display: none; position: absolute; top: -9px; right: -9px;
  width: 20px; height: 20px; border-radius: 50%; padding: 0;
  align-items: center; justify-content: center;
  background: #0c0c0b; color: #ece7dd; border: 1px solid rgba(236, 231, 221, 0.5); cursor: pointer;
  font: 700 14px/1 var(--font-data); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.waypoint-marker.armed .waypoint-del { display: inline-flex; }
@media (pointer: coarse) {
  .waypoint-del { width: 26px; height: 26px; top: -12px; right: -12px; }
}

/* ── Map labels: ONE system for every tool ──
   Feature labels (structures, debris, diamonds, slime chunks) are a solid
   near-black chip: tiny uppercase type line with a color swatch for the
   feature (--feat, set by map-shell.js from the page's own color), then
   plain white coordinates. Waypoints are the same chip inverted (bone with
   dark text), so they read as yours rather than the world's. */
.map-shell .struct-popup, .map-shell .debris-popup {
  --feat: #ece7dd;
  background: rgba(12, 12, 11, 0.94); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 2px; padding: 6px 9px 7px; min-width: 0; white-space: nowrap;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.85);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.map-shell .struct-popup-name, .map-shell .debris-popup-name {
  display: flex; align-items: center; gap: 6px; margin-bottom: 4px;
  font: 500 0.5rem var(--font-data); letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(236, 231, 221, 0.72) !important;
}
.map-shell .struct-popup-name::before, .map-shell .debris-popup-name::before {
  content: ''; width: 7px; height: 7px; flex-shrink: 0; background: var(--feat);
}
.map-shell .struct-popup-coords, .map-shell .debris-popup-coords {
  font: 500 0.7rem var(--font-data); font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
  color: #ece7dd;
}

/* Waypoints: the same chip, inverted */
.map-shell .waypoint-label {
  background: #ece7dd; color: #0c0c0b; border: none; border-radius: 2px;
  padding: 4px 8px 5px; margin-bottom: 4px;
  font: 500 0.5rem var(--font-data); letter-spacing: 0.2em; text-transform: uppercase;
  box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.9);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.map-shell .waypoint-name { display: block; font-weight: 600; }
.map-shell .waypoint-label span {
  display: block; margin-top: 2px;
  font: 500 0.62rem var(--font-data); letter-spacing: 0.02em; text-transform: none;
  font-variant-numeric: tabular-nums; color: rgba(12, 12, 11, 0.62);
}
.map-shell .waypoint-dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: #ece7dd; border: 2px solid #0c0c0b;
  box-shadow: 0 0 0 1px rgba(236, 231, 221, 0.55), 0 2px 5px rgba(0, 0, 0, 0.6);
}
.map-shell .waypoint-marker.armed .waypoint-label { box-shadow: 0 0 0 2px #0c0c0b, 0 0 0 3.5px #ece7dd; }
.map-shell .waypoint-input {
  background: #fff; border: 1px solid #0c0c0b; color: #0c0c0b; border-radius: 1px;
  font: 600 0.6rem var(--font-data); letter-spacing: 0.08em; text-transform: uppercase;
}

.map-shell .map-loading { flex-direction: column; gap: 14px; z-index: 30; background: #0d0a09; }
.map-shell .map-loading-text { color: #8d857c; letter-spacing: 0.24em; text-transform: uppercase; font-size: 0.56rem; }
.map-shell .map-loading:not(.failed)::after {
  content: ''; width: 120px; height: 1px;
  background: linear-gradient(to right, transparent, #f3ece4, transparent) no-repeat;
  background-size: 40% 100%;
  animation: sweep 1.2s ease-in-out infinite;
}
@keyframes sweep { from { background-position: -60% 0; } to { background-position: 160% 0; } }

/* Info ribbon: a full-width strip under the map that takes visitors to How
   It Works, the guide, reference and comments below. The map container
   stops above it, so on phones touching the ribbon scrolls the page rather
   than panning the map. */
.map-shell { --ribbon-h: 34px; }
.map-shell .map-stage .map-container { bottom: var(--ribbon-h); height: auto; }
.scroll-cue {
  position: absolute; left: 0; right: 0; bottom: 0; height: var(--ribbon-h); z-index: 13;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-data); font-size: 0.56rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase;
  text-decoration: none;
  /* follows the site theme: brand indigo (like the nav) in blue mode,
     the orange accent in dark mode, so it always stands off the map */
  color: #fff; background: #2226b0; border-top: 1px solid rgba(255, 255, 255, 0.22);
  transition: filter 0.15s;
}
body.dark-mode .scroll-cue { color: #1b1009; background: #d4803a; border-top: 2px solid #1b1009; }
.scroll-cue:hover { filter: brightness(1.15); }
.scroll-cue svg { width: 16px; height: 16px; color: #d4803a; stroke-width: 3; }
body.dark-mode .scroll-cue svg { color: #fff; }

.map-shell main.tool-page { padding-top: 2.6rem; }
/* Center-of-map crosshair (all screens): marks the point the position
   readout, "chunk at map center" and nearest-fortress lists refer to. */
.reticle {
  display: block; position: absolute; left: 50%; top: 50%; z-index: 6;
  width: 20px; height: 20px; margin: -10px 0 0 -10px; pointer-events: none;
}
.reticle::before, .reticle::after {
  content: ''; position: absolute; background: #fff; mix-blend-mode: difference;
}
.reticle::before { left: 9.5px; top: 0; width: 1px; height: 20px; }
.reticle::after { top: 9.5px; left: 0; height: 1px; width: 20px; }

/* ══════════ Tablet: tighten ══════════ */
@media (max-width: 980px) {
  .hud-tl { width: 280px; }
  .map-shell .hud .tool-subtitle { display: none; }
  .hud-tr { width: 232px; }
}

/* ══════════ Phone ══════════ */
@media (max-width: 700px) {
  .map-shell { --nav-h: 52px; --hud-edge: 8px; }
  .map-stage { height: calc(100svh - var(--nav-h) - 8px); min-height: 460px; }

  /* World panel: one slim row (seed, edition, more, minimize). The title
     stays in the DOM for SEO and screen readers, just not on the map. */
  .hud-tl {
    left: calc(var(--ruler-w) + var(--hud-edge)); right: var(--hud-edge);
    width: auto; padding: 5px;
  }
  .hud-tl .hud-title-row {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
  }
  .hud-tl.collapsed .world-body { grid-template-rows: 1fr; }
  .hud-tl .hud-field { margin-bottom: 0; }
  .hud-tl .hud-field .hud-label { display: none; }
  .hud-world-row { display: grid; grid-template-columns: 1fr 104px auto; gap: 5px; align-items: center; }
  .world-mobile-btns { display: flex; gap: 2px; }
  .world-mobile-btns .hud-chev { width: 30px; height: 30px; }
  .hud-tl #randBtn { display: none; }
  .hud-tl .goto-field, .hud-tl .hud-foot { display: none; }
  .hud-tl.expanded #randBtn { display: inline-flex; }
  .hud-tl.expanded .goto-field { display: flex; margin: 8px 3px 3px; }
  .hud-tl.expanded .hud-foot { display: flex; margin: 8px 3px 2px; padding-top: 8px; }
  .hud-tl.expanded #worldMore svg { transform: rotate(180deg); }
  /* Expanded: the title comes back as a header row, and the more/minimize
     buttons sit in its top-right corner (where people look for them). */
  .hud-tl.expanded .hud-title-row {
    position: static; width: auto; height: 30px; overflow: hidden; clip: auto;
    padding: 0 72px 0 7px; margin-bottom: 3px; display: flex; align-items: center;
  }
  .hud-tl.expanded .hud-title-row .tool-title {
    font-size: 0.82rem; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    /* Zurich's M overhangs its box on the left; overflow:hidden clipped it */
    padding-left: 3px; margin-left: -3px;
  }
  .hud-tl.expanded .hud-title-row .hud-badge, .hud-tl.expanded #worldToggle { display: none; }
  .hud-tl.expanded .world-mobile-btns { position: absolute; top: 5px; right: 5px; z-index: 2; }
  .hud-tl.expanded .hud-world-row { grid-template-columns: 1fr 104px; }
  .hud-input, .seg { height: 32px; }
  .hud-btn { height: 32px; }
  .hud-btn.icon { width: 32px; }
  .hud-input { font-size: 16px; padding: 0 8px; } /* 16px stops iOS zooming the page on focus */
  .seg button { font-size: 0.5rem; letter-spacing: 0.12em; }

  /* Minimized: the whole panel folds into a small tab */
  .hud-tl.minimized { right: auto; padding: 0; }
  .hud-tl.minimized .world-body { display: none; }
  .hud-tl.minimized .world-pill {
    display: inline-flex; align-items: center; gap: 7px;
    height: 30px; padding: 0 10px; background: none; border: none; color: var(--ink);
    font-family: var(--font-data); font-size: 0.6rem; letter-spacing: 0.1em; cursor: pointer;
  }
  .world-pill b { font-weight: 500; color: var(--ink-2); letter-spacing: 0.18em; font-size: 0.5rem; }
  .world-pill svg { width: 12px; height: 12px; color: var(--ink-2); }

  /* Layers become a bottom sheet */
  .hud-tr {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    max-height: 70%; border-left: none; border-right: none; border-bottom: none;
    border-radius: 14px 14px 0 0;
    transform: translateY(101%); visibility: hidden;
    transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), visibility 0.3s;
    z-index: 25; animation: none;
    background: var(--panel-solid);
  }
  .hud-tr.sheet-open { transform: none; visibility: visible; }
  .hud-tr .layers-head { cursor: default; }
  .hud-tr .layers-head .hud-chev svg { transform: none; }
  .hud-tr.collapsed .layers-body { grid-template-rows: 1fr; overflow-y: auto; }
  .layers-sheet-handle {
    display: block; width: 34px; height: 3px; border-radius: 3px; background: var(--line-strong); margin: 8px auto 0;
  }
  .layers-body { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .layer { padding: 14px 0; }
  .chip { height: 32px; }
  .switch { width: 17px; height: 17px; }
  .sheet-scrim {
    position: absolute; inset: 0; z-index: 24; background: rgba(0, 0, 0, 0.35);
    opacity: 0; pointer-events: none; transition: opacity 0.25s;
  }
  .sheet-scrim.show { opacity: 1; pointer-events: auto; }
  .hud-tr { transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), visibility 0.3s, background 0.2s, border-color 0.2s; }
  .hud-tr.scrubbing { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hud-tr .layers-head, .hud-tr .layers-sheet-handle, .hud-tr .layer { transition: opacity 0.2s, background 0.2s; }
  .hud-tr.scrubbing .layers-head, .hud-tr.scrubbing .layers-sheet-handle,
  .hud-tr.scrubbing .layer:not(.scrub-target) { opacity: 0; }
  .hud-tr.scrubbing .scrub-target {
    background: var(--panel-solid); border: 1px solid var(--line-strong);
    border-radius: var(--radius); padding: 12px 14px; margin: 0 -8px;
  }
  .sheet-scrim.show.scrubbing { opacity: 0; }

  .hud-bl { padding: 7px 10px; gap: 10px; }
  .map-shell .pos .live-coord { font-size: 0.72rem; min-width: 4.6ch; }
  .scale { padding-left: 10px; }
  .hud-br { flex-direction: column; align-items: flex-end; }
  .hud-zoom { display: none; }
  .hud-actions { flex-direction: column; }
  .hud-actions .hud-btn { width: 40px; height: 38px; padding: 0; }
  .hud-actions .hud-btn + .hud-btn { border-left: none; border-top: 1px solid var(--line); }
  .hud-actions .btn-text { display: none; }
  .hud-layers-btn { display: inline-flex; }
  .map-shell { --ribbon-h: 40px; }


  .map-shell main.tool-page { padding-top: 1.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .hud { animation: none; }
}

/* ── Share-image sheet ── */
.share-sheet {
  position: fixed; inset: 0; z-index: 10050;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: rgba(8, 5, 4, 0.6);
  opacity: 0; pointer-events: none; transition: opacity 0.2s;
  font-family: var(--font-data);
}
.share-sheet.show { opacity: 1; pointer-events: auto; }
.share-card {
  width: min(760px, 100%); max-height: 100%; overflow: auto;
  background: var(--panel-solid); border: 1px solid var(--line-strong);
  border-radius: var(--radius); box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.8);
  padding: 14px; color: var(--ink);
  transform: translateY(8px); transition: transform 0.25s cubic-bezier(.2, .8, .2, 1);
}
.share-sheet.show .share-card { transform: none; }
.share-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.share-preview { border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: #000; }
.share-preview img { display: block; width: 100%; height: auto; max-height: 62vh; object-fit: contain; -webkit-touch-callout: default; }
.share-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.share-actions .hud-btn { flex: 1 1 auto; }
.share-actions .hud-btn[hidden] { display: none; }
.share-note { margin-top: 10px; text-align: left; min-height: 1em; }
@media (max-width: 700px) {
  .share-sheet { align-items: flex-end; padding: 0; }
  .share-card { width: 100%; border-radius: 16px 16px 0 0; padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
  .share-actions .hud-btn { flex: 1 1 40%; height: 42px; }
}
.share-sec { border-top: 1px solid var(--line); padding-top: 12px; margin-top: 12px; }
.share-head + .share-sec { border-top: none; margin-top: 0; padding-top: 0; }
.share-sec-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 9px; }
.share-sec-title { font-size: 0.62rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.share-sec-head .hud-tip { text-align: left; }
.share-link-row { display: flex; gap: 8px; }
.share-link-row .hud-input { font-size: 0.72rem; min-width: 0; }
.share-link-row .hud-btn[hidden] { display: none; }
.share-sheet.loading .share-preview { min-height: 160px; background: linear-gradient(90deg, #120d0c, #221a17, #120d0c); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; }
.share-sheet.loading .share-preview img { visibility: hidden; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 700px) {
  .share-link-row { flex-wrap: wrap; }
  .share-link-row .hud-input { flex: 1 1 100%; font-size: 16px; }
  .share-link-row .hud-btn { flex: 1 1 40%; height: 42px; }
  .share-sec-head { flex-direction: column; gap: 3px; }
}

/* Waypoint rename */
.waypoint-ren {
  display: none; position: absolute; top: -9px; right: 15px;
  width: 20px; height: 20px; border-radius: 50%; padding: 0;
  align-items: center; justify-content: center;
  background: var(--panel-solid); color: var(--ink); border: 1px solid var(--line-strong); cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}
.waypoint-ren svg { width: 11px; height: 11px; }
.waypoint-marker.armed .waypoint-ren { display: inline-flex; }
.waypoint-marker.editing .waypoint-ren, .waypoint-marker.editing .waypoint-del { display: none; }
.waypoint-name { font-weight: inherit; }
.waypoint-input {
  display: block; width: 13ch; margin: 1px 0;
  background: rgba(0, 0, 0, 0.45); border: 1px solid rgba(232, 192, 96, 0.6); border-radius: 3px;
  color: #e8c060; font: 600 0.62rem var(--font-data); padding: 2px 4px; outline: none;
}
@media (pointer: coarse) {
  .waypoint-ren { width: 26px; height: 26px; top: -12px; right: 18px; }
  .waypoint-input { font-size: 16px; width: 12ch; }
}

/* ── Nearest-structure list (fortress finder) ── */
.near-field .hud-label em { font-style: normal; letter-spacing: 0.06em; text-transform: none; color: var(--ink-3); margin-left: 6px; }
.near-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.near-row {
  width: 100%; display: grid; grid-template-columns: 52px 26px 1fr; grid-template-rows: auto auto;
  align-items: baseline; column-gap: 6px; row-gap: 1px; text-align: left;
  padding: 6px 8px; border-radius: var(--radius-sm);
  background: var(--btn-bg); border: 1px solid var(--line); color: var(--ink); cursor: pointer;
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  transition: background 0.12s, border-color 0.12s;
}
.near-row:hover { background: var(--btn-bg-hover); border-color: var(--line-strong); }
.near-dist { font-size: 0.72rem; font-weight: 600; }
.near-dir { font-size: 0.6rem; font-weight: 600; color: var(--ink-2); letter-spacing: 0.08em; }
.near-xz { font-size: 0.7rem; }
.near-ow { grid-column: 3; font-size: 0.56rem; color: var(--ink-3); }
.near-empty { font-size: 0.6rem; color: var(--ink-3); padding: 4px 0; }
@media (max-width: 700px) {
  .hud-tl .near-field { display: none; }
  .hud-tl.expanded .near-field { display: flex; margin: 8px 3px 3px; }
  .hud-tl.expanded .near-field .hud-label { display: block; }
}

/* ── Nearest panel (map-shell.js initNearest): under the world panel on
   desktop (placed from JS), a bottom sheet on phones ── */
.hud-near { display: flex; flex-direction: column; animation-delay: 0.12s; z-index: 13; }
.near-top {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 10px 9px 16px; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--line);
}
.near-from { display: inline; margin-left: 8px; font-size: 0.54rem; letter-spacing: 0.02em; text-transform: none; color: var(--ink-3); }
.hud-near.collapsed .near-top { border-bottom-color: transparent; }
.hud-near.collapsed .near-top .hud-chev svg { transform: rotate(-90deg); }
.near-body {
  overflow-y: auto; padding: 10px 12px 12px 16px;
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 0.25s ease, padding 0.25s ease;
}
.hud-near.collapsed .near-body { grid-template-rows: 0fr; overflow: hidden; padding-top: 0; padding-bottom: 0; }
.near-inner { min-height: 0; }
.near-pick { margin-bottom: 8px; }
.near-pick.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.near-pick .chip svg, .near-pick .chip img { width: 14px; height: 14px; }
.near-select {
  width: 100%; height: 30px; padding: 0 8px;
  background: var(--field-bg); border: 1px solid var(--field-border); border-radius: var(--radius-sm);
  color: var(--ink); font-family: var(--font-data); font-size: 0.66rem; outline: none; cursor: pointer;
}
.near-select option { background: #1d1715; color: #ece7dd; }
/* short desktop windows: single-line rows (the detail line is in the tooltip) */
.hud-near.tight .near-body { padding-top: 7px; }
.hud-near.tight .near-pick { margin-bottom: 5px; }
.hud-near.tight .near-select { height: 26px; }
.hud-near.tight .near-row { grid-template-rows: auto; padding: 4px 8px; }
.hud-near.tight .near-ow { display: none; }
.hud-near .layers-sheet-handle { display: none; }
.hud-near-btn { display: none; }
@media (max-width: 700px) {
  .hud-near {
    top: auto; left: 0; right: 0; bottom: 0; width: auto;
    max-height: 62%; border-left: none; border-right: none; border-bottom: none;
    border-radius: 14px 14px 0 0;
    transform: translateY(101%); visibility: hidden;
    transition: transform 0.3s cubic-bezier(.2, .8, .2, 1), visibility 0.3s;
    z-index: 25; animation: none;
    background: var(--panel-solid);
  }
  .hud-near.sheet-open { transform: none; visibility: visible; }
  .hud-near .layers-sheet-handle { display: block; }
  .hud-near .near-top { cursor: default; }
  .hud-near .near-top .hud-chev { display: none; }
  .hud-near.collapsed .near-body { grid-template-rows: 1fr; overflow-y: auto; padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
  .near-body { padding: 10px 14px calc(12px + env(safe-area-inset-bottom)); }
  .near-select { height: 38px; font-size: 16px; }
  .hud-near-btn { display: inline-flex; }
}

/* ── One-time pointer between the World and Layers panels (map-shell.js
   panelHint). Bone chip, like waypoints, so it reads as a note to the
   visitor rather than map data. ── */
.map-shell .panel-hint {
  position: absolute; z-index: 45; max-width: 230px;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 6px 7px 11px; border-radius: 2px;
  background: #ece7dd; color: #0c0c0b;
  font: 600 0.6rem var(--font-data); letter-spacing: 0.12em; text-transform: uppercase;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.9);
  opacity: 0; transform: translateY(4px); transition: opacity 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}
.map-shell .panel-hint.show { opacity: 1; transform: none; }
.map-shell .panel-hint::after {
  content: ''; position: absolute; left: var(--arrow-x, 50%); width: 10px; height: 10px;
  background: #ece7dd; transform: translateX(-50%) rotate(45deg);
}
.map-shell .panel-hint.arrow-up::after { top: -5px; }
.map-shell .panel-hint.arrow-down::after { bottom: -5px; }
.map-shell .panel-hint-x {
  flex-shrink: 0; width: 22px; height: 22px; border: none; background: none; padding: 0;
  font: 400 1rem/1 var(--font-data); color: rgba(12, 12, 11, 0.55); cursor: pointer;
}

/* Fullscreen reminder after coming back to the tab (phones: no native
   fullscreen, so the browser never shows its own "exit" affordance). */
.fs-reminder {
  position: absolute; z-index: 46; left: 50%; top: 14px; transform: translate(-50%, -6px);
  display: flex; align-items: center; gap: 10px; padding: 6px 6px 6px 12px;
  background: rgba(12, 12, 11, 0.94); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 2px;
  font: 500 0.6rem var(--font-data, monospace); letter-spacing: 0.14em; text-transform: uppercase;
  color: #ece7dd; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; white-space: nowrap;
}
.fs-reminder.show { opacity: 1; transform: translate(-50%, 0); }
.fs-reminder button {
  border: none; border-radius: 2px; background: #ece7dd; color: #0c0c0b; padding: 6px 10px;
  font: 600 0.58rem var(--font-data, monospace); letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer;
}

/* ?blur=0 test switch: no live background blur anywhere (GPU cost check) */
body.no-blur *, body.no-blur *::before, body.no-blur *::after {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
}

/* Desktop: the panels' small print (layer descriptions, tips, legend keys)
   was ~8.7px, fine on a phone held close, unreadable on a 1440p monitor. */
@media (min-width: 701px) {
  .layer-desc, .hud-tip, .layer-name small, .depth-key-text, .near-ow, .near-empty { font-size: 0.68rem; }
  .scroll-cue { font-size: 0.62rem; }
}

/* Java version picker (pages that load mc-shared/versions.js and set cfg.versions) */
.mc-field { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.mc-field[hidden] { display: none; }
.mc-label { font-family: var(--font-data); font-size: 0.56rem; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.08em; white-space: nowrap; }
.mc-select { height: 26px; }
@media (max-width: 700px) {
  .hud-tl:not(.expanded) .mc-field { display: none; }
  .mc-select { height: 34px; }
}

/* Tap-to-inspect: the popup gets a close button (phones have no Escape) and
   the tapped block gets a marker; tapping either clears it. */
.map-shell .inspect-pop { pointer-events: auto; padding-right: 26px; }
.map-shell .inspect-x {
  position: absolute; top: 0; right: 0; width: 24px; height: 100%; min-height: 24px;
  border: 0; background: none; color: rgba(236, 231, 221, 0.6); cursor: pointer;
  font: 400 15px/1 var(--font-data); padding: 0;
}
.map-shell .inspect-x:hover { color: #ece7dd; }
.map-shell .inspect-mark {
  position: absolute; z-index: 19; width: 14px; height: 14px; padding: 0;
  margin: -7px 0 0 -7px; border-radius: 50%; cursor: pointer;
  background: rgba(12, 12, 11, 0.35); border: 2px solid #ece7dd;
  box-shadow: 0 0 0 1px rgba(12, 12, 11, 0.7), 0 2px 6px rgba(0, 0, 0, 0.5);
}
/* Bigger hit area on touch without a bigger ring */
.map-shell .inspect-mark::after { content: ''; position: absolute; inset: -12px; }