:root {
  --bg: #14161a;
  --panel: #1d2026;
  --panel2: #23262e;
  --text: #d8dbe2;
  --dim: #8a8f9c;
  --line: #32363f;
  --accent-rgb: 232, 163, 61;
  --accent: rgb(var(--accent-rgb));
  /* the flagship foil; it ends where it starts, so a sweep loops */
  --foil: linear-gradient(90deg, var(--accent), #ffe6b8, #c48cf0, #5fd8e8, var(--accent));
  --foil-glow: rgba(196, 140, 240, 0.35);
  /* canvas backdrop / empty camera cells, read by the script */
  --map-bg-rgb: 14, 15, 18;
  --map-bg: rgb(var(--map-bg-rgb));
  --cell-empty: #1a1d22;
  /* anything floating over the map is this one near-black, tinted by alpha */
  --over-rgb: 18, 20, 24;
  --surface-float: rgba(var(--over-rgb), 0.94);
  --shadow-float: 0 4px 18px rgba(0, 0, 0, 0.5);
  --shadow-modal: 0 10px 40px rgba(0, 0, 0, 0.6);
  /* stacking tiers, low to high — the order is the system */
  --z-map-overlay: 6;
  --z-tip: 7;
  --z-scrim: 12;
  --z-drawer: 15;
  --z-map-chrome: 21;
  --z-anchor-tip: 22;
  --z-modal: 25;
  --sidebar-w: 250px;
  --corner-w: 98px; /* the map's top-right buttons: what anything crossing that edge must leave them */
  --tip-max-w: 340px;
  --serif: Georgia, "Times New Roman", serif; /* newspaper masthead in the What's New panel */
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
/* the UA stylesheet gives controls a font of their own instead of the page's */
button,
input,
select,
textarea {
  font-family: inherit;
}
/* out of the layout, still in the accessibility tree: display: none and
   visibility: hidden both leave that tree, and a region outside it is silent */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  pointer-events: none;
}
html,
body {
  height: 100%;
  overflow: hidden;
}
body {
  background: var(--bg);
  color: var(--text);
  font:
    13px/1.45 -apple-system,
    "Segoe UI",
    sans-serif;
  display: flex;
  touch-action: manipulation;
}
#sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--panel);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  --collapsed: calc(-1 * var(--sidebar-w));
  transition: margin-left 0.18s ease;
}
body:not(.menu-open) #sidebar {
  margin-left: var(--collapsed);
}
#sidebar h1 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  padding: 12px 14px 8px;
  color: var(--accent);
  letter-spacing: 0.04em;
}
#sidebar h1 img {
  width: 24px;
  height: 24px;
  flex: none;
}
.h1btn {
  margin-left: auto;
  display: grid;
  place-items: center;
  padding: 3px;
  background: none;
  border: 0;
  color: var(--dim);
  cursor: pointer;
}
.h1btn:hover,
.h1btn:focus-visible {
  color: var(--accent);
}
.h1btn svg {
  display: block;
  width: 17px;
  height: 17px;
}
#sidebar h2 {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  padding: 12px 14px 4px;
}
.btnrow {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px 12px;
}
.btnrow button,
.ofl-go {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
}
.btnrow button:hover,
.ofl-go:hover {
  border-color: var(--accent);
}
.btnrow button.on,
#graphBtn.on {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}
.btnrow button.entry::before {
  content: "\25B8";
  color: var(--accent);
  margin-right: 3px;
}
.btnrow button.entry.on::before {
  color: var(--bg);
}
/* opacity, not a colour: the selected button recolors its own text */
.btnrow button .nickname {
  opacity: 0.72;
}
/* full-names mode: the code+name labels stack as a list */
body.fullnames .btnrow {
  flex-direction: column;
  align-items: stretch;
}
body.fullnames .btnrow button {
  text-align: left;
}
.filters {
  padding: 4px 12px 12px;
}
/* a checkbox and its wording on one line, wherever one is offered */
.checkrow {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
}
.filters .checkrow {
  padding: 2.5px 2px;
  position: relative;
}
.filters input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
} /* keyboard-focusable; the swatch is the visual indicator */
.filters .checkrow:not(:has(input:checked)) {
  opacity: 0.45;
}
.filters .checkrow:has(input:focus-visible) {
  outline: 1px solid var(--accent);
  border-radius: 4px;
}
.sw {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  display: inline-block;
  flex: none;
}
.filters .cnt {
  margin-left: auto;
  color: var(--dim);
  font-size: 11px;
}
/* a text button with no chrome: the treatment is shared, the size is not —
   each surface sets its own, and the route bar's pair can be disabled */
