:root {
  color-scheme: dark;
  --bg: #0a0e13;
  --bg-2: #0e141d;
  --panel: #111925;
  --panel-2: #16202e;
  --line: #1d2733;
  --line-2: #263342;
  --text: #dbe4ef;
  --muted: #8194a9;
  --faint: #5f7086;
  --accent: #6ea8fe;
  --accent-2: #4b8bf5;
  --ok: #5fd18c;
  --bad: #ff7b72;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  /* The floating furniture: one column of buttons on the right, and the panel that
     opens beside it. How close the pointer has to come to the right edge before the
     panel eases out on its own is EDGE, in app.js. */
  --rail-w: 98px;
  --rail-gap: 8px;
  --panel-w: 306px;
  /* Christmas, for the goal bar. */
  --xmas-red: #e23b3b;
  --xmas-green: #2fae5e;
  --xmas-snow: #f4f7fb;
  --xmas-gold: #ffd76a;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg);
  color: var(--text);
  font: 13px/1.45 system-ui, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

#app { display: flex; flex-direction: column; height: 100%; }

header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: calc(10px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) 10px calc(16px + env(safe-area-inset-left));
  background: linear-gradient(180deg, #0f1621, #0b1119);
  border-bottom: 1px solid var(--line);
  flex: 0 0 auto;
  z-index: 5;
}

.brand { font-weight: 700; letter-spacing: .3px; font-size: 15px; }
.brand span {
  color: var(--muted);
  font-weight: 400;
  margin-left: 8px;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 1.4px;
}

nav { display: flex; gap: 4px; min-width: 0; }
nav button {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  white-space: nowrap;
  touch-action: manipulation;
  transition: background .12s, border-color .12s, color .12s;
}
nav button:hover { color: var(--text); border-color: var(--line-2); }
nav button.on {
  background: linear-gradient(180deg, #23324a, #1b2739);
  color: var(--text);
  border-color: #35507a;
  box-shadow: inset 0 0 0 1px rgba(110, 168, 254, .15);
}
nav button .n { color: var(--muted); margin-left: 7px; font-variant-numeric: tabular-nums; }

.spacer { flex: 1 1 auto; }
.stats { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.stats b { color: var(--text); font-weight: 600; }

/* --------------------------------------------------- 128k goal (christmas) ------ */

.xmas {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: clamp(210px, 26vw, 360px);
  padding: 5px 10px 6px;
  border: 1px solid #27412f;
  border-radius: 11px;
  user-select: none;
  background:
    radial-gradient(120px 44px at 10% -30%, rgba(226, 59, 59, .22), transparent 72%),
    radial-gradient(120px 44px at 90% 130%, rgba(47, 174, 94, .22), transparent 72%),
    linear-gradient(180deg, #121a22, #0d141b);
}

.xmas-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  font-size: 11px;
  line-height: 1.1;
}
.xmas-title { color: var(--xmas-snow); font-weight: 600; white-space: nowrap; }
.xmas-pct { color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.xmas-pct b {
  margin-right: 3px;
  font-size: 13px;
  /* A red-to-green-to-red run, so the number itself is wearing the tinsel. */
  background: linear-gradient(90deg, var(--xmas-red), var(--xmas-gold) 50%, var(--xmas-green));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* The whole bar is a candy ribbon, dimmed to a ghost of itself, so the bar reads as
   Christmas even at five percent. The fill lays the same stripes over the top at full
   strength -- both start at x=0, so the lit part lines up perfectly with the ghost. */
.xmas-track {
  position: relative;
  height: 12px;
  border: 1px solid #253341;
  border-radius: 999px;
  overflow: hidden;
  background:
    repeating-linear-gradient(45deg,
      rgba(226, 59, 59, .34) 0 6px,
      rgba(244, 247, 251, .16) 6px 9px,
      rgba(47, 174, 94, .34) 9px 15px,
      rgba(244, 247, 251, .16) 15px 18px),
    #080c11;
}

/* Candy-cane stripes. The gradient runs at 45º, so shifting it along its own axis by
   one period (18px · √2 ≈ 12.73px) loops seamlessly as it drifts. */
.xmas-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  border-radius: 999px 0 0 999px;
  background: repeating-linear-gradient(45deg,
    var(--xmas-red) 0 6px,
    var(--xmas-snow) 6px 9px,
    var(--xmas-green) 9px 15px,
    var(--xmas-snow) 15px 18px);
  box-shadow: 0 0 10px rgba(226, 59, 59, .5), 0 0 10px rgba(47, 174, 94, .35), inset 0 0 5px rgba(0, 0, 0, .3);
  transition: width .9s cubic-bezier(.3, .8, .25, 1);
  animation: candy 2.2s linear infinite;
}
@keyframes candy { to { background-position: 12.73px 12.73px; } }

/* Fairy lights strung along the bar: red and green bulbs, twinkling out of phase. */
.xmas-lights {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle, rgba(255, 246, 214, .95) 0 1.1px, transparent 1.9px),
    radial-gradient(circle, rgba(255, 255, 255, .85) 0 1px, transparent 1.7px);
  background-size: 26px 100%, 26px 100%;
  background-position: 0 center, 13px center;
  mix-blend-mode: screen;
  animation: twinkle 2.4s ease-in-out infinite;
}
@keyframes twinkle { 0%, 100% { opacity: .3; } 50% { opacity: .95; } }

/* Today's place on the run to 2027. When mapping is on schedule this tick stands at
   the tip of the stripes; ahead or behind shows at a glance. */
.xmas-now {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  border-radius: 2px;
  background: var(--xmas-gold);
  box-shadow: 0 0 7px rgba(255, 215, 106, .95);
}
.xmas-now[hidden] { display: none; }

.xmas-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  color: var(--faint);
  font-size: 10.5px;
  font-variant-numeric: tabular-nums;
}
.xmas-foot .xmas-chunks { color: var(--muted); }
.xmas-to { color: var(--xmas-snow); font-weight: 600; }

#stage { position: relative; flex: 1 1 auto; overflow: hidden; background: #06090d; }
/* `pixelated` also covers the case where the element ends up scaled by a
   fractional device pixel ratio: the browser must never resample the map. */
canvas {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
  image-rendering: pixelated;
}
canvas.dragging { cursor: grabbing; }

.chip {
  display: inline-block;
  background: rgba(10, 14, 19, .84);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  backdrop-filter: blur(4px);
}
.chip b { color: var(--text); font-weight: 600; }

#hud {
  position: absolute;
  left: calc(12px + env(safe-area-inset-left));
  bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  pointer-events: none;
}
/* The coordinate readout doubles as a copy button, so it is allowed to take a click. */
#hud #readout { pointer-events: auto; cursor: pointer; }
#hud #readout:hover { border-color: var(--line-2); color: var(--text); }
#hud #readout.copied { border-color: #2f6b4a; color: var(--ok); }

/* A bar as wide as a round number of blocks, so the zoom always has a ruler. */
#scalebar { display: inline-flex; align-items: center; gap: 7px; }
#scalebar i {
  display: block;
  height: 8px;
  width: 104px;
  border: 1px solid var(--faint);
  border-top: 0;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, rgba(129, 148, 169, .3) 0 50%, transparent 50% 100%);
}
#scalebar span { font-size: 11px; color: var(--muted); }

