:root {
  --bg: #12161c;
  --panel: #1a2027;
  --line: #2b333e;
  --text: #d6dde5;
  --dim: #8a94a0;
  --amber: #c9a35c;
  --gold: #ffd76b;
  --teal: #3fd0c9;
  --red: #d05a5a;
  --magenta: #ff6ad5;
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; overflow: hidden; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Chakra Petch", sans-serif;
  display: flex;
  flex-direction: column;
}

#bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 13px;
  padding: 10px 18px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  z-index: 5;
}

#bar h1 { font-size: 1.05rem; text-transform: uppercase; letter-spacing: 0.05em; }
#bar h1 span { color: var(--amber); }
#bar h1 small { color: var(--dim); font-size: 0.7em; margin-left: 6px; }

#points {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.95rem;
  color: var(--gold);
  padding: 3px 12px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--bg);
}
#points.over { color: var(--red); border-color: var(--red); }

#status { font-size: 0.82rem; color: var(--dim); }
#status.good { color: var(--teal); }
#status.bad { color: var(--red); }

.spacer { flex: 1; }

button {
  font: inherit;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 12px;
  cursor: pointer;
  /* the bar wraps as a row rather than breaking "Clear blocks" across two lines */
  white-space: nowrap;
}
button:hover { border-color: var(--amber); }
button.primary { color: var(--gold); border-color: var(--amber); }
/* the bonuses panel is closed by default, so a search hitting a line inside it
   has to announce itself on the button */
button.match { color: var(--magenta); border-color: var(--magenta); }

#search-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-right: -4px;
}
#search {
  width: 186px;
  font: inherit;
  font-size: 0.82rem;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 6px 11px;
  outline: none;
}
#search::placeholder { color: #5d6874; }
#search:focus { border-color: var(--magenta); }
#search::-webkit-search-cancel-button { filter: invert(0.6); cursor: pointer; }
#search-n {
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.75rem;
  color: var(--magenta);
  min-width: 44px;
}
#search-n.none { color: var(--dim); }

#tree { flex: 1; width: 100%; cursor: grab; touch-action: none; }
#tree:active { cursor: grabbing; }

#tooltip {
  display: none;
  position: fixed;
  max-width: 340px;
  background: rgba(20, 25, 32, 0.96);
  border: 1px solid var(--amber);
  border-radius: 5px;
  padding: 10px 13px;
  font-size: 0.82rem;
  line-height: 1.45;
  pointer-events: none;
  z-index: 10;
}
#tooltip b { color: var(--gold); }
#tooltip i { color: var(--dim); }
.tt-blocked { color: var(--red); font-weight: 600; }
.tt-flavour {
  color: #7d8894;
  font-style: italic;
  font-size: 0.78rem;
}
.tt-cat {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
}

#panel {
  position: fixed;
  top: 58px;
  right: 12px;
  bottom: 44px;
  width: 330px;
  background: rgba(22, 27, 34, 0.96);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 14px 16px;
  overflow-y: auto;
  z-index: 8;
}
#panel.hidden { display: none; }
#panel h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--amber);
  margin-bottom: 10px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 7px;
}
#panel .stat {
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 4px 0;
  border-bottom: 1px solid rgba(43, 51, 62, 0.5);
}
#panel .stat.dim { color: var(--dim); }
#panel .stat.hit {
  color: var(--magenta);
  background: rgba(255, 106, 213, 0.09);
  box-shadow: inset 2px 0 0 var(--magenta);
  padding-left: 8px;
}

#key {
  position: fixed;
  top: 58px;
  left: 12px;
  bottom: 44px;
  width: 232px;
  background: rgba(22, 27, 34, 0.96);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 12px 8px 12px 14px;
  overflow-y: auto;
  z-index: 8;
}
#key.hidden { display: none; }
#key h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--amber);
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 7px;
}
.key-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 6px;
  border-radius: 3px;
  font-size: 0.78rem;
  cursor: pointer;
}
.key-row:hover { background: rgba(255, 255, 255, 0.05); }
.key-row.on { background: rgba(255, 215, 107, 0.14); }
.key-sw {
  width: 11px; height: 11px;
  border-radius: 50%;
  flex: none;
}
.key-name { flex: 1; }
.key-n {
  color: var(--dim);
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.7rem;
}

#toast {
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%) translateY(12px);
  background: var(--panel);
  border: 1px solid var(--amber);
  border-radius: 5px;
  padding: 8px 18px;
  font-size: 0.85rem;
  opacity: 0;
  transition: opacity 150ms, transform 150ms;
  pointer-events: none;
  z-index: 20;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

#legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 18px;
  align-items: center;
  padding: 7px 18px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  font-size: 0.75rem;
  color: var(--dim);
}
#legend .sw {
  display: inline-block;
  width: 11px; height: 11px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
  /* node fills are muted on purpose, so the dim ones need an edge to be seen
     at 11px against the bar */
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
}
.sw.picked { background: var(--gold); }
.sw.path { background: var(--teal); }
/* these two match what nodeColor() paints, not the identity colours */
.sw.wormhole { background: #6d5a91; }
.sw.travel { background: #2e363e; }
.sw.blocked { background: #8a3232; }
.sw.search { background: var(--magenta); }
#legend b { color: var(--text); font-weight: 500; }
#legend .dim { margin-left: auto; }
#legend a { color: var(--amber); text-decoration: none; }
#legend a:hover { text-decoration: underline; }