.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  color: var(--dim);
  text-decoration: underline;
  cursor: pointer;
}
.linkbtn:not(:disabled):hover,
.linkbtn:focus-visible {
  color: var(--accent);
}
.h2tools {
  float: right;
}
.h2tools .linkbtn {
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
}
/* Fields picker: per-type collapsible checklists, one type expanded at a time */
#fieldPanel .fp-body {
  padding: 0 12px 4px;
}
.fp-type {
  border-top: 1px solid var(--line);
}
.fp-type > summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 2px;
  cursor: pointer;
  font-size: 12px;
  color: var(--text);
  user-select: none;
  list-style: none;
}
.fp-type > summary::-webkit-details-marker {
  display: none;
}
.fp-type > summary::before {
  content: "\25B8";
  color: var(--dim);
  font-size: 9px;
  transition: transform 0.12s;
}
.fp-type[open] > summary::before {
  transform: rotate(90deg);
}
.fp-count {
  margin-left: auto;
  color: var(--dim);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}
.fp-fields {
  padding: 1px 2px 7px 18px;
}
.fp-fields .checkrow {
  padding: 1.5px 0;
  font-size: 11px;
  color: var(--text);
}
.fp-fields .checkrow:not(:has(input:checked)) {
  opacity: 0.5;
}
.fp-fields input {
  flex: none;
  accent-color: var(--accent);
  margin: 0;
}
.fp-tools {
  display: flex;
  gap: 10px;
  padding-top: 5px;
}
.fp-tools .linkbtn {
  font: inherit;
  font-size: 11px;
}
#toggles {
  padding: 0 12px 10px;
}
#toggles .checkrow {
  padding: 2.5px 2px;
}
#toggles kbd {
  margin-left: auto;
  min-width: 16px;
  padding: 0 4px;
  font-size: 10px;
  line-height: 1.5;
  transition:
    border-color 0.12s,
    color 0.12s;
}
#toggles kbd.held {
  border-color: var(--accent);
  color: var(--accent);
}
#exportBtn,
#exportPathBtn,
#graphBtn,
#numbersBtn {
  margin: 6px 12px 2px;
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 12px;
  width: calc(100% - 24px);
}
#exportBtn,
#exportPathBtn {
  margin: 6px 0 2px;
  width: 100%;
}
#exportBtn:hover,
#exportPathBtn:not(:disabled):hover,
#graphBtn:hover,
#numbersBtn:hover {
  border-color: var(--accent);
}
#exportPathBtn:disabled {
  opacity: 0.4;
  cursor: default;
}
#sbFooter {
  margin-top: auto;
  padding: 10px 14px 12px;
  border-top: 1px solid var(--line);
}
#sbFooter .linkbtn {
  font: inherit;
  font-size: 11px;
}
#main {
  flex: 1;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
#cv {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: grab;
  touch-action: none;
}
#cv.panning {
  cursor: grabbing;
}
body.page-zoomed #cv {
  touch-action: pinch-zoom;
}
/* the world graph: the game as one diagram, opaque over the canvas it replaces.
   A mode is not a float, so it takes no stacking tier — a positioned sibling
   after the canvas covers it, and every tier above (the toasts, the drawer, the
   chrome, the dialogs) keeps standing over it untouched. What that leaves is
   the map's own furniture, every piece of which has to be sent away by hand */
#graphView {
  position: absolute;
  inset: 0;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