/* ------------------------------------------------------------- the toolbar ------ */

#controls {
  position: absolute;
  right: calc(10px + env(safe-area-inset-right));
  top: calc(10px + env(safe-area-inset-top));
  display: flex;
  flex-direction: column;
  gap: var(--rail-gap);
  width: var(--rail-w);
  z-index: 10;
  user-select: none;
}

/* Each group is the same frosted card the rest of the UI is built from. */
#controls .group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 5px;
  background: rgba(13, 18, 26, .86);
  border: 1px solid var(--line);
  border-radius: 13px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .32);
  backdrop-filter: blur(8px);
}
#controls .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; }

#controls button {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 42px;
  padding: 6px 3px 5px;
  background: linear-gradient(180deg, rgba(28, 38, 54, .92), rgba(19, 27, 39, .92));
  border: 1px solid var(--line-2);
  border-radius: 9px;
  color: var(--text);
  font: inherit;
  font-size: 10.5px;
  cursor: pointer;
  touch-action: manipulation;
  transition: background .12s, border-color .12s, color .12s, transform .06s;
}
#controls button:hover { border-color: #35507a; background: linear-gradient(180deg, #22304a, #1a2434); }
#controls button:active { transform: translateY(1px); }
#controls button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* Icons are drawn as strokes in whatever colour the button is wearing, so the whole
   rail lights up together on hover and on the active tab. */
#controls button .ic {
  width: 19px;
  height: 19px;
  display: block;
  flex: 0 0 auto;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .12s;
}
#controls button .lb {
  font-size: 9.5px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
  transition: color .12s;
}
#controls button:hover .ic { stroke: var(--accent); }
#controls button:hover .lb { color: var(--text); }