#graphView[hidden] {
  display: none; /* the flex display would otherwise defeat the hidden attribute */
}
body.graph #chipRow,
body.graph #minimap,
body.graph #tip,
body.graph #hud,
body.graph #help,
/* sidebar buttons that act on the map don't combine with world graph */
body.graph #exportBtn,
body.graph #exportPathBtn,
body.graph #numbersBtn {
  display: none;
}
/* the route bar is the only sign a plotted route has been cleared, so it stays */
body.graph #routeBar {
  top: 49px;
}
#graphBar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 54px;
  padding: 7px var(--corner-w) 7px 54px; /* clear of the menu button and the corner buttons */
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}
#graphTitle {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}
#graphLegend {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  overflow: hidden;
  color: var(--dim);
  font-size: 11px;
}
.gv-key {
  display: flex;
  align-items: center;
  gap: 4px;
}
.gv-key i {
  width: 9px;
  height: 3px;
  border-radius: 2px;
}
#graphScroll {
  flex: 1;
  overflow: auto;
  overscroll-behavior: contain;
  cursor: grab;
}
#graphScroll.panning {
  cursor: grabbing;
}
#graphPlane {
  position: relative;
  transform-origin: 0 0;
}
#graphPlane svg {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* a fat invisible line is what the pointer finds; the drawn one is too thin */
.gv-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 9;
  pointer-events: stroke;
}
.gv-wire {
  fill: none;
  stroke-width: 1.4;
  opacity: 0.8;
}
/* the pointer finds one leg; the whole line answers */
.gv-edge:has(.gv-hit:hover) .gv-wire {
  opacity: 1;
  stroke-width: 2.4;
}
.gv-head {
  position: absolute;
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.gv-node {
  position: absolute;
  width: var(--gv-node-w);
  height: var(--gv-node-h);
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 0 7px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 4px;
  color: var(--text);
  font-size: 11px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
}
.gv-node:hover {
  border-color: var(--accent);
}
.gv-node.on {
  border-color: var(--accent);
  background: var(--panel2);
  box-shadow: 0 0 0 1px var(--accent);
}
/* which half of the level a run of boxes belongs to, where the game says */
.gv-sec {
  position: absolute;
  width: var(--gv-node-w);
  border-top: 1px solid var(--line);
  padding-top: 3px;
  color: var(--dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
/* fit: the boxes shrink with the diagram, the level codes are scaled back to
   the size they were, since they are the only labels an overview can carry */
body.graph-fit .gv-head {
  transform: scale(var(--gv-back));
  transform-origin: 0 100%;
}
body.graph-fit .gv-head span,
body.graph-fit .gv-sec,
body.graph-fit .gv-nm {
  display: none;
}
.gv-node.entry::before {
  content: "\25B8";
  flex: none;
  color: var(--accent);
}
.gv-pa {
  flex: none;
  color: var(--dim);
}
.gv-nm {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* the two tooltips share a surface and differ only in how they are placed */
#tip,
#anchorTip {
  pointer-events: none;
  overflow: hidden;
  padding: 8px 10px;
  font-size: 12px;
  background: var(--surface-float);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-float);
}
#tip {
  position: absolute;
  z-index: var(--z-tip);
  max-width: var(--tip-max-w);
  max-height: calc(100% - 12px);
  display: none;
}
#tip .t {
  color: var(--accent);
  font-weight: 600;
}
#tip hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 5px 0;
}
#tip .e {
  color: var(--dim);
}
#tip .about {
  font-style: italic;
}
#tip .offscreen {
  font-size: 11px;
  opacity: 0.68;
}
/* field pairs wrap as units; word-spacing opens only the seams between them */
#tip .kv {
  display: inline-block;
  margin-top: 3px;
  color: var(--dim);
  word-spacing: 5px;
}
#tip .kv > span {
  display: inline-block;
  word-spacing: normal;
}
#tip .v {
  color: var(--text);
}
#tip .f {
  color: var(--accent);
}
#tip .said {
  display: inline-block;
  margin-top: 2px;
}
#tip .f.loop {
  color: var(--dim);
}
/* anchored to an element, not the cursor: fixed so no scrolling host clips it */
#anchorTip {
  position: fixed;
  z-index: var(--z-anchor-tip);
  max-width: min(var(--tip-max-w), calc(100vw - 20px));
  max-height: calc(100vh - 12px);
}
#anchorTip .detail {
  white-space: pre-line;
  color: var(--dim);
  margin-top: 3px;
}
/* the map's two bottom-corner readouts, identical but for which corner */
#hud,
#help,
#graphHelp {
  position: absolute;
  bottom: 8px;
  color: var(--dim);
  font-size: 11px;
  background: rgba(var(--over-rgb), 0.7);
  padding: 3px 8px;
  border-radius: 5px;
}
#hud {
  right: 10px;
}
#help,
#graphHelp {
  left: 10px;
}
/* the minimap: the path's grid in a corner with the viewport on it, for the
   paths that outgrow the window; the numbers panel owns the same corner and
   wins while open */