#controls button.on {
  border-color: #35507a;
  background: linear-gradient(180deg, #23406b, #1c3357);
  box-shadow: inset 0 0 0 1px rgba(110, 168, 254, .16);
}
#controls button.on .ic { stroke: var(--accent); }
#controls button.on .lb { color: var(--text); }

/* The layer slider: its label names the layer the terrain is drawing, and the range
   underneath steps from the surface down through the four deep layers. */
#controls .band { padding: 7px 9px 9px; gap: 4px; }
#controls .bandlabel {
  text-align: center;
  font-size: 10px;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------- range inputs ------- */
/* Drawn by hand rather than with `accent-color`, so the slider reads as part of the
   same set of cards and switches as everything else. */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 18px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
}
input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: #22303f; }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #0e141d;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .55);
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 999px; background: #22303f; }
input[type="range"]::-moz-range-thumb {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #0e141d;
}
input[type="range"]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input[type="range"]:disabled { opacity: .45; cursor: default; }

#jump {
  position: absolute;
  right: calc(10px + env(safe-area-inset-right));
  bottom: calc(10px + env(safe-area-inset-bottom));
  display: flex;
  gap: 5px;
  background: rgba(15, 21, 30, .9);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  backdrop-filter: blur(6px);
  z-index: 7;
}
#jump input {
  width: 78px;
  background: #0b0f14;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  color: var(--text);
  padding: 6px 8px;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}
#jump input:focus { outline: none; border-color: var(--accent-2); }
#jump button {
  background: linear-gradient(180deg, #2a5bb8, #1f4fa8);
  border: 0;
  color: #fff;
  border-radius: 7px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 12px;
  touch-action: manipulation;
}

/* ---------------------------------------------------------------- hover ------ */