#minimap {
  position: absolute;
  right: 10px;
  bottom: 34px;
  z-index: var(--z-map-overlay);
  background: rgba(var(--over-rgb), 0.85);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: var(--shadow-float);
  cursor: pointer;
  touch-action: none;
}
#minimap[hidden] {
  display: none;
}
#main:has(#numbersPanel:not([hidden])) #minimap {
  display: none;
}
body.page-zoomed #minimap {
  touch-action: pinch-zoom;
}
.muted {
  color: var(--dim);
  padding: 2px 14px 8px;
  font-size: 11px;
}
/* toasts: bottom-anchored and reversed, so the newest sits where a
   lone toast would and the older ones ride above it */
#toastStack {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 44px;
  z-index: var(--z-map-overlay);
  display: flex;
  flex-direction: column-reverse;
  align-items: center;
  gap: 6px;
  pointer-events: none;
}
.toast {
  position: relative;
  overflow: hidden;
  max-width: min(90%, 420px);
  background: rgba(var(--over-rgb), 0.92);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  padding: 6px 12px;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
}
.toast.show {
  opacity: 1;
  transform: none;
}
/* countdown: drains over the toast's lifetime, which JS hands down as --toast-ms */
.toast-bar {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--accent);
  opacity: 0.55;
  transform-origin: left center;
  animation: toast-drain var(--toast-ms) linear forwards;
}
@keyframes toast-drain {
  from {
    transform: scaleX(1);
  }
  to {
    transform: scaleX(0);
  }
}
/* the queue depth belongs above the stack; order beats DOM position under column-reverse */
.toast-more {
  order: 1;
  background: rgba(var(--over-rgb), 0.85);
  border: 1px solid var(--line);
  border-radius: 100px;
  color: var(--dim);
  font-size: 11px;
  padding: 1px 8px;
}
/* route-planner readout: the running total plus the touch undo/clear.
   Top-center: the one edge spot no other overlay claims at any width */
#routeBar {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  z-index: var(--z-map-overlay);
  display: flex;
  gap: 10px;
  align-items: center;
  white-space: nowrap;
  background: rgba(var(--over-rgb), 0.85);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  font-size: 12px;
  padding: 4px 10px;
}
#routeBar[hidden] {
  display: none; /* the flex display would otherwise defeat the hidden attribute */
}
#routeBar .linkbtn {
  font-size: 12px;
}
#routeBar .linkbtn:disabled {
  opacity: 0.4;
  text-decoration: none;
  cursor: default;
}
/* per-camera object list: opens on click/tap of a screen with nothing to follow */
#camPanel {
  position: absolute;
  left: 10px;
  bottom: 34px;
  z-index: var(--z-map-overlay);
  width: 260px;
  max-width: calc(100% - 20px);
  max-height: 60%;
  display: flex;
  flex-direction: column;
  background: var(--surface-float);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
}
#camPanel[hidden] {
  display: none;
}
.cp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px 5px;
  border-bottom: 1px solid var(--line);
  color: var(--accent);
  font-size: 12px;
  font-weight: 600;
}
#camPanel .e {
  color: var(--dim);
  font-weight: 400;
}
/* the cue that a field name has a glossary definition; data-tip carries it */
.gloss {
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}
#camPanelClose,
#numbersClose {
  font-size: 16px;
  line-height: 18px;
}
#camPanelBody {
  overflow-y: auto;
  padding: 2px 4px 8px;
}
/* By the numbers: counts of the picked object types at every granularity,
   following the selection and the view; the screen list keeps bottom-left,
   this keeps bottom-right, so a desktop can hold both at once */