.hover {
  position: absolute;
  z-index: 8;
  min-width: 190px;
  max-width: 280px;
  background: rgba(12, 17, 24, .96);
  border: 1px solid var(--line-2);
  border-radius: 11px;
  box-shadow: var(--shadow);
  padding: 9px 11px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.hover .h-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.hover .sw {
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 1px solid rgba(255, 255, 255, .18);
  flex: 0 0 auto;
}
.hover .h-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hover .h-row { display: flex; justify-content: space-between; gap: 12px; color: var(--muted); }
.hover .h-row b { color: var(--text); font-weight: 500; }
.hover .h-sep { height: 1px; background: var(--line); margin: 6px 0; }
.hover .h-note { color: var(--faint); font-size: 11.5px; margin-top: 4px; }

/* What a place marker is. Same card as the block readout, so the two never look like
   different kinds of thing. */
.placetip {
  position: absolute;
  z-index: 8;
  min-width: 150px;
  max-width: 260px;
  background: rgba(14, 18, 26, .96);
  border: 1px solid #6b5420;
  border-radius: 11px;
  box-shadow: var(--shadow);
  padding: 8px 11px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.placetip[hidden] { display: none; }
.placetip b { display: block; color: #ffe9b0; font-weight: 600; }
.placetip .pt-kind {
  display: inline-block;
  margin-top: 3px;
  color: var(--accent);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
}
.placetip .pt-coord { display: block; color: var(--muted); font-size: 11px; }
.placetip .pt-note { margin: 6px 0 0; color: var(--faint); font-size: 11.5px; }

/* --------------------------------------------------------------- layers ------ */

.layers {
  position: absolute;
  right: calc(10px + var(--rail-w) + var(--rail-gap) + env(safe-area-inset-right));
  top: calc(10px + env(safe-area-inset-top));
  width: var(--panel-w);
  max-height: min(calc(100% - 20px), 760px);
  display: flex;
  flex-direction: column;
  background: rgba(12, 17, 25, .97);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  box-shadow: var(--shadow);
  z-index: 9;
  overflow: hidden;
  /* Closed it is off to the right of its resting place and untouchable; opening it is
     just the class below, so the whole thing eases in and out of the edge. */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateX(18px) scale(.985);
  transform-origin: 100% 0;
  /* `visibility` is stepped rather than tweened, and only on the way out: opening has
     to be visible *now*, because a panel that is still hidden cannot take focus and
     the Find tab focuses its input the moment it is opened. */
  transition: opacity .16s ease, transform .24s cubic-bezier(.22, .8, .3, 1), visibility 0s linear .16s;
}
.layers.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: opacity .16s ease, transform .24s cubic-bezier(.22, .8, .3, 1), visibility 0s linear 0s;
}
.layers-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 13px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  flex: 0 0 auto;
}
.layers-head b { font-size: 13px; letter-spacing: .3px; }
.layers-head button {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 7px;
  touch-action: manipulation;
}
.layers-head button:hover { color: var(--text); background: rgba(255, 255, 255, .06); }

/* One pane per tab: only the selected one is in the layout at all. */
.pane {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.pane[hidden] { display: none; }

.row { display: flex; align-items: center; gap: 9px; padding: 9px 13px; cursor: pointer; }
.row.switch input { width: 15px; height: 15px; accent-color: var(--accent-2); }
.row.switch.small { padding: 0; font-size: 12px; color: var(--muted); }
.hintline { margin: 0; padding: 0 13px 10px; color: var(--faint); font-size: 11.5px; }

.rule-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 13px 4px;
  border-top: 1px solid var(--line);
}
.rule-head:first-child { border-top: 0; }
.rule-head b { font-size: 13px; letter-spacing: .3px; }

.blocklist {
  padding: 2px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.blocklist .emptyline { color: var(--faint); padding: 10px 6px; font-size: 12px; }
.blockrow {
  display: grid;
  grid-template-columns: 16px 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 8px;
}
.blockrow:hover { background: rgba(255, 255, 255, .035); }
.blockrow .sw { width: 16px; height: 16px; border-radius: 5px; border: 1px solid rgba(255, 255, 255, .18); }
.blockrow .b-name { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.blockrow .b-count { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; }
.blockrow input[type=checkbox] { width: 15px; height: 15px; accent-color: var(--accent-2); }
.blockrow input[type=color] {
  width: 26px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
}
.blockrow input[type=color]:disabled { opacity: .35; cursor: default; }

.hint {
  position: absolute;
  left: 50%;
  bottom: calc(14px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  color: var(--muted);
  font-size: 11.5px;
  background: rgba(10, 14, 19, .72);
  padding: 5px 11px;
  border-radius: 999px;
  transition: opacity .6s;
  pointer-events: none;
  white-space: nowrap;
  max-width: calc(100% - 24px);
  overflow: hidden;
  text-overflow: ellipsis;
}
.hint b { color: var(--text); }
.hint.fade { opacity: 0; }

/* The `hidden` attribute only sets `display: none` in the UA stylesheet, so an
   author rule with `display: flex` overrides it and the panel stays on screen
   over a full map. This is the line that keeps it off. */
.empty[hidden] { display: none; }

.empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--muted);
  padding: 30px;
  pointer-events: none;
}
.empty h2 { color: var(--text); margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.empty p { max-width: 420px; margin: 0; }

.pins { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.pin {
  position: absolute;
  transform: translate(-50%, -100%);
  pointer-events: auto;
  cursor: pointer;
}
.pin i {
  display: block;
  width: 12px;
  height: 12px;
  border-radius: 50% 50% 50% 0;
  transform: rotate(-45deg);
  background: #ffcf4d;
  border: 1px solid #6b5200;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .6);
}
.pin b {
  position: absolute;
  left: 16px;
  top: -3px;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 500;
  color: #ffdf8a;
  background: rgba(10, 14, 19, .86);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 6px;
  font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------- views, time, places ------ */

.pad { padding: 0 13px 11px; display: flex; flex-direction: column; gap: 8px; }
.pad .hintline { padding: 0; }
/* A pane that opens straight into its content rather than under a heading. */
.pane > .pad:first-child { padding-top: 12px; }

select {
  width: 100%;
  background: #0b0f14;
  border: 1px solid var(--line-2);
  border-radius: 8px;
  color: var(--text);
  padding: 7px 9px;
  font-size: 12px;
  cursor: pointer;
}
select:focus { outline: none; border-color: var(--accent-2); }

.timeline {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--faint);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.timeline span:last-child { color: var(--text); font-weight: 600; }

#find { display: flex; gap: 6px; }
#find input {
  flex: 1 1 auto;
  min-width: 0;
  background: #0b0f14;
  border: 1px solid var(--line-2);
  border-radius: 7px;
  color: var(--text);
  padding: 6px 8px;
  font-size: 12px;
}
#find input:focus { outline: none; border-color: var(--accent-2); }
#find button {
  background: linear-gradient(180deg, #2a5bb8, #1f4fa8);
  border: 0;
  color: #fff;
  border-radius: 7px;
  padding: 6px 11px;
  cursor: pointer;
  font-size: 12px;
  touch-action: manipulation;
}

.landmarks { padding: 2px 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.landmarks .emptyline { color: var(--faint); padding: 8px 6px; font-size: 12px; }
.landmark {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--text);
  padding: 8px 7px;
  cursor: pointer;
  font-size: 12px;
  font-family: inherit;
  touch-action: manipulation;
}
.landmark:hover { background: rgba(255, 255, 255, .05); }
.landmark b { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.landmark span { color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; flex: 0 0 auto; }
.landmark .lm-kind { color: var(--accent); font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; }
.landmark.has-note b::after {
  content: "•";
  color: var(--accent);
  margin-left: 6px;
  font-size: 13px;
  vertical-align: -1px;
}

/* The legend for whatever the current view draws. */
.kindrow {
  position: absolute;
  left: 50%;
  bottom: calc(44px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  justify-content: center;
  max-width: min(720px, calc(100% - 24px));
  background: rgba(10, 14, 19, .78);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px 12px;
  font-size: 11px;
  color: var(--muted);
  backdrop-filter: blur(4px);
  pointer-events: none;
}
.kindrow[hidden] { display: none; }
.kindrow i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* ------------------------------------------------------------- the scrim ------ */
/* Only exists where the panel can cover the map: phones and any coarse pointer. */

.scrim {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 8;
  background: rgba(4, 7, 11, .55);
  opacity: 0;
  transition: opacity .18s ease;
}
.scrim.open { opacity: 1; }

/* ============================================================================
   Small screens and touch.
   Two separate things are going on here: at 760px and below the panel becomes a
   sheet beside the rail and a scrim appears behind it, and on any coarse pointer
   the whole UI grows to finger size.
   ============================================================================ */

@media (max-width: 760px), (pointer: coarse) {
  .scrim { display: block; pointer-events: none; }
  .scrim.open { pointer-events: auto; }
}

@media (max-width: 760px) {
  :root { --rail-w: 76px; --rail-gap: 6px; }

  header { flex-wrap: wrap; gap: 8px; }
  .brand span { display: none; }
  .xmas { order: 3; width: 100%; }
  .xmas-foot .xmas-chunks { display: none; }
  #controls button .lb { display: none; }
  #controls button { min-height: 44px; }
  #controls .bandlabel { font-size: 9.5px; letter-spacing: .2px; }
  .hint { display: none; }

  /* The bottom-left corner is a column: the jump form sits on the floor, the readout
     and ruler stack above it, and the legend clears both. */
  #jump { left: calc(10px + env(safe-area-inset-left)); right: auto; }
  #jump input { width: 62px; }
  #hud { bottom: calc(62px + env(safe-area-inset-bottom)); }
  #kindrow { bottom: calc(134px + env(safe-area-inset-bottom)); }

  /* The panel slides up from the bottom instead of in from the right, and stops short
     of the rail so the tabs stay reachable while it is open. */
  .layers {
    right: calc(8px + var(--rail-w) + 6px + env(safe-area-inset-right));
    left: calc(8px + env(safe-area-inset-left));
    top: auto;
    bottom: calc(8px + env(safe-area-inset-bottom));
    width: auto;
    max-height: min(74%, 560px);
    transform: translateY(16px) scale(.99);
    transform-origin: 100% 100%;
  }
}

@media (max-width: 420px) {
  :root { --rail-w: 68px; }
  #controls button { min-height: 42px; padding: 5px 2px; }
  #controls button .ic { width: 18px; height: 18px; }
}

/* Touch: no hover to lean on, so targets get taller and nothing shrinks on tap. */
@media (pointer: coarse) {
  nav button { padding: 8px 13px; }
  .row { padding: 11px 13px; }
  .landmark { padding: 10px 7px; }
  #controls button { min-height: 46px; }
  #jump input { padding: 9px 8px; }
  #jump button { padding: 9px 13px; }
  input[type="range"] { height: 26px; }
  input[type="range"]::-webkit-slider-thumb { width: 20px; height: 20px; margin-top: -8px; }
  input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; }
  .blockrow input[type=checkbox], .row.switch input { width: 19px; height: 19px; }
}

/* Short screens: the rail must not run off the bottom. */
@media (max-height: 560px) {
  #controls { gap: 5px; }
  #controls .group { padding: 4px; }
  #controls button { min-height: 34px; padding: 4px 3px; }
  #controls button .lb { display: none; }
  #controls .band { padding: 5px 8px 6px; }
}