#numbersPanel {
  position: absolute;
  right: 10px;
  bottom: 34px;
  z-index: var(--z-map-overlay);
  width: 300px;
  max-width: calc(100% - 20px);
  max-height: 60%;
  display: flex;
  flex-direction: column;
  background: var(--surface-float);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
}
#numbersPanel[hidden] {
  display: none;
}
#numbersBody {
  flex: none;
  padding: 8px 10px 7px;
  font-size: 12px;
}
.np-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) repeat(4, auto);
  gap: 2px 9px;
  align-items: baseline;
}
.np-h {
  color: var(--dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-align: right;
}
/* a row's name doubles as its remove button */
.np-name {
  background: none;
  border: 0;
  padding: 0;
  color: var(--text);
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-name:hover,
.np-name:focus-visible {
  color: var(--accent);
  text-decoration: line-through;
  outline: none;
}
.np-n {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.np-none,
.np-demo {
  color: var(--dim);
}
.np-demo {
  margin-top: 6px;
  font-size: 11px;
}
#numbersPick {
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 8px 10px;
  border-top: 1px solid var(--line);
}
#numbersPick > input {
  width: 100%;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 5px 9px;
  font-size: 12px;
  outline: none;
}
#numbersPick > input:focus {
  border-color: var(--accent);
}
#numbersTypes {
  overflow-y: auto;
  margin-top: 5px;
}
#numbersTypes .checkrow {
  padding: 2.5px 2px;
  font-size: 12px;
}
#numbersTypes .checkrow:has(input:disabled) {
  opacity: 0.4;
  cursor: default;
}
/* the small heading that divides a list, and the full-width row that acts as
   a button within one */
.listhead {
  display: flex;
  color: var(--dim);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 7px 8px 2px;
}
.cp-cat {
  align-items: center;
  gap: 6px;
}
.shead {
  justify-content: space-between;
}
.rowbtn {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--text);
  padding: 3px 8px;
  border-radius: 5px;
  cursor: pointer;
  font-size: 12px;
}
.rowbtn:hover,
.rowbtn.active {
  background: var(--panel2);
}
.cp-row-wrap {
  display: flex;
  align-items: stretch;
}
.cp-row-wrap .cp-row {
  flex: 1;
  min-width: 0;
}
/* what a sign in the world says */
.said {
  color: var(--text);
}
.said .note {
  color: var(--dim);
}
/* a quiet icon button at a row's edge */
.rowtool {
  flex: none;
  background: none;
  border: 0;
  color: var(--dim);
  cursor: pointer;
  padding: 3px 8px;
  border-radius: 5px;
  font-size: 12px;
}
.rowtool:hover {
  background: var(--panel2);
  color: var(--text);
}
.cp-said {
  padding: 1px 8px 4px 18px;
  font-size: 11px;
}
.cp-none {
  color: var(--dim);
  padding: 6px 10px;
}
#noscript {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--dim);
}
#searchBox {
  margin: 4px 12px 2px;
}
#searchBox input {
  width: 100%;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--text);
  padding: 6px 9px;
  font-size: 12px;
  outline: none;
}
#searchBox input:focus {
  border-color: var(--accent);
}
#searchResults {
  padding: 2px 6px 10px;
}
#searchResults .hit mark {
  background: none;
  color: var(--accent);
  font-weight: 600;
}
#searchResults .hit .loc {
  color: var(--accent);
}
#searchResults .hit .ex {
  color: var(--dim);
}
#searchResults .more {
  color: var(--dim);
  font-size: 11px;
  padding: 3px 8px;
}
#scopeBar {
  display: flex;
  gap: 4px;
  margin: 6px 12px 0;
}
#scopeBar button {
  background: var(--panel2);
  color: var(--dim);
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 11px;
}
#scopeBar button.on {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
  font-weight: 600;
}
#searchResults .widen {
  color: var(--accent);
  cursor: pointer;
  text-decoration: underline;
}
#searchResults .showmore {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  color: var(--accent);
  padding: 2px 8px 4px;
  cursor: pointer;
  font-size: 11px;
}
#searchResults .showmore:hover {
  text-decoration: underline;
}

/* controls sitting over the map (menu, What's New, the place chip): a dim
   glyph or label that brightens to full colour with an accent border on hover/focus */
.iconbtn,
#placeBtn {
  position: absolute;
  top: 10px;
  z-index: var(--z-map-chrome);
  height: 34px;
  background: rgba(var(--over-rgb), 0.5);
  color: var(--dim);
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition:
    color 0.15s ease,
    background 0.15s ease,
    border-color 0.15s ease;
}
.iconbtn {
  display: grid;
  place-items: center;
  width: 34px;
}
.iconbtn:hover,
.iconbtn:focus-visible,
#placeBtn:hover,
#placeBtn:focus-visible {
  color: var(--text);
  background: rgba(var(--over-rgb), 0.85);
  border-color: var(--accent);
  outline: none;
}
.iconbtn svg {
  display: block;
  width: 19px;
  height: 19px;
}
/* menu toggle sits at the map's top-left corner, clear of the sidebar when it is open */
#menuBtn {
  left: 10px;
}
#scrim {
  display: none;
}
#whatsnewBtn {
  right: 10px;
}
#copyLinkBtn {
  right: 54px;
}
/* no What's New (changelog feed missing): take over its corner spot */
#main:has(#whatsnewBtn[hidden]) #copyLinkBtn {
  right: 10px;
}
/* embed mode (?embed=1): .chrome marks the site furniture that hides */
body.embed .chrome {
  display: none;
}
/* the open-full-site link exists only inside embeds, in the freed corner */
#openSiteBtn {
  display: none;
  right: 10px;
}
body.embed #openSiteBtn {
  display: grid;
}
#whatsnewBtn[hidden] {
  display: none;
}
#whatsnewBtn .wn-dot {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid var(--bg);
  display: none;
}
#whatsnewBtn.hasnew .wn-dot {
  display: block;
}

/* the place chip and the buttons riding beside it: the row is the positioned
   box (anchored clear of both corner clusters), so the chip can grow and
   shrink without anything tracking its width; only the buttons take clicks */
#chipRow {
  position: absolute;
  top: 10px;
  left: 54px;
  right: var(--corner-w);
  z-index: var(--z-map-chrome);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}
#chipRow > * {
  pointer-events: auto;
}
#chipRow .iconbtn,
#placeBtn {
  position: static;
}
/* the chip does all the shrinking; a squeezed row must not thin the buttons */
#chipRow .iconbtn {
  flex: none;
}
/* the place chip: which level and path the map is showing, and the way into
   that path's details */
#placeBtn {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  max-width: 340px;
  padding: 0 10px;
  color: var(--text);
  font: inherit;
  font-size: 12px;
}
#placeBtn[hidden],
#shuffleBtn[hidden] {
  display: none;
}
/* the route bar is centred over the map, so only a narrow map brings it within
   reach of the chip row */
@media (max-width: 1400px) {
  #main:has(#routeBar:not([hidden])) #chipRow {
    top: 52px;
  }
  #main:has(#routeBar:not([hidden])) #placePanel {
    top: 94px;
  }
}
#placeCode {
  flex: none;
  font-weight: 600;
}
#placeName {
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#placeDot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
  display: none;
}
#placeBtn.hasnote #placeDot {
  display: block;
}
/* the path's details, under the chip that opens them */
#placePanel {
  position: absolute;
  top: 52px;
  left: 54px;
  z-index: var(--z-map-overlay);
  width: 300px;
  max-width: calc(100% - 64px);
  max-height: calc(100% - 100px);
  overflow-y: auto;
  padding: 8px 11px 10px;
  background: var(--surface-float);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow-float);
  font-size: 12px;
}
.pl-game {
  color: var(--dim);
  font-size: 11px;
}
.pl-level {
  color: var(--accent);
  font-weight: 600;
}
.pl-section,
.pl-nickname,
.pl-entry,
.pl-demo {
  color: var(--dim);
}
.pl-note {
  margin-top: 7px;
  line-height: 1.55;
}

/* a dialog is .overlay > .dialog, with the module toggling .open on the
   overlay; only a width that isn't the common one needs saying */
.overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.55);
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.18s ease,
    visibility 0s 0.18s;
}
.overlay.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.18s ease;
}
.dialog {
  width: var(--dialog-w, 460px);
  max-width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow-modal);
  overflow: hidden;
  transform: translateY(8px);
  transition: transform 0.18s ease;
}
.overlay.open .dialog {
  transform: none;
}
#shortcuts {
  --dialog-w: 400px;
}
#about {
  --dialog-w: 420px;
}
.dlg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px 11px;
  border-bottom: 2px solid var(--line);
}
.dlg-head h2 {
  font-size: 15px;
  font-weight: 600;
}
/* a newspaper masthead rather than a dialog title */
#whatsnewTitle {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
.closebtn {
  background: none;
  border: 0;
  color: var(--dim);
  padding: 0 2px;
  cursor: pointer;
  font-size: 21px;
  line-height: 24px;
  position: relative;
  top: -0.04em;
}
.closebtn:hover {
  color: var(--accent);
}
.dlg-body {
  overflow-y: auto;
  padding: 14px 18px 16px;
}
#whatsnewBody {
  padding-top: 4px;
}
.wn-date {
  font-family: var(--serif);
  font-style: italic;
  color: var(--dim);
  font-size: 12px;
  margin: 15px 0 5px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.wn-entry {
  padding: 8px 0;
}
.wn-tag {
  display: block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin-bottom: 2px;
  color: var(--dim);
}
.wn-tag-new {
  color: var(--accent);
}
.wn-tag-improved {
  color: var(--text);
}
.wn-tags {
  display: flex;
  gap: 5px;
}
/* the separator is the kind's, so the foil never carries one through its text clip,
   and it is drawn rather than written so it stays out of the label's spoken name */
.wn-tags .wn-tag:has(+ .wn-tag)::after {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-left: 5px;
  vertical-align: 0.15em;
  border-radius: 50%;
  background: var(--dim);
}
/* the filter row, pinned under the masthead */
#whatsnewFilter {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  padding: 9px 18px;
  border-bottom: 1px solid var(--line);
}
.wn-chip {
  margin-bottom: 0;
  padding: 3px 9px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 5px;
  cursor: pointer;
}
.wn-chip[aria-pressed="false"] {
  background: none;
  color: var(--dim);
  opacity: 0.6;
}
.wn-chip:hover,
.wn-chip:focus-visible {
  border-color: var(--accent);
}
.wn-empty {
  color: var(--dim);
  font-size: 12px;
  padding: 6px 0;
}
.wn-title {
  font-weight: 600;
}
.wn-detail {
  color: var(--dim);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 3px;
}
.wn-more {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 7px;
  cursor: pointer;
  font: inherit;
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.wn-more:hover {
  border-color: var(--accent);
}
.wn-tags .wn-tag-flagship {
  background: var(--foil);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: foil-sweep 6s linear infinite;
}
/* the fill is the chip's on/off signal, so its foil is never clipped to text;
   naming the on state outranks the off rule, so off needs no flagship case */
.wn-chip.wn-tag-flagship[aria-pressed="true"] {
  background: var(--foil);
  background-size: 200% 100%;
  color: var(--bg);
  border-color: transparent;
  box-shadow: 0 0 10px var(--foil-glow);
  animation: foil-sweep 6s linear infinite;
}
/* the shared border-color hover cannot show through the foil */
.wn-chip.wn-tag-flagship[aria-pressed="true"]:hover,
.wn-chip.wn-tag-flagship[aria-pressed="true"]:focus-visible {
  box-shadow: 0 0 15px var(--foil-glow);
}
.wn-entry.wn-flagship {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  /* the rail hangs in the dialog's gutter, so the title keeps the common left edge */
  margin-left: -11px;
  padding-left: 11px;
  background: linear-gradient(90deg, rgba(var(--accent-rgb), 0.07), transparent 60%);
}
.wn-entry.wn-flagship::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: var(--foil);
  background-size: 200% 100%;
  animation: foil-sweep 6s linear infinite;
}
.wn-entry.wn-flagship::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    transparent 42%,
    rgba(255, 255, 255, 0.07) 50%,
    transparent 58%
  );
  animation: foil-sheen 7s ease-in-out infinite;
}
.wn-flagship .wn-title {
  font-size: 14px;
}
@keyframes foil-sweep {
  to {
    background-position: 200% 0;
  }
}
@keyframes foil-sheen {
  from {
    transform: translateX(-100%);
  }
  55%,
  to {
    transform: translateX(100%);
  }
}

.st-sec + .st-sec {
  margin-top: 18px;
}
.st-sec h3 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--dim);
  margin-bottom: 8px;
}
.st-def {
  flex: none;
  margin-left: auto;
  color: var(--dim);
  font-size: 11px;
  white-space: nowrap;
}
.st-def:empty {
  display: none;
}
.st-desc {
  color: var(--dim);
  font-size: 12px;
  margin: 2px 0 12px 20px;
}
.st-desc:last-child {
  margin-bottom: 0;
}
/* storing a whole game's artwork: one row per game, under the setting that
   makes storing possible at all */
#offlineStore {
  margin-left: 20px;
}
.ofl-intro {
  color: var(--dim);
  font-size: 12px;
  margin-bottom: 8px;
}
.ofl-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 2px 10px;
  margin-bottom: 10px;
}
.ofl-name {
  font-size: 12px;
}
.ofl-stat {
  grid-column: 1;
  color: var(--dim);
  font-size: 11px;
}
.ofl-go {
  grid-column: 2;
  grid-row: 1 / span 2;
}
.ofl-bar {
  grid-column: 1 / -1;
  height: 3px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}
.ofl-bar i {
  display: block;
  height: 100%;
  background: var(--accent);
  transition: width 0.2s linear;
}
#oflBoth {
  font-size: 11px;
}

#shortcutsBody {
  padding-top: 12px;
}
.sc-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 4px 0;
}
.sc-keys {
  display: flex;
  gap: 3px;
  min-width: 96px;
  flex: none;
}
kbd {
  background: var(--panel2);
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 4px;
  padding: 0 5px;
  min-width: 20px;
  text-align: center;
  font-family: inherit;
  font-size: 11px;
  line-height: 1.6;
}

#aboutBody p {
  line-height: 1.55;
}
#aboutBody p + p {
  margin-top: 11px;
}
.ab-notice {
  text-align: justify;
}
.ab-meta {
  color: var(--dim);
  font-size: 12px;
}
#aboutBody a {
  color: var(--accent);
}
/* the type encyclopedia card's rows; the dialog shell is the shared one */
.tc-cat {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.tc-prose {
  margin: 10px 0;
  line-height: 1.55;
}
.tc-counts {
  font-size: 12px;
}
#typeCardBody .e {
  color: var(--dim);
}
.tc-fhead {
  padding: 12px 0 3px;
  border-bottom: 1px solid var(--line);
}
.tc-field {
  margin: 7px 0;
  font-size: 12px;
  line-height: 1.5;
}
.tc-fname {
  color: var(--accent);
}
.tc-find {
  margin-top: 12px;
  font-size: 12px;
}

/* narrow: the sidebar leaves the flow and slides over the map instead of shrinking it
   (the 720px breakpoint is duplicated in the script's narrowMQ) */
@media (max-width: 720px) {
  #sidebar {
    position: absolute;
    z-index: var(--z-drawer);
    height: 100%;
    width: 82vw;
    max-width: 320px;
    --collapsed: 0;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.5);
  }
  body.menu-open #sidebar {
    transform: none;
  }
  body.menu-open #scrim {
    display: block;
    position: absolute;
    inset: 0;
    z-index: var(--z-scrim);
    background: rgba(0, 0, 0, 0.45);
  }
  #sidebar h1 {
    padding-left: 60px;
  }
  #hud {
    display: none;
  }
  #minimap {
    bottom: 48px;
  }
  #main:has(#camPanel:not([hidden])) #minimap {
    display: none;
  }
  #help {
    left: auto;
    right: 10px;
    font-size: 10px;
  }
  .btnrow button,
  #toggles .checkrow,
  .filters .checkrow {
    padding-top: 6px;
    padding-bottom: 6px;
  }
  .overlay {
    padding: 10px;
    align-items: end;
  }
  .dialog {
    width: 100%;
    max-height: 85vh;
  }
  body.menu-open #chipRow,
  body.menu-open #placePanel {
    display: none;
  }
  /* the bar keeps the title and its controls; the legend wants a width it hasn't got */
  #graphLegend {
    display: none;
  }
  /* prose needs the width more than the anchoring does */
  #placePanel {
    left: 10px;
    right: 10px;
    width: auto;
    max-width: none;
  }
  /* the screen list becomes a bottom sheet: the upper map stays visible */
  #camPanel,
  #numbersPanel {
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: none;
    max-height: 40%;
    border-radius: 10px 10px 0 0;
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
  }
}

/* last in the file, so it outranks the narrow drawer's transition written later
   at the same weight */
@media (prefers-reduced-motion: reduce) {
  #sidebar,
  .overlay,
  .overlay.open, /* two classes: a lone .overlay cannot outrank it */
  .dialog,
  .toast {
    transition: none;
  }
  .toast-bar {
    display: none;
  }
  /* the foil is colour and stays; only its sweep and the sheen are motion */
  .wn-tags .wn-tag-flagship,
  .wn-chip.wn-tag-flagship[aria-pressed="true"],
  .wn-entry.wn-flagship::before {
    animation: none;
  }
  .wn-entry.wn-flagship::after {
    display: none;
  }
}