/* Emberwake UI stylesheet. Pixel-art DOM UI over the WebGL canvas. All authored in 1x UI pixels; #ui is zoomed
   by the UI scale (src/ui/scale.js). 9-slice frames come from --img-* variables generated by src/ui/theme.js,
   symbol glyphs from --g-* masks (src/ui/glyphs.js). Font: Lumen Pixel (tools/makefont.py), 12px = 1:1.
   Sections: 1 base  2 kit  3 windows  4 overlays  5 screens  6 HUD  7 window contents  8 accessibility */

/* ============================================================ 1 base */

@font-face {
  font-family: 'Lumen Pixel';
  src: url('fonts/lumen-pixel.woff2') format('woff2'), url('fonts/lumen-pixel.ttf') format('truetype');
  font-weight: 400;
  font-display: block;
}
@font-face {
  font-family: 'Lumen Pixel';
  src: url('fonts/lumen-pixel-bold.woff2') format('woff2'), url('fonts/lumen-pixel-bold.ttf') format('truetype');
  font-weight: 700;
  font-display: block;
}

:root {
  --ink: #07080a;
  --deep: #0d0e11;
  --well: #0e0f12;
  --face: #17191e;
  --face2: #1d2026;
  --face3: #23262d;
  --steel: #3b4049;
  --steel-hi: #6b717c;
  --steel-hi2: #8d939d;
  --steel-lo: #2c3037;
  --brass: #d9963a;
  --brass-dk: #7a4e1c;
  --brass-hi: #ffd27a;
  --amber: #f0a83c;
  --amber-dk: #b8701e;
  --rust: #a8502a;
  --violet: #9b4dff;
  --violet-dk: #4a1f73;
  --violet-hi: #d17dff;
  --magenta: #e04ca8;
  --cyan: #4fe3ff;
  --cyan-dk: #1a6b80;
  --cyan-hi: #b8f6ff;
  --teal: #2fc7a0;
  --teal-dk: #146b5c;
  --text: #ece4d0;
  --dim: #a39b8a;
  --mute: #6d685e;
  --red: #e0503a;
  --green: #7fd35a;
  --good: #7fd35a;
  --warn: #f0a83c;
  --bad: #e0503a;
  --gloam: #9b4dff;
  --font: 'Lumen Pixel', 'DejaVu Sans Mono', 'Menlo', 'Consolas', monospace;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: #0b0c0f;
  color: var(--text);
  font: 400 12px/14px var(--font);
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
  font-smooth: never;
  text-rendering: optimizeSpeed;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

#gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
}

#ui {
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  image-rendering: pixelated;
}

#ui > * {
  position: absolute;
  inset: 0;
}

#screens > *,
#windows > *,
#overlay > *,
#top > *,
#hud > * {
  pointer-events: auto;
}

#windows,
#overlay,
#top {
  pointer-events: none;
}

/* Floating helpers never take the pointer (they sit under the cursor). */
#top > .drag-ghost,
#top > .drag-ghost *,
#top > .tooltip,
#overlay > .toasts {
  pointer-events: none !important;
}

[hidden] {
  display: none !important;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

button {
  cursor: pointer;
}

h1,
h2,
h3,
p {
  margin: 0;
  font-weight: 400;
}

mark {
  background: none;
  color: var(--brass-hi);
  text-decoration: underline;
  text-underline-offset: 2px;
}

:focus {
  outline: none;
}

:focus-visible {
  outline: 1px solid var(--amber);
  outline-offset: 1px;
}

::selection {
  background: var(--amber-dk);
  color: #fff;
}

/* Scrollbars: thin steel rail with a brass-edged thumb. */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--steel) var(--well);
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: var(--well);
  box-shadow: inset 1px 0 var(--ink);
}
::-webkit-scrollbar-thumb {
  background: var(--steel);
  box-shadow: inset 1px 1px var(--steel-hi), inset -1px -1px var(--steel-lo), 0 0 0 1px var(--ink);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--steel-hi);
}
::-webkit-scrollbar-corner {
  background: var(--well);
}

.bold,
b,
strong {
  font-weight: 700;
}

.dim {
  color: var(--dim);
}
.mute {
  color: var(--mute);
}
.good {
  color: var(--good);
}
.warn {
  color: var(--warn);
}
.bad {
  color: var(--bad);
}
.cyan {
  color: var(--cyan);
}
.violet {
  color: var(--violet-hi);
}
.teal {
  color: var(--teal);
}
.brass {
  color: var(--brass-hi);
}

.caps {
  text-transform: uppercase;
  letter-spacing: 1px;
}

.big {
  font-size: 24px;
  line-height: 26px;
}

.huge {
  font-size: 36px;
  line-height: 38px;
}

.shadow {
  text-shadow: 1px 1px 0 var(--ink);
}

.spacer {
  flex: 1;
}

.row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ============================================================ 2 kit */

/* Glyph: 9x9 mask, takes the current colour. */
.g {
  display: inline-block;
  flex: none;
  width: 9px;
  height: 9px;
  background: currentColor;
  -webkit-mask: var(--g) no-repeat center / 9px 9px;
  mask: var(--g) no-repeat center / 9px 9px;
  image-rendering: pixelated;
  vertical-align: -1px;
}
.g-blank {
  background: none;
}
.g.g2 {
  width: 18px;
  height: 18px;
  -webkit-mask-size: 18px 18px;
  mask-size: 18px 18px;
}

.icon {
  display: block;
  flex: none;
  image-rendering: pixelated;
}

/* Frames */
.frame {
  border: 4px solid transparent;
  border-image: var(--img-frame) 4 fill / 4px stretch;
}
.frame-gloam {
  border: 4px solid transparent;
  border-image: var(--img-frame-gloam) 4 fill / 4px stretch;
}
.frame-cyan {
  border: 4px solid transparent;
  border-image: var(--img-frame-cyan) 4 fill / 4px stretch;
}
.plate {
  border: 2px solid transparent;
  border-image: var(--img-plate) 2 fill / 2px stretch;
}
.plate-solid {
  border: 2px solid transparent;
  border-image: var(--img-plate-solid) 2 fill / 2px stretch;
}
.inset {
  border: 2px solid transparent;
  border-image: var(--img-inset) 2 fill / 2px stretch;
}
.frame-tip {
  border: 2px solid transparent;
  border-image: var(--img-tip) 2 fill / 2px stretch;
}

/* Key cap */
.kbd {
  display: inline-block;
  min-width: 13px;
  height: 13px;
  padding: 0 3px;
  font-size: 12px;
  line-height: 11px;
  text-align: center;
  color: var(--brass-hi);
  background: var(--deep);
  box-shadow: inset 0 0 0 1px var(--brass-dk), inset 0 -2px 0 0 #2a1c0c;
  white-space: nowrap;
  vertical-align: 0;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}
.kbd-in {
  margin-left: 6px;
  margin-right: -4px;
  background: rgba(0, 0, 0, 0.35);
}

/* Buttons */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 24px;
  padding: 3px 10px 1px;
  border-style: solid;
  border-color: transparent;
  border-width: 2px 2px 4px;
  border-image: var(--img-btn) 2 2 4 fill / 2px 2px 4px stretch;
  background: none;
  color: var(--text);
  text-shadow: 1px 1px 0 var(--ink);
  white-space: nowrap;
  letter-spacing: 0.5px;
}
.btn:hover {
  border-image-source: var(--img-btn-hover);
}
.btn:active:not(:disabled),
.btn.on {
  border-image-source: var(--img-btn-down);
  padding-top: 4px;
  padding-bottom: 0;
}
.btn:focus-visible {
  outline: 1px solid var(--brass-hi);
  outline-offset: 1px;
}
.btn:disabled {
  opacity: 0.45;
  cursor: default;
  filter: grayscale(0.6);
}
.btn .g {
  margin-top: -1px;
}
.btn-primary {
  border-image-source: var(--img-btn-primary);
  color: #1a0f04;
  text-shadow: 1px 1px 0 rgba(255, 230, 170, 0.45);
  font-weight: 700;
}
.btn-primary:hover {
  border-image-source: var(--img-btn-primary-hover);
}
.btn-primary:active:not(:disabled) {
  border-image-source: var(--img-btn-primary-down);
}
.btn-primary .kbd-in {
  color: #2a1804;
  background: rgba(255, 230, 170, 0.35);
  box-shadow: inset 0 0 0 1px rgba(60, 30, 4, 0.6);
}
.btn-danger {
  border-image-source: var(--img-btn-danger);
  color: #fff;
}
.btn-danger:hover {
  border-image-source: var(--img-btn-danger-hover);
}
.btn-danger:active:not(:disabled) {
  border-image-source: var(--img-btn-danger-down);
}
.btn-cyan {
  border-image-source: var(--img-btn-cyan);
  color: #021a20;
  text-shadow: 1px 1px 0 rgba(220, 250, 255, 0.4);
  font-weight: 700;
}
.btn-cyan:hover {
  border-image-source: var(--img-btn-cyan-hover);
}
.btn-cyan:active:not(:disabled) {
  border-image-source: var(--img-btn-cyan-down);
}
.btn-ghost {
  border-image: none;
  border-color: transparent;
  color: var(--dim);
}
.btn-ghost:hover {
  color: var(--brass-hi);
  border-image: none;
  background: rgba(240, 168, 60, 0.08);
}
.btn-sm {
  height: 20px;
  padding: 1px 6px 0;
  border-width: 2px 2px 3px;
  border-image-width: 2px 2px 3px;
}
.btn-sm:active:not(:disabled) {
  padding-top: 2px;
  padding-bottom: 0;
}
.btn-lg {
  height: 34px;
  padding: 6px 18px 2px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
}
.btn-lg:active:not(:disabled) {
  padding-top: 8px;
  padding-bottom: 0;
}
.btn-xl {
  height: 40px;
  font-size: 24px;
  padding: 7px 22px 3px;
  letter-spacing: 1px;
}

/* Icon buttons: square, flat until hovered */
.ibtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--dim);
  box-shadow: none;
}
.ibtn:hover {
  color: var(--brass-hi);
  background: rgba(255, 210, 122, 0.08);
  box-shadow: inset 0 0 0 1px var(--steel-lo);
}
.ibtn:active {
  background: rgba(0, 0, 0, 0.3);
}
.ibtn.on {
  color: var(--ink);
  background: var(--amber);
  box-shadow: inset 0 1px var(--brass-hi), inset 0 -1px var(--amber-dk), 0 0 0 1px var(--ink);
}

/* Text inputs */
.text-input,
.search-input,
.step-input,
select.select {
  display: block;
  width: 100%;
  height: 24px;
  padding: 4px 6px 2px;
  border: 2px solid transparent;
  border-image: var(--img-inset) 2 fill / 2px stretch;
  background: none;
  color: var(--text);
  user-select: text;
  -webkit-user-select: text;
  caret-color: var(--amber);
}
.text-input:focus,
.search-input:focus,
.step-input:focus {
  border-image-source: var(--img-inset-focus);
}
.text-input::placeholder,
.search-input::placeholder {
  color: var(--mute);
}
.text-input.big-input {
  height: 32px;
  font-size: 24px;
  line-height: 24px;
  padding: 4px 8px 2px;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 120px;
}
.search .search-input {
  padding-left: 19px;
  padding-right: 20px;
}
.search .search-input::-webkit-search-cancel-button {
  display: none;
}
.search-g {
  position: absolute;
  left: 6px;
  top: 7px;
  color: var(--mute);
  pointer-events: none;
}
.search:focus-within .search-g {
  color: var(--amber);
}
.search-clear {
  position: absolute;
  right: 3px;
  top: 3px;
  width: 18px;
  height: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: 0;
  background: none;
  color: var(--mute);
}
.search-clear:hover {
  color: var(--brass-hi);
}
.search.has-text .search-clear {
  display: flex;
}

/* Toggle */
.toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  min-height: 20px;
}
.tg-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.tg-track {
  position: relative;
  flex: none;
  width: 26px;
  height: 14px;
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), inset -1px -1px var(--steel-lo), 0 0 0 1px var(--ink);
}
.tg-knob {
  position: absolute;
  left: 1px;
  top: 1px;
  width: 12px;
  height: 12px;
  background: var(--steel-hi);
  box-shadow: inset 1px 1px var(--steel-hi2), inset -1px -1px var(--steel), 0 0 0 1px var(--ink);
  transition: left 80ms steps(3);
}
.tg-input:checked + .tg-track {
  background: #3a2a10;
}
.tg-input:checked + .tg-track .tg-knob {
  left: 13px;
  background: var(--amber);
  box-shadow: inset 1px 1px var(--brass-hi), inset -1px -1px var(--amber-dk), 0 0 0 1px var(--ink);
}
.tg-input:focus-visible + .tg-track {
  outline: 1px solid var(--amber);
  outline-offset: 2px;
}
.tg-text {
  display: flex;
  flex-direction: column;
}
.tg-hint {
  color: var(--mute);
}

/* Slider */
.slider {
  display: grid;
  grid-template-columns: 1fr 160px 48px;
  align-items: center;
  gap: 10px;
  min-height: 22px;
}
.sl-input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 14px;
  margin: 0;
  background: transparent;
  cursor: pointer;
}
.sl-input::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(90deg, var(--amber) 0 var(--fill, 0%), var(--well) var(--fill, 0%) 100%);
  box-shadow: inset 0 1px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--ink), 0 1px 0 1px var(--steel-lo);
}
.sl-input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 8px;
  height: 14px;
  margin-top: -4px;
  background: var(--steel-hi);
  box-shadow: inset 1px 1px var(--steel-hi2), inset -1px -1px var(--steel), 0 0 0 1px var(--ink);
}
.sl-input:hover::-webkit-slider-thumb,
.sl-input:focus-visible::-webkit-slider-thumb {
  background: var(--brass-hi);
  box-shadow: inset 1px 1px #fff3cc, inset -1px -1px var(--brass), 0 0 0 1px var(--ink);
}
.sl-input:focus-visible {
  outline: none;
}
.sl-value {
  text-align: right;
  color: var(--brass-hi);
  font-variant-numeric: tabular-nums;
}

/* Segmented choice */
.seg {
  display: inline-flex;
  gap: 0;
  padding: 2px;
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), inset -1px -1px var(--steel-lo);
}
.seg-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 2px 10px 0;
  border: 0;
  background: transparent;
  color: var(--dim);
}
.seg-btn:hover {
  color: var(--text);
  background: rgba(255, 255, 255, 0.04);
}
.seg-btn.on {
  color: #1a0f04;
  background: var(--amber);
  box-shadow: inset 0 1px var(--brass-hi), inset 0 -1px var(--amber-dk), 0 0 0 1px var(--ink);
  text-shadow: none;
}

/* Tabs */
.tabs {
  display: flex;
  gap: 2px;
  align-items: flex-end;
  padding: 0 4px;
  box-shadow: inset 0 -1px var(--ink);
}
.tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 3px 10px 0;
  border: 3px solid transparent;
  border-bottom-width: 1px;
  border-image: var(--img-tab) 3 3 1 fill / 3px 3px 1px stretch;
  background: none;
  color: var(--dim);
  margin-bottom: 0;
}
.tab:hover {
  border-image-source: var(--img-tab-hover);
  color: var(--text);
}
.tab.on {
  height: 24px;
  border-image: var(--img-tab-on) 3 3 0 fill / 3px 3px 0 stretch;
  border-bottom-width: 0;
  color: var(--brass-hi);
  padding-bottom: 1px;
}
.tab-badge {
  min-width: 12px;
  height: 11px;
  padding: 0 2px;
  font-size: 12px;
  line-height: 11px;
  color: var(--ink);
  background: var(--amber);
  text-align: center;
}
.tabs-v {
  flex-direction: column;
  align-items: stretch;
  box-shadow: inset -1px 0 var(--ink);
  padding: 4px 0;
}
.tabs-v .tab {
  justify-content: flex-start;
}

/* Progress bar */
.pbar {
  position: relative;
  height: 12px;
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--ink), 0 1px 0 1px var(--steel-lo);
  overflow: hidden;
}
.pb-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(180deg, var(--brass-hi) 0 1px, var(--amber) 1px 70%, var(--amber-dk) 70%);
  box-shadow: 1px 0 var(--ink);
}
.pb-cyan .pb-fill {
  background: linear-gradient(180deg, var(--cyan-hi) 0 1px, var(--cyan) 1px 70%, var(--cyan-dk) 70%);
}
.pb-violet .pb-fill {
  background: linear-gradient(180deg, var(--violet-hi) 0 1px, var(--violet) 1px 70%, var(--violet-dk) 70%);
}
.pb-teal .pb-fill {
  background: linear-gradient(180deg, #8affdc 0 1px, var(--teal) 1px 70%, var(--teal-dk) 70%);
}
.pb-red .pb-fill {
  background: linear-gradient(180deg, #ff9a8a 0 1px, var(--red) 1px 70%, #7a1a14 70%);
}
.pb-seg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(90deg, transparent 0 calc(100% / var(--segs) - 1px), var(--ink) calc(100% / var(--segs) - 1px) calc(100% / var(--segs)));
}
.pb-text {
  position: absolute;
  inset: 0;
  text-align: center;
  line-height: 12px;
  color: #fff;
  text-shadow: 1px 0 var(--ink), -1px 0 var(--ink), 0 1px var(--ink), 0 -1px var(--ink);
  white-space: nowrap;
  z-index: 1;
}
.pbar.thin {
  height: 4px;
}
.pbar.thin .pb-fill {
  background: var(--amber);
}
.pbar.thin.pb-cyan .pb-fill {
  background: var(--cyan);
}
.pbar.thin.pb-violet .pb-fill {
  background: var(--violet);
}
.pbar.thin.pb-teal .pb-fill {
  background: var(--teal);
}

/* List */
.list {
  overflow-y: auto;
  overflow-x: hidden;
  border: 2px solid transparent;
  border-image: var(--img-inset) 2 fill / 2px stretch;
  padding: 1px;
}
.list:focus-visible {
  border-image-source: var(--img-inset-focus);
  outline: none;
}
.list-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 22px;
  padding: 2px 6px;
  cursor: pointer;
  color: var(--text);
}
.list-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.015);
}
.list-row:hover {
  background: rgba(240, 168, 60, 0.08);
}
.list-row.sel {
  background: rgba(240, 168, 60, 0.18);
  box-shadow: inset 2px 0 var(--amber);
  color: var(--brass-hi);
}
.list-empty {
  padding: 16px;
  text-align: center;
  color: var(--mute);
}

/* Section header: engraved label with a rule */
.section {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.section-head::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--steel-lo);
  box-shadow: 0 1px var(--ink);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.field-label {
  color: var(--dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.field-hint {
  color: var(--mute);
}
.field-error {
  min-height: 14px;
  color: var(--red);
  margin-top: 4px;
}

.stepper {
  display: inline-flex;
  align-items: center;
}
.stepper .step-input {
  width: 44px;
  text-align: center;
}
.step-btn {
  width: 18px;
  height: 24px;
  border: 0;
  padding: 0;
  background: var(--face2);
  color: var(--dim);
  box-shadow: inset 0 0 0 1px var(--ink);
}
.step-btn:hover {
  color: var(--brass-hi);
}

/* Chips and badges */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 16px;
  padding: 1px 5px 0;
  background: var(--face2);
  color: var(--dim);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 0 0 1px var(--ink);
  white-space: nowrap;
}
.chip-amber {
  color: var(--ink);
  background: var(--amber);
  box-shadow: inset 0 1px var(--brass-hi), inset 0 -1px var(--amber-dk), 0 0 0 1px var(--ink);
}
.chip-cyan {
  color: var(--cyan);
  background: #0c2a32;
  box-shadow: inset 0 0 0 1px var(--cyan-dk), 0 0 0 1px var(--ink);
}
.chip-violet {
  color: var(--violet-hi);
  background: #1f0f30;
  box-shadow: inset 0 0 0 1px var(--violet-dk), 0 0 0 1px var(--ink);
}
.chip-teal {
  color: var(--teal);
  background: #0b2621;
  box-shadow: inset 0 0 0 1px var(--teal-dk), 0 0 0 1px var(--ink);
}
.chip-red {
  color: #ffb0a0;
  background: #3a120c;
  box-shadow: inset 0 0 0 1px #7a2a1a, 0 0 0 1px var(--ink);
}

/* Item slot */
.slot {
  position: relative;
  width: var(--slot, 36px);
  height: var(--slot, 36px);
  border: 2px solid transparent;
  border-image: var(--img-slot) 2 fill / 2px stretch;
  display: flex;
  align-items: center;
  justify-content: center;
}
.slot > .icon {
  margin: -1px 0 0 -1px;
}
.slot:hover,
.slot.drop-hover {
  border-image-source: var(--img-slot-hover);
}
.slot.sel,
.slot.kfocus {
  border-image-source: var(--img-slot-sel);
}
.slot.drop-hover {
  box-shadow: 0 0 0 1px var(--amber);
}
.slot.locked {
  border-image-source: var(--img-slot-locked);
}
.slot.empty > .icon {
  visibility: hidden;
}
.slot.filtered > .icon {
  visibility: visible;
  opacity: 0.3;
  filter: grayscale(1);
}
.slot.drag-src > .icon {
  opacity: 0.35;
}
.slot-n {
  position: absolute;
  right: 1px;
  bottom: -1px;
  color: #fff;
  text-shadow: 1px 0 var(--ink), -1px 0 var(--ink), 0 1px var(--ink), 0 -1px var(--ink), 1px 1px var(--ink);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}
.slot-key {
  position: absolute;
  left: 1px;
  top: -1px;
  color: var(--mute);
  pointer-events: none;
  text-shadow: 1px 1px 0 var(--ink);
}
/* quickbar key numbers (1-0): clearly readable */
.qb-slot .slot-key {
  left: 2px;
  top: 0;
  color: var(--brass-hi);
  text-shadow: 1px 0 var(--ink), -1px 0 var(--ink), 0 1px var(--ink), 0 -1px var(--ink), 1px 1px var(--ink);
}
.slot-grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), var(--slot));
  gap: 0;
  width: max-content;
}
.slot-grid:focus-visible {
  outline: none;
}
.drag-ghost {
  position: absolute;
  pointer-events: none;
  z-index: 10000;
  filter: drop-shadow(2px 3px 0 rgba(0, 0, 0, 0.6));
}
.drag-ghost .slot {
  border-image: none;
}
body.dragging-item,
body.dragging-item * {
  cursor: grabbing !important;
}

/* ============================================================ 3 windows */

.win {
  position: absolute;
  display: flex;
  flex-direction: column;
  min-width: 200px;
  max-width: calc(100% - 8px);
  max-height: calc(100% - 8px);
  border: 4px solid transparent;
  border-image: var(--img-frame) 4 fill / 4px stretch;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.45));
}
.win:focus,
.modal:focus,
.cmenu:focus,
.codex-page:focus {
  outline: none;
}
.win.win-opening {
  animation: win-in 140ms steps(4);
}
@keyframes win-in {
  from {
    transform: translateY(6px);
    opacity: 0;
  }
}
.win-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  margin: -1px -1px 0;
  padding: 0 3px 0 4px;
  background: linear-gradient(180deg, #343941 0, #2a2e35 100%);
  box-shadow: inset 0 1px var(--steel-hi), inset 0 -1px var(--brass-dk), 0 1px var(--ink);
  cursor: grab;
}
.win.dragging .win-head {
  cursor: grabbing;
}
.win-grip {
  flex: none;
  width: 12px;
  height: 12px;
  background: var(--img-grip) repeat;
  opacity: 0.9;
}
.win-icon {
  color: var(--brass);
}
.win-title {
  font-weight: 700;
  color: var(--brass-hi);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 var(--ink);
  white-space: nowrap;
}
.win:not(.win-top) .win-title {
  color: var(--dim);
}
.win-key {
  margin-left: 2px;
  opacity: 0.85;
}
.win-tools {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  min-width: 0;
}
.win-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border: 0;
  padding: 0;
  background: var(--face);
  color: var(--dim);
  box-shadow: inset 1px 1px rgba(255, 255, 255, 0.06), 0 0 0 1px var(--ink);
}
.win-btn:hover {
  color: var(--brass-hi);
  background: var(--steel-lo);
}
.win-close:hover {
  color: #fff;
  background: var(--rust);
}
.win.pinned .win-pin {
  color: var(--ink);
  background: var(--amber);
}
.win-body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 8px;
  overflow: hidden;
}
.win-body.pad0 {
  padding: 0;
}

/* ============================================================ 4 overlays */

.tooltip {
  position: absolute;
  z-index: 9000;
  max-width: 300px;
  min-width: 60px;
  padding: 5px 7px 6px;
  border: 2px solid transparent;
  border-image: var(--img-tip) 2 fill / 2px stretch;
  pointer-events: none;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5));
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tooltip.tt-gloam {
  border-image-source: var(--img-tip-gloam);
}
.tt-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 1px;
}
.tt-head .icon {
  width: 32px;
  height: 32px;
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--steel-lo);
}
.tt-titles {
  flex: 1;
  min-width: 0;
}
.tt-title {
  font-weight: 700;
  color: var(--brass-hi);
}
.tt-gloam .tt-title {
  color: var(--violet-hi);
}
.tt-sub {
  color: var(--dim);
}
.tt-tag {
  align-self: flex-start;
  padding: 1px 4px 0;
  background: var(--face2);
  color: var(--dim);
  box-shadow: 0 0 0 1px var(--ink);
}
.tt-text {
  color: var(--text);
  white-space: pre-line;
}
.tt-detail {
  color: var(--dim);
}
.tt-lines {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.tt-line {
  display: flex;
  justify-content: space-between;
  gap: 14px;
}
.tt-l {
  color: var(--dim);
}
.tt-v {
  color: var(--text);
  text-align: right;
}
.tt-line.good .tt-v {
  color: var(--good);
}
.tt-line.bad .tt-v {
  color: var(--bad);
}
.tt-line.cyan .tt-v {
  color: var(--cyan);
}
.tt-warn {
  color: var(--red);
}
.tt-sep {
  height: 1px;
  background: var(--steel-lo);
  margin: 1px -2px;
}
.tt-more {
  color: var(--mute);
}
.tt-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 10px;
  padding-top: 3px;
  border-top: 1px solid var(--steel-lo);
  color: var(--dim);
}
.tt-key {
  display: flex;
  gap: 4px;
  align-items: center;
}

.toasts {
  position: absolute;
  top: 72px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  z-index: 8000;
}
.toast {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 4px;
  border: 2px solid transparent;
  border-image: var(--img-tip) 2 fill / 2px stretch;
  color: var(--text);
  text-shadow: 1px 1px 0 var(--ink);
  animation: toast-in 180ms steps(4);
  filter: drop-shadow(0 2px 0 rgba(0, 0, 0, 0.5));
}
.toast .g {
  color: var(--brass);
}
.toast-good .g {
  color: var(--good);
}
.toast-warn .g {
  color: var(--amber);
}
.toast-gloam {
  border-image-source: var(--img-tip-gloam);
}
.toast-gloam .g {
  color: var(--violet-hi);
}
.toast-cyan .g {
  color: var(--cyan);
}
.toast-n {
  margin-left: 2px;
  font-weight: 700;
  color: var(--brass-hi);
}
.toast-out {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 240ms steps(4), transform 240ms steps(4);
}
@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
}

.modal-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(5, 5, 8, 0.6);
  background-image: var(--img-scan);
  z-index: 7000;
  pointer-events: auto;
  animation: fade-in 120ms steps(3);
}
.modal-back.modal-out {
  opacity: 0;
  transition: opacity 110ms steps(2);
}
@keyframes fade-in {
  from {
    opacity: 0;
  }
}
.modal {
  min-width: 340px;
  max-width: min(640px, calc(100% - 32px));
  max-height: calc(100% - 32px);
  display: flex;
  flex-direction: column;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.5));
  animation: win-in 140ms steps(4);
}
.modal-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  margin: -1px -1px 0;
  padding: 0 10px;
  background: linear-gradient(180deg, #343941, #2a2e35);
  box-shadow: inset 0 1px var(--steel-hi), inset 0 -1px var(--brass-dk), 0 1px var(--ink);
  color: var(--brass-hi);
}
.modal-head h2 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 var(--ink);
}
.modal-danger .modal-head {
  background: linear-gradient(180deg, #3a2448, #2a1838);
  box-shadow: inset 0 1px #7a4ab0, inset 0 -1px var(--violet-dk), 0 1px var(--ink);
  color: var(--violet-hi);
}
.modal-body {
  padding: 14px 14px 10px;
  overflow: auto;
}
.modal-text {
  color: var(--text);
  line-height: 16px;
  max-width: 460px;
}
.modal-text + .text-input {
  margin-top: 10px;
}
.modal-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 8px 12px 10px;
  border-top: 1px solid var(--ink);
  box-shadow: inset 0 1px var(--steel-lo);
}

.cmenu {
  position: absolute;
  z-index: 9500;
  min-width: 170px;
  padding: 3px;
  display: flex;
  flex-direction: column;
  pointer-events: auto;
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, 0.5));
}
.cmenu-item {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  padding: 1px 6px 0;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
}
.cmenu-item .g {
  color: var(--brass);
}
.cmenu-item:hover:not(:disabled),
.cmenu-item:focus {
  background: rgba(240, 168, 60, 0.18);
  color: var(--brass-hi);
}
.cmenu-item:disabled {
  color: var(--mute);
}
.cmenu-item.danger {
  color: var(--violet-hi);
}
.cmenu-label {
  flex: 1;
}
.cmenu-sep {
  height: 1px;
  margin: 3px 2px;
  background: var(--steel-lo);
  box-shadow: 0 1px var(--ink);
}

/* ============================================================ 5 screens */

#screens {
  overflow: hidden;
}
.title-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  z-index: 0;
}
.screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
}
body:not(.ready) .screen {
  visibility: hidden;
}
.logo {
  display: block;
  image-rendering: pixelated;
}

/* title */
.title-screen {
  align-items: center;
  justify-content: center;
}
.title-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 34px;
  margin-top: -40px;
}
.logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.logo-wrap .logo {
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.35));
}
.logo-tagline {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: 1px 1px 0 var(--ink);
}
.tl-rule {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-dk));
  box-shadow: 0 1px var(--ink);
}
.tl-rule:last-child {
  background: linear-gradient(270deg, transparent, var(--brass-dk));
}
.title-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 240px;
}
.title-menu .btn {
  width: 100%;
  justify-content: flex-start;
}
.title-menu .btn .btn-label {
  flex: 1;
  text-align: left;
}
.title-hint {
  color: var(--dim);
  text-shadow: 1px 1px 0 var(--ink);
  animation: blink 1.6s steps(2) infinite;
}
@keyframes blink {
  50% {
    opacity: 0.45;
  }
}
.title-foot {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  text-shadow: 1px 1px 0 var(--ink);
}

/* login */
.login-screen {
  align-items: center;
  justify-content: center;
}
.login-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.login-panel {
  width: 380px;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.45));
}
.panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 28px;
  margin: -1px -1px 0;
  padding: 0 10px;
  background: linear-gradient(180deg, #343941, #2a2e35);
  box-shadow: inset 0 1px var(--steel-hi), inset 0 -1px var(--brass-dk), 0 1px var(--ink);
  color: var(--brass-hi);
}
.panel-head h2 {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 1px 1px 0 var(--ink);
}
.panel-body {
  padding: 16px;
}
.login-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.login-actions {
  margin-top: 2px;
}
.upper {
  text-transform: uppercase;
}
.login-status {
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--ink);
  box-shadow: inset 0 1px var(--steel-lo);
  color: var(--mute);
  display: flex;
  align-items: center;
  gap: 6px;
}
.login-status::before {
  content: '';
  width: 6px;
  height: 6px;
  background: var(--mute);
  box-shadow: 0 0 0 1px var(--ink);
}
.login-status.st-online::before {
  background: var(--teal);
}
.login-status.st-connecting::before {
  background: var(--amber);
  animation: blink 0.6s steps(2) infinite;
}

/* lobby */
.lobby-screen {
  background: linear-gradient(180deg, rgba(8, 8, 12, 0.35), rgba(8, 8, 12, 0.75) 40%);
}
.lobby-head {
  flex: none;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 36px;
  padding: 0 14px;
  margin: 0;
}
.lobby-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lobby-mark {
  width: 12px;
  height: 12px;
  background: var(--cyan);
  box-shadow: inset -2px -2px var(--cyan-dk), inset 2px 2px var(--cyan-hi), 0 0 0 1px var(--ink), 0 0 6px rgba(79, 227, 255, 0.5);
  transform: rotate(45deg) scale(0.8);
}
.lobby-who {
  display: flex;
  align-items: center;
  gap: 4px;
}
.lobby-main {
  flex: 1;
  min-height: 0;
  width: min(1180px, 100% - 32px);
  margin: 0 auto;
  padding: 26px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.lobby-tools {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}
.lobby-title {
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  color: var(--brass-hi);
  text-transform: uppercase;
  letter-spacing: 2px;
  text-shadow: 2px 2px 0 var(--ink);
}
.lobby-tools .search {
  width: 220px;
}
.world-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  grid-auto-rows: min-content;
  gap: 12px;
  padding: 2px 4px 8px 2px;
}
.world-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 10px 12px 10px;
  min-height: 176px;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, 0.4));
  cursor: default;
  transition: transform 80ms steps(2);
}
.world-card:hover {
  transform: translateY(-2px);
}
.world-card:focus-visible {
  outline: none;
  border-image-source: var(--img-frame-cyan);
}
.world-card.is-live {
  border-image-source: var(--img-frame);
}
.wc-top {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.wc-thumb {
  flex: none;
  padding: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--steel-lo);
}
.world-thumb {
  display: block;
  width: 80px;
  height: 80px;
  image-rendering: pixelated;
}
.wc-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 2px;
}
.wc-name {
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wc-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.chip.diff-casual {
  color: var(--teal);
}
.chip.diff-standard {
  color: var(--brass-hi);
}
.chip.diff-hard {
  color: var(--violet-hi);
}
.wc-live {
  display: flex;
  align-items: center;
  gap: 5px;
  padding-top: 3px;
}
.live-dot {
  width: 6px;
  height: 6px;
  background: var(--teal);
  box-shadow: 0 0 0 1px var(--ink), 0 0 6px var(--teal);
  animation: blink 1.2s steps(2) infinite;
}
.wc-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}
.wc-stat {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: 5px 6px 4px;
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), inset -1px -1px var(--steel-lo);
  color: var(--mute);
}
.wc-stat .g {
  margin-top: 2px;
}
.wc-stat-t {
  display: flex;
  flex-direction: column;
}
.wc-stat-l {
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.wc-stat-v {
  color: var(--text);
  font-weight: 700;
}
.wc-bar {
  height: 4px;
  background: #1c0f2c;
  box-shadow: 0 0 0 1px var(--ink);
  margin-top: -4px;
}
.wc-bar-fill {
  height: 100%;
  background: var(--teal);
  box-shadow: inset 0 1px #8affdc;
}
.wc-foot {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wc-crew {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 8px;
  min-width: 0;
}
.crew {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--mute);
}
.crew.on {
  color: var(--text);
}
.crew.you {
  color: var(--brass-hi);
}
.crew-dot {
  width: 5px;
  height: 5px;
  background: var(--steel);
  box-shadow: 0 0 0 1px var(--ink);
}
.crew.on .crew-dot {
  background: var(--teal);
}
.create-card {
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 2px dashed var(--steel);
  border-image: none;
  background: rgba(14, 15, 18, 0.55);
  color: var(--dim);
  filter: none;
  cursor: pointer;
}
.create-card:hover,
.create-card:focus-visible {
  border-color: var(--amber);
  color: var(--brass-hi);
  background: rgba(30, 22, 12, 0.6);
  outline: none;
}
.create-plus {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  color: var(--amber);
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--steel-lo);
  margin-bottom: 4px;
}
.lobby-foot {
  flex: none;
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
  text-shadow: 1px 1px 0 var(--ink);
}

/* create dialog */
.create-modal {
  width: 640px;
}
.create-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cf-row {
  display: flex;
  gap: 14px;
}
.cf-name {
  flex: 1;
}
.cf-seed {
  width: 200px;
}
.cf-seed .row {
  gap: 4px;
}
.diff-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.diff-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 8px 10px 10px;
  border: 2px solid transparent;
  border-image: var(--img-slot) 2 fill / 2px stretch;
  background: none;
  text-align: left;
  color: var(--dim);
  min-height: 132px;
}
.diff-card:hover {
  border-image-source: var(--img-slot-hover);
}
.diff-card.on {
  border-image-source: var(--img-slot-sel);
  color: var(--text);
}
.diff-card.on::after {
  content: '';
  position: absolute;
  left: -2px;
  right: -2px;
  top: -2px;
  height: 2px;
  background: var(--amber);
}
.dc-head {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
}
.dc-name {
  font-weight: 700;
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.diff-card.on .dc-name {
  color: var(--brass-hi);
}
.dc-tag {
  margin-left: auto;
  padding: 1px 4px 0;
  color: var(--ink);
  background: var(--teal);
  box-shadow: inset 0 1px #8affdc, 0 0 0 1px var(--ink);
}
.dc-pips {
  display: inline-flex;
  gap: 2px;
}
.dc-pip {
  width: 4px;
  height: 8px;
  background: var(--steel-lo);
  box-shadow: 0 0 0 1px var(--ink);
}
.dc-casual .dc-pip.on {
  background: var(--teal);
}
.dc-standard .dc-pip.on {
  background: var(--amber);
}
.dc-hard .dc-pip.on {
  background: var(--violet);
}
.dc-short {
  color: var(--brass);
}
.dc-hard .dc-short {
  color: var(--violet-hi);
}
.dc-casual .dc-short {
  color: var(--teal);
}
.dc-text {
  line-height: 15px;
  color: var(--dim);
}

/* loading */
.loading-screen {
  align-items: center;
  justify-content: center;
  background: rgba(6, 6, 10, 0.45);
}
.ld-panel {
  width: 520px;
  padding: 16px 18px 12px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  filter: drop-shadow(0 6px 0 rgba(0, 0, 0, 0.45));
}
.ld-top {
  display: flex;
  align-items: center;
  gap: 16px;
}
.ld-kicker {
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 2px;
}
.ld-world {
  font-size: 24px;
  line-height: 26px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 1px;
  text-shadow: 2px 2px 0 var(--ink);
}
.ld-sub {
  text-transform: capitalize;
}
.ld-crystal {
  position: relative;
  width: 36px;
  height: 36px;
  flex: none;
}
.ld-crystal i {
  position: absolute;
  left: 12px;
  top: 4px;
  width: 12px;
  height: 28px;
  background: var(--cyan);
  clip-path: polygon(50% 0, 100% 30%, 100% 70%, 50% 100%, 0 70%, 0 30%);
  box-shadow: inset 3px 0 var(--cyan-hi);
  animation: crystal 1.2s steps(6) infinite;
}
.ld-crystal i:nth-child(2) {
  left: 2px;
  top: 14px;
  width: 8px;
  height: 18px;
  background: var(--cyan-dk);
  animation-delay: -0.4s;
}
.ld-crystal i:nth-child(3) {
  left: 26px;
  top: 12px;
  width: 8px;
  height: 20px;
  background: #2fb8d6;
  animation-delay: -0.8s;
}
@keyframes crystal {
  50% {
    filter: brightness(1.6);
    transform: translateY(-2px);
  }
}
.ld-bar {
  height: 16px;
}
.ld-bar .pb-text {
  line-height: 16px;
}
.ld-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.ld-step {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--mute);
}
.ld-mark {
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--steel-lo);
  box-shadow: 0 0 0 1px var(--ink);
}
.ld-step.st-run {
  color: var(--text);
}
.ld-step.st-run .ld-mark {
  background: var(--cyan);
  animation: blink 0.5s steps(2) infinite;
}
.ld-step.st-done {
  color: var(--dim);
}
.ld-step.st-done .ld-mark {
  background: var(--teal);
}
.ld-step.st-fail {
  color: var(--red);
}
.ld-step.st-fail .ld-mark {
  background: var(--red);
}
.ld-detail {
  margin-left: auto;
  color: var(--mute);
}
.ld-tip {
  padding: 8px 10px;
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), inset -1px -1px var(--steel-lo);
}
.ld-tip-k {
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.ld-tip-text {
  margin-top: 4px;
  line-height: 16px;
  color: var(--text);
  min-height: 32px;
}

/* pause */
.pause-modal {
  width: 380px;
}
.pause {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pause-state {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--brass-hi);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.pause-state.is-live {
  color: var(--teal);
}
.pause-state .mute {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.pause-info {
  display: flex;
  gap: 14px;
}
.pause-crew {
  display: flex;
  gap: 10px;
}
.pause-buttons {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pause-buttons .btn {
  justify-content: flex-start;
}
.pause-buttons .btn-label {
  flex: 1;
  text-align: left;
}
.pause-foot {
  line-height: 15px;
}

/* how to play */
.howto-modal {
  width: 560px;
}
.howto-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.howto-steps li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.howto-steps .g2 {
  color: var(--amber);
  margin-top: 2px;
}
.howto-n {
  width: 16px;
  color: var(--mute);
  text-align: right;
}
.howto-steps p {
  line-height: 15px;
}
.howto-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px 10px;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--ink);
  box-shadow: inset 0 1px var(--steel-lo);
}
.howto-key {
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--dim);
}

/* ============================================================ 6 HUD */

#hud {
  pointer-events: none;
  text-shadow: 1px 1px 0 var(--ink);
}
/* full-screen HUD layers must let world clicks through to the canvas (#hud > * is auto) */
#hud > .hud-edge,
#hud > .hud-topwrap {
  pointer-events: none;
}
#hud.hud-hidden > * {
  visibility: hidden;
}
#hud .plate,
#hud .frame,
#hud button,
#hud .slot,
#hud [data-tip] {
  pointer-events: auto;
}
.hud-topwrap {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 8px;
  height: 0;
  pointer-events: none;
}
.hud-world {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 8px 5px;
  min-width: 150px;
}
.hw-name {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--brass);
  letter-spacing: 1px;
}
.tb-crew {
  display: flex;
  flex-wrap: wrap;
  gap: 1px 8px;
}
.hw-meta {
  display: flex;
  align-items: center;
  gap: 4px;
}
.hw-sep {
  width: 6px;
}
.hud-top {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.hud-topbar {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 3px 4px;
  white-space: nowrap;
}
.tb-div {
  width: 1px;
  margin: 2px 6px;
  background: var(--ink);
  box-shadow: 1px 0 var(--steel-lo);
}
.tb-seg {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 4px;
}
.tb-col {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tb-k {
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.tb-v {
  color: var(--text);
  font-weight: 700;
}
.tb-unit {
  color: var(--mute);
  font-weight: 400;
}
.tb-trend {
  font-weight: 400;
}
.tb-day-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--brass-hi);
  background: #2a1e0c;
  box-shadow: inset 0 0 0 1px var(--brass-dk), 0 0 0 1px var(--ink);
}
.tb-day.is-night .tb-day-icon {
  color: var(--cyan-hi);
  background: #0c1a2a;
  box-shadow: inset 0 0 0 1px var(--cyan-dk), 0 0 0 1px var(--ink);
}
.tb-day-arc {
  width: 4px;
  align-self: stretch;
  margin: 2px 0;
  background: var(--well);
  box-shadow: 0 0 0 1px var(--ink);
  display: none;
}
.tb-day-fill {
  height: 100%;
}
.tb-wave {
  gap: 10px;
  padding: 0 6px;
}
.wave-main {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  min-width: 128px;
}
.wave-head {
  grid-column: 1;
  display: flex;
  gap: 6px;
  align-items: center;
  color: var(--violet-hi);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.wave-major {
  color: var(--ink);
  background: var(--violet-hi);
  padding: 0 3px;
  font-weight: 700;
  text-shadow: none;
}
.wave-major:empty {
  display: none;
}
.wave-time {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-size: 24px;
  line-height: 24px;
  font-weight: 700;
  color: var(--text);
  text-shadow: 2px 2px 0 var(--ink);
  font-variant-numeric: tabular-nums;
  text-align: right;
  min-width: 60px;
}
.wave-bar {
  grid-column: 1;
  height: 4px;
  background: #1c0f2c;
  box-shadow: 0 0 0 1px var(--ink);
}
.wave-fill {
  height: 100%;
  background: var(--violet);
  box-shadow: inset 0 1px var(--violet-hi);
}
.tb-wave.soon .wave-time {
  color: #ff9a8a;
  animation: blink 0.8s steps(2) infinite;
}
.tb-wave.soon .wave-fill {
  background: var(--magenta);
}
.tb-wave.active .wave-time {
  color: var(--violet-hi);
  font-size: 12px;
  line-height: 14px;
}
.wave-side {
  display: flex;
  align-items: center;
  gap: 8px;
}
.wave-comp-slot {
  display: flex;
  align-items: center;
  min-width: 170px;
}
.wave-comp-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 4px 2px 6px;
  background: rgba(28, 15, 44, 0.8);
  box-shadow: inset 0 0 0 1px var(--violet-dk), 0 0 0 1px var(--ink);
}
.wave-comp {
  display: flex;
  gap: 6px;
}
.wave-unit {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  color: var(--violet-hi);
}
.wave-comp-slot[hidden],
.wave-comp-wrap[hidden] {
  display: none;
}
.wave-compass {
  width: 24px;
  height: 24px;
  image-rendering: pixelated;
}
.tb-wave .btn-cyan {
  height: 22px;
}
.evo-bar {
  position: relative;
  width: 110px;
  height: 6px;
  background: #1c0f2c;
  box-shadow: 0 0 0 1px var(--ink);
}
.evo-peak {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--violet-dk);
  opacity: 0.55;
}
.evo-fill {
  position: relative;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--violet) 0 3px, var(--violet-dk) 3px 4px);
  box-shadow: inset 0 1px var(--violet-hi);
}
.evo-mark {
  position: absolute;
  top: -3px;
  width: 1px;
  height: 12px;
  background: var(--violet-hi);
  box-shadow: 0 0 0 1px var(--ink);
}
.tb-resist {
  gap: 4px;
  padding-left: 8px;
}
.rchip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 1px 4px 1px;
  background: #1f0f30;
  color: var(--dim);
  box-shadow: inset 0 0 0 1px var(--violet-dk), 0 0 0 1px var(--ink);
  line-height: 12px;
}
.rchip b {
  color: #ff9ad6;
}
.rchip.dmg-kinetic span {
  color: var(--brass);
}
.rchip.dmg-explosive span {
  color: #ff7a3a;
}
.rchip.dmg-thermal span {
  color: #ff4a2a;
}
.rchip.dmg-arc span {
  color: #7ab8ff;
}
.rchip.dmg-lumen span {
  color: var(--cyan);
}
.hud-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 10px 2px;
  border: 2px solid transparent;
  border-image: var(--img-tip) 2 fill / 2px stretch;
  pointer-events: auto;
}
.hud-banner.ev-aurora,
.hud-banner.ev-victory {
  color: var(--cyan);
}
.hud-banner.ev-endless {
  color: var(--violet-hi);
}
.hud-banner.ev-meteor,
.hud-banner.ev-supply {
  color: var(--brass-hi);
}
.hud-banner.ev-migration {
  color: var(--magenta);
}
.hud-banner .g {
  color: currentColor;
}

/* minimap */
.hud-minimap {
  position: absolute;
  right: 8px;
  top: 8px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  pointer-events: none;
}
.mm-box {
  padding: 0;
  pointer-events: auto;
}
.mm-frame {
  position: relative;
  width: 176px;
  height: 176px;
  background: var(--ink);
}
.hud-minimap.big .mm-frame {
  width: 264px;
  height: 264px;
}
.mm-canvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  cursor: crosshair;
}
.mm-glass {
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 1px 1px rgba(255, 255, 255, 0.08), inset 0 0 0 1px var(--ink);
  background: var(--img-scan);
  opacity: 0.6;
}
.mm-n {
  position: absolute;
  top: 2px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--brass-hi);
  font-weight: 700;
  pointer-events: none;
}
.mm-foot {
  display: flex;
  align-items: center;
  height: 15px;
  padding: 1px 4px 0;
  background: var(--face);
  box-shadow: inset 0 1px var(--ink);
}
.ov-row {
  display: flex;
  justify-content: space-between;
  padding: 2px 3px;
  pointer-events: auto;
}
.ov-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 20px;
  border: 0;
  padding: 0;
  background: var(--well);
  color: var(--mute);
  box-shadow: inset 1px 1px var(--ink), inset -1px -1px var(--steel-lo);
}
.ov-btn:hover {
  color: var(--brass-hi);
}
.ov-btn.on {
  color: var(--ink);
  background: var(--teal);
  box-shadow: inset 0 1px #8affdc, inset 0 -1px var(--teal-dk), 0 0 0 1px var(--ink);
}

/* edge arrows toward wave origins (above the hint card, which sits right of the log column where the left arrows
   land) */
.hud-edge {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
}
.edge-arrow {
  position: absolute;
  width: 0;
  height: 0;
}
.edge-chev {
  position: absolute;
  left: -8px;
  top: -8px;
  width: 16px;
  height: 16px;
  background: var(--violet-hi);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 25% 50%);
  filter: drop-shadow(1px 1px 0 var(--ink));
  animation: edge-pulse 1s steps(2) infinite;
}
.edge-arrow.soon .edge-chev {
  background: var(--magenta);
  animation-duration: 0.4s;
}
@keyframes edge-pulse {
  50% {
    opacity: 0.55;
  }
}
.edge-label {
  position: absolute;
  white-space: nowrap;
  padding: 1px 4px 0;
  background: rgba(14, 10, 20, 0.85);
  box-shadow: 0 0 0 1px var(--violet-dk);
}
.edge-label.lbl-left {
  right: 14px;
  top: -7px;
}
.edge-label.lbl-right {
  left: 14px;
  top: -7px;
}
.edge-label.lbl-up {
  bottom: 14px;
  left: -40px;
}
.edge-label.lbl-down {
  top: 14px;
  left: -40px;
}

/* left column: log + research */
.hud-side {
  position: absolute;
  left: 8px;
  top: 86px;
  width: 236px;
  /* never below the screen edge: with three side objectives the research block (and its Show me) fell off at 720 px */
  max-height: calc(100% - 94px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.hud-log {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 0 1 auto;
}
.hud-side > .hud-research {
  flex: none;
}
.hud-log .log-body {
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
}
.log-head {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
  text-shadow: 1px 1px 0 var(--ink);
}
.log-head:hover {
  color: var(--brass-hi);
}
.log-body {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px 8px 8px;
}
.hud-log.collapsed .log-body {
  display: none;
}
.obj-kicker {
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.obj-main {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.obj-title {
  color: var(--text);
  font-weight: 700;
}
.obj-text {
  color: var(--dim);
  line-height: 14px;
}
.obj-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.obj-steps li {
  display: flex;
  gap: 5px;
  align-items: center;
  color: var(--text);
}
.obj-steps li .g {
  color: var(--amber);
}
.obj-steps li.done {
  color: var(--mute);
  text-decoration: line-through;
}
.obj-steps li.done .g {
  color: var(--teal);
}
.obj-foot {
  display: flex;
  align-items: center;
  gap: 6px;
}
.obj-reward {
  display: flex;
  align-items: center;
  gap: 5px;
}
.obj-ri {
  display: inline-flex;
  align-items: center;
  gap: 1px;
}
.obj-side {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0 -4px;
  padding: 3px 4px 4px;
  border-radius: 2px;
  cursor: pointer;
}
.obj-side + .obj-side {
  border-top: 1px solid var(--ink);
  box-shadow: inset 0 1px var(--steel-lo);
}
.obj-side:hover {
  background: rgba(240, 168, 60, 0.07);
}
.obj-side-head {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 16px;
}
.obj-side-title {
  color: var(--text);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.obj-side:hover .obj-side-title {
  color: var(--brass-hi);
}
.obj-side-rw {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: none;
  color: var(--dim);
}
.obj-rd > .g {
  color: var(--cyan);
}
.obj-side-task {
  color: var(--dim);
  line-height: 13px;
}
.obj-side-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}
.obj-side-bar .pbar {
  flex: 1;
  min-width: 36px;
}
.obj-side-n {
  color: var(--text);
  white-space: nowrap;
}
.obj-side-bar > .g {
  color: var(--mute);
}
.obj-side:hover .obj-side-bar > .g {
  color: var(--brass-hi);
}
.obj-opt {
  text-transform: none;
  letter-spacing: 0;
}
.hud-research {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 6px 8px 7px;
  cursor: pointer;
}
.hud-research:hover {
  border-image-source: var(--img-plate-solid);
}
.rs-top {
  display: flex;
  align-items: center;
  gap: 7px;
}
.rs-icon {
  padding: 2px;
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--cyan-dk);
}
.rs-text {
  flex: 1;
  min-width: 0;
}
.rs-k {
  color: var(--cyan);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.rs-name {
  font-weight: 700;
}
.rs-queue {
  display: flex;
  gap: 4px;
}
.rs-q {
  position: relative;
  padding: 1px;
  background: var(--well);
  box-shadow: 0 0 0 1px var(--steel-lo);
}
.rs-qn {
  position: absolute;
  right: -2px;
  bottom: -4px;
  color: var(--mute);
}

/* bottom: quickbar + crafting */
.hud-bottom {
  position: absolute;
  left: 50%;
  bottom: 8px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}
.qb-sel {
  padding: 1px 8px 0;
  color: var(--brass-hi);
  background: rgba(10, 11, 14, 0.75);
  box-shadow: 0 0 0 1px var(--ink);
}
.qb-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  gap: 6px;
}
.qb-bar {
  display: flex;
  align-items: stretch;
  gap: 4px;
  padding: 1px;
  pointer-events: auto;
}
.qb-rows {
  display: flex;
  flex-direction: column;
}
.qb-row {
  display: flex;
}
.qb-slot.qb-none > .icon {
  opacity: 0.35;
  filter: grayscale(1);
}
.qb-slot.qb-none .slot-n {
  color: var(--red);
}
/* the 4th row before the Backpack research */
.qb-slot.locked {
  opacity: 0.7;
}
.qb-slot .qb-lock {
  position: absolute;
  color: var(--steel-hi, var(--mute));
  opacity: 0.8;
  pointer-events: none;
}
.qb-pager {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  width: 18px;
  padding: 2px 0;
}
.qb-pg {
  width: 16px;
  height: 18px;
  border: 0;
  padding: 0;
  background: var(--face2);
  color: var(--dim);
  box-shadow: 0 0 0 1px var(--ink);
}
.qb-pg:hover {
  color: var(--brass-hi);
}
.qb-pn {
  color: var(--brass-hi);
  font-weight: 700;
}
/* hangs left of the quickbar: the bar must not jump sideways when the queue appears / empties (misclicks); on
   narrow screens there is no room left of it (HUD left column): back in the flow there */
@media (max-width: 1180px) {
  .qb-wrap > .hud-craft {
    position: static;
  }
}
.hud-craft {
  position: absolute;
  right: calc(100% + 6px);
  bottom: 0;
  width: max-content;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 4px 5px 5px;
  background: rgba(14, 15, 18, 0.85);
  box-shadow: inset 0 0 0 1px var(--steel-lo), 0 0 0 1px var(--ink);
  pointer-events: auto;
}
.cq-head {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cq-items {
  display: flex;
  gap: 3px;
  align-items: center;
}
.cq-item {
  position: relative;
  padding: 2px;
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--steel-lo);
  cursor: pointer;
}
.cq-item.cq-active {
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--amber);
}
.cq-item.cq-sub {
  opacity: 0.75;
}
.cq-item:hover {
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--red);
}
.cq-prog {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2px;
  background: var(--amber);
}

/* right: context panel */
.hud-context {
  position: absolute;
  right: 8px;
  top: 246px;
  width: 248px;
  /* stays above the alerts strip (at most 5 rows + the muted chip, ~140 px) */
  max-height: calc(100% - 246px - 148px);
  overflow-y: auto;
  padding: 6px 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  pointer-events: auto;
}
.hud-minimap.big ~ .hud-context {
  top: 334px;
  max-height: calc(100% - 334px - 148px);
}
.cx-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cx-icon {
  padding: 2px;
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--steel-lo);
}
.cx-titles {
  flex: 1;
  min-width: 0;
}
.cx-name {
  color: var(--brass-hi);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cx-tools {
  display: flex;
  align-self: flex-start;
}
.cx-hpbar {
  height: 10px;
}
.cx-hpbar .pb-text {
  line-height: 10px;
}
.cx-status {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  padding: 4px 6px 3px;
  line-height: 14px;
  background: var(--well);
  box-shadow: inset 2px 0 var(--teal);
}
.cx-status .g {
  margin-top: 2px;
  color: var(--teal);
}
.cx-status.st-warn {
  box-shadow: inset 2px 0 var(--amber);
  color: var(--brass-hi);
}
.cx-status.st-warn .g {
  color: var(--amber);
}
.cx-status.st-bad {
  box-shadow: inset 2px 0 var(--red);
  color: #ffb0a0;
}
.cx-status.st-bad .g {
  color: var(--red);
}
.cx-vet {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 8px;
  align-items: center;
}
.cx-vet .pbar {
  grid-column: 1 / span 2;
}
.vet-chevrons {
  display: flex;
  gap: 1px;
}
.vet-chev {
  width: 7px;
  height: 9px;
  background: var(--steel-lo);
  clip-path: polygon(0 45%, 50% 0, 100% 45%, 100% 100%, 50% 55%, 0 100%);
}
.vet-chev.on {
  background: var(--brass-hi);
}
.cx-sec {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cx-k {
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.cx-ammo {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr) 56px auto;
  gap: 6px;
  align-items: center;
}
.cx-ammo.active .cx-ammo-name {
  color: var(--brass-hi);
}
.cx-ammo.empty {
  color: var(--mute);
}
.cx-ammo.empty .icon {
  opacity: 0.4;
}
.cx-ammo-n {
  min-width: 22px;
  text-align: right;
}
.cx-ammo-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cx-dep-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 6px;
  align-items: center;
}
.cx-dep-n {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.cx-dep-eta {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--text);
}
.cx-dep-eta .g {
  color: var(--amber);
}
.cx-dep-eta.bad,
.cx-dep-eta.bad .g {
  color: var(--bad);
}
.cx-note {
  display: flex;
  align-items: center;
}
.cx-io {
  display: grid;
  grid-template-columns: 1fr 14px 1fr;
  align-items: start;
  gap: 6px;
}
.cx-io.single {
  grid-template-columns: 1fr;
}
.cx-io .cx-arrow {
  align-self: center;
}
.cx-iocol {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.cx-ioitem {
  display: flex;
  gap: 5px;
  align-items: center;
}
.cx-ioslot {
  position: relative;
  padding: 2px;
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--steel-lo);
}
.cx-ioitem.missing .cx-ioslot {
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--red);
  animation: blink 1s steps(2) infinite;
}
.cx-iotext {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cx-iotext > span:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cx-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  color: var(--mute);
}
.cx-craft {
  width: 4px;
  height: 18px;
  background: var(--well);
  box-shadow: 0 0 0 1px var(--ink);
  display: flex;
  align-items: flex-end;
}
.cx-craft div {
  width: 100%;
  background: var(--amber);
}
.cx-power {
  display: flex;
  align-items: center;
  gap: 5px;
}
.cx-power .g {
  color: var(--amber);
}
.cx-stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  padding-top: 5px;
  border-top: 1px solid var(--ink);
  box-shadow: inset 0 1px var(--steel-lo);
}
.cx-stat {
  display: flex;
  justify-content: space-between;
  gap: 4px;
}
.cx-stat > :first-child:not(:last-child) {
  white-space: nowrap;
}
.cx-stat > :last-child:not(:first-child) {
  text-align: right;
}
.cx-foot {
  display: flex;
  align-items: center;
  gap: 3px;
}

/* alerts */
.hud-alerts {
  position: absolute;
  right: 8px;
  bottom: 8px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  pointer-events: none;
  max-width: 300px;
}
.alert {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 6px 0 0;
  border: 0;
  background: rgba(14, 15, 18, 0.9);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--steel-lo), 0 0 0 1px var(--ink);
  text-shadow: 1px 1px 0 var(--ink);
  pointer-events: auto;
}
.alert:hover {
  background: rgba(30, 32, 38, 0.95);
}
.al-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--ink);
  background: var(--steel);
  text-shadow: none;
}
.al-bad .al-icon {
  background: var(--red);
}
.al-gloam .al-icon {
  background: var(--violet);
  color: #fff;
}
.al-warn .al-icon {
  background: var(--amber);
}
.al-info .al-icon {
  background: var(--steel-hi);
}
.al-cyan .al-icon {
  background: var(--cyan);
}
.al-text {
  white-space: nowrap;
}
.al-count {
  color: var(--brass-hi);
  font-weight: 700;
}
.al-age {
  color: var(--mute);
  min-width: 20px;
  text-align: right;
}
.alert.fresh {
  animation: alert-in 300ms steps(3);
}
@keyframes alert-in {
  from {
    transform: translateX(12px);
    opacity: 0;
  }
}
.al-muted {
  padding: 0 6px;
  color: var(--mute);
}

/* ============================================================ 7 window contents */

.win-sub {
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.vrule {
  width: 1px;
  align-self: stretch;
  background: var(--ink);
  box-shadow: 1px 0 var(--steel-lo);
}
.slot.dimmed > .icon {
  opacity: 0.2;
}
.slot.dimmed .slot-n {
  opacity: 0.3;
}

/* item chip + recipe row */
.ichip {
  position: relative;
  display: inline-flex;
  padding: 2px;
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--steel-lo);
  cursor: pointer;
}
.ichip:hover {
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--amber);
}
.ichip.focus {
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--brass-hi);
}
.ichip-n {
  position: absolute;
  right: 0;
  bottom: -2px;
  color: #fff;
  text-shadow: 1px 0 var(--ink), -1px 0 var(--ink), 0 1px var(--ink), 0 -1px var(--ink);
}
.rr {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  background: rgba(14, 15, 18, 0.7);
  box-shadow: inset 0 0 0 1px var(--steel-lo);
}
.rr-alt {
  box-shadow: inset 0 0 0 1px var(--cyan-dk);
}
.rr-main {
  display: flex;
  align-items: center;
  gap: 10px;
}
.rr-side {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
}
.rr-arrow {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  color: var(--brass);
  min-width: 34px;
}
.rr-machines {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  color: var(--dim);
}
.rr-m {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.rr-m .g {
  color: var(--brass);
}
.rr-rate {
  color: var(--good);
}

/* settings */
.win-settings .win-body {
  padding: 0;
}
.set-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}
.set-tabs {
  flex: none;
  width: 158px;
  padding: 8px 0 8px 6px;
  gap: 2px;
  background: rgba(0, 0, 0, 0.2);
}
.set-tabs .tab,
.set-tabs .tab:hover,
.set-tabs .tab.on {
  height: 26px;
  padding: 1px 10px 0;
  border: 0;
  border-image: none;
  background: transparent;
}
.set-tabs .tab:hover {
  background: rgba(255, 255, 255, 0.04);
}
.set-tabs .tab.on {
  margin-right: -1px;
  color: var(--brass-hi);
  background: var(--face);
  box-shadow: inset 2px 0 var(--amber), 0 -1px var(--ink), 0 1px var(--ink);
}
.set-content {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 12px 16px 16px;
}
.set-page {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.set-page .section {
  gap: 10px;
}
.keys-tools {
  margin-bottom: -6px;
}
.keys-tools .search {
  width: 240px;
}
.keys-conflicts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 6px;
  padding: 6px 8px;
  color: #ffb0a0;
  background: #2a100c;
  box-shadow: inset 0 0 0 1px #7a2a1a;
}
.keys-list {
  display: flex;
  flex-direction: column;
}
.keys-group {
  margin: 10px 0 4px;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.keys-group:first-child {
  margin-top: 0;
}
.keys-row {
  display: grid;
  grid-template-columns: 1fr 140px 140px 22px;
  gap: 6px;
  align-items: center;
  min-height: 24px;
  padding: 1px 4px;
}
.keys-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}
.keys-row:hover {
  background: rgba(240, 168, 60, 0.06);
}
.keys-row.conflict .keys-label {
  color: #ffb0a0;
}
.keys-label {
  color: var(--text);
}
.keybtn {
  height: 20px;
  padding: 1px 6px 0;
  border: 0;
  background: var(--deep);
  color: var(--brass-hi);
  box-shadow: inset 0 0 0 1px var(--brass-dk), inset 0 -2px 0 0 #2a1c0c;
  text-align: center;
}
.keybtn:hover:not(:disabled) {
  background: #241a0c;
  box-shadow: inset 0 0 0 1px var(--amber), inset 0 -2px 0 0 #3a2410;
}
.keybtn:disabled {
  color: var(--mute);
  box-shadow: inset 0 0 0 1px var(--steel-lo);
  cursor: default;
}
.keybtn.conflict {
  color: #ffb0a0;
  box-shadow: inset 0 0 0 1px var(--red), inset 0 -2px 0 0 #3a120c;
}
.keybtn.capturing {
  color: var(--ink);
  background: var(--amber);
  animation: blink 0.6s steps(2) infinite;
}
.keys-help {
  line-height: 18px;
}
.cb-preview {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  padding: 10px;
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), inset -1px -1px var(--steel-lo);
}
.cb-sw {
  display: flex;
  align-items: center;
  gap: 8px;
}
.cb-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.cb-territory {
  background: var(--cb-territory, var(--teal));
}
.cb-gloam {
  background: var(--cb-gloam, var(--violet));
  color: #fff;
}
.cb-bad {
  background: var(--cb-bad, var(--red));
}
.cb-good {
  background: var(--cb-good, var(--green));
}
.cb-lumen {
  background: var(--cb-lumen, var(--cyan));
}
.cb-warn {
  background: var(--cb-warn, var(--amber));
}

/* inventory */
.inv-layout {
  display: flex;
  gap: 12px;
  min-height: 0;
}
.inv-left {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.inv-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.inv-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}
.inv-toolbar .search {
  width: 120px;
  min-width: 0;
}
.inv-equip {
  display: flex;
  gap: 10px;
}
.inv-eq-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.trash-slot {
  position: relative;
}
.trash-g {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: -5px 0 0 -5px;
  color: var(--mute);
}
.inv-help {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: auto;
}
.craft-tabs {
  padding: 0;
}
.craft-tabs .tab {
  padding: 3px 6px 0;
  height: 34px;
}
.craft-tabs .tab.on {
  height: 36px;
}
.craft-scroll {
  flex: 1;
  min-height: 200px;
  max-height: 290px;
  overflow-y: auto;
  padding: 6px;
  background: var(--face);
  box-shadow: inset 0 0 0 1px var(--ink);
  margin-top: -6px;
}
.craft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 40px);
  gap: 2px;
}
.craft-grid > .list-empty,
.craft-more {
  grid-column: 1 / -1;
}
.craft-more {
  padding: 6px 2px 2px;
  font-size: 12px;
}
.craft-slot {
  cursor: pointer;
}
.craft-slot.cannot > .icon {
  opacity: 0.4;
  filter: saturate(0.3);
}
.craft-slot.cannot .slot-n {
  display: none;
}
.craft-slot:focus-visible {
  outline: none;
  border-image-source: var(--img-slot-sel);
}
.craft-cat {
  color: var(--dim);
}

/* research */
.win-research .win-body {
  padding: 0;
}
.rs-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}
.rs-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.rs-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--ink);
  box-shadow: 0 1px var(--steel-lo);
}
.rs-tools .search {
  width: 220px;
}
.rs-packs {
  display: flex;
  gap: 2px;
}
.pack-btn {
  width: 22px;
  height: 22px;
  padding: 2px;
  border: 0;
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), inset -1px -1px var(--steel-lo);
  opacity: 0.6;
}
.pack-btn:hover {
  opacity: 1;
}
.pack-btn.on {
  opacity: 1;
  box-shadow: inset 0 0 0 1px var(--amber), 0 0 0 1px var(--ink);
}
.rs-viewport {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  cursor: grab;
  background-color: #0c0d10;
  background-image: linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 16px 16px;
  box-shadow: inset 0 0 0 1px var(--ink);
}
.rs-viewport.panning {
  cursor: grabbing;
}
.rs-viewport:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 1px var(--amber-dk);
}
.rs-inner {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
}
.rs-edges {
  position: absolute;
  left: 0;
  top: 0;
  image-rendering: pixelated;
}
.tnode {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 180px;
  height: 40px;
  padding: 0 6px 0 3px;
  border: 2px solid transparent;
  border-image: var(--img-slot) 2 fill / 2px stretch;
  background: none;
  text-align: left;
  color: var(--dim);
}
.tnode:hover {
  border-image-source: var(--img-slot-hover);
  color: var(--text);
}
.tn-icon {
  flex: none;
  padding: 2px;
  background: rgba(0, 0, 0, 0.35);
}
.tn-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tn-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tn-packs {
  display: flex;
  align-items: center;
  gap: 2px;
}
.tn-pack {
  width: 5px;
  height: 5px;
  box-shadow: 0 0 0 1px var(--ink);
}
.tn-count {
  margin-left: 3px;
  color: var(--mute);
}
.tn-q {
  position: absolute;
  right: -5px;
  top: -6px;
  min-width: 13px;
  height: 13px;
  padding: 0 2px;
  text-align: center;
  line-height: 13px;
  color: var(--ink);
  background: var(--amber);
  box-shadow: 0 0 0 1px var(--ink);
  font-weight: 700;
}
.tn-bar {
  position: absolute;
  left: 2px;
  right: 2px;
  bottom: 1px;
  height: 2px;
  background: var(--well);
}
.tn-bar div {
  height: 100%;
  background: var(--cyan);
}
.tnode.st-done {
  border-image-source: var(--img-slot);
  color: #8fe9cf;
  background: linear-gradient(90deg, rgba(47, 199, 160, 0.28), rgba(47, 199, 160, 0.12));
  box-shadow: inset 0 0 0 1px rgba(47, 199, 160, 0.55);
}
.tnode.st-done .tn-icon {
  box-shadow: inset 0 0 0 1px var(--teal);
}
.tn-donetag,
.tn-check {
  display: none;
}
.tnode.st-done .tn-packs {
  display: none;
}
.tnode.st-done .tn-donetag {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--teal);
  font-size: 0.9em;
}
.tnode.st-done .tn-check {
  display: block;
  position: absolute;
  left: -5px;
  top: -6px;
  width: 13px;
  height: 13px;
  line-height: 13px;
  text-align: center;
  color: var(--ink);
  background: var(--teal);
  box-shadow: 0 0 0 1px var(--ink);
}
.tnode.st-done .tn-check .g {
  transform: scale(0.75);
}
.tnode.st-avail {
  color: var(--text);
}
.tnode.st-avail .tn-name {
  color: var(--brass-hi);
}
.tnode.st-current {
  color: var(--cyan);
  filter: drop-shadow(0 0 3px rgba(79, 227, 255, 0.45));
}
.tnode.st-locked {
  border-image-source: var(--img-slot-locked);
  color: var(--mute);
}
.tnode.st-locked .icon {
  filter: grayscale(0.8) brightness(0.7);
}
.tnode.sel {
  border-image-source: var(--img-slot-sel);
  z-index: 2;
}
.tnode.dim {
  opacity: 0.22;
}
.rs-legend {
  position: absolute;
  left: 8px;
  bottom: 6px;
  z-index: 3;
  padding: 3px 8px 3px 2px;
  background: rgba(10, 9, 14, 0.88);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06);
  display: flex;
  align-items: center;
  gap: 4px;
  pointer-events: none;
  text-shadow: 1px 1px 0 var(--ink);
}
.lg {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 6px;
  box-shadow: 0 0 0 1px var(--ink);
}
.lg-done {
  background: var(--teal);
}
.lg-avail {
  background: var(--amber);
}
.lg-cur {
  background: var(--cyan);
}
.lg-locked {
  background: var(--steel);
}
.rs-help {
  display: flex;
  align-items: center;
  gap: 3px;
  padding: 5px 8px;
  border-top: 1px solid var(--ink);
}
.rs-side {
  flex: none;
  width: 280px;
  display: flex;
  flex-direction: column;
  border-left: 1px solid var(--ink);
  box-shadow: inset 1px 0 var(--steel-lo);
  background: rgba(0, 0, 0, 0.15);
}
.rs-detail {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rd-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rd-head > div:nth-child(2) {
  flex: 1;
  min-width: 0;
}
.rd-icon {
  padding: 3px;
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--steel-lo);
}
.rd-name {
  color: var(--brass-hi);
  font-weight: 700;
}
.rd-desc {
  color: var(--dim);
  line-height: 15px;
}
.rd-sec {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.rd-cost,
.rd-unlocks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.rd-pre {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rd-prereq {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 20px;
  border: 0;
  padding: 0 4px;
  background: none;
  color: var(--red);
  text-align: left;
}
.rd-prereq.done {
  color: var(--teal);
}
.rd-prereq:hover {
  background: rgba(255, 255, 255, 0.04);
}
.rd-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rs-queue-list {
  flex: none;
  max-height: 240px;
  overflow-y: auto;
  padding: 8px 10px;
  border-top: 1px solid var(--ink);
  box-shadow: inset 0 1px var(--steel-lo);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.rq-head {
  display: flex;
  align-items: center;
  min-height: 20px;
}
.rq-row {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 2px 0 4px;
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--steel-lo);
  cursor: grab;
}
.rq-row.current {
  box-shadow: inset 0 0 0 1px var(--cyan-dk), inset 2px 0 var(--cyan);
}
.rq-row.dragging {
  opacity: 0.4;
}
.rq-n {
  width: 12px;
  color: var(--mute);
  text-align: right;
}
.rq-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rq-row .ibtn {
  width: 16px;
  height: 16px;
}
.rq-empty {
  padding: 6px 0;
}
.rq-bank {
  padding: 4px 0 0;
  line-height: 14px;
}

/* codex */
.win-codex .win-body {
  padding: 0;
}
.codex-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}
.codex-left {
  flex: none;
  width: 270px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-right: 1px solid var(--ink);
  box-shadow: 1px 0 var(--steel-lo);
}
.codex-list {
  flex: 1;
  min-height: 0;
  margin-top: -6px;
}
.cl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.cl-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cl-sub {
  flex: none;
}
.cx-tabs {
  padding: 0;
}
.codex-page {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 14px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cp-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cp-icon {
  padding: 6px;
  background: radial-gradient(circle, #23262d, #0e0f12 70%);
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--brass-dk), 0 0 0 2px var(--ink);
}
.cp-icon.gloam {
  background: radial-gradient(circle, #2c1446, #0e0a14 70%);
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--violet-dk), 0 0 0 2px var(--ink);
}
.cp-titles {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-name {
  font-size: 24px;
  line-height: 26px;
  font-weight: 700;
  color: var(--brass-hi);
  text-shadow: 2px 2px 0 var(--ink);
}
.cp-name.violet {
  color: var(--violet-hi);
}
.cp-tags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}
.cp-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-self: flex-start;
}
.cp-desc {
  color: var(--text);
  line-height: 16px;
  max-width: 560px;
}
.cp-sec {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cp-none {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
}
.cp-uses {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 4px;
}
.cp-use {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 6px 0 3px;
  border: 0;
  background: rgba(14, 15, 18, 0.7);
  box-shadow: inset 0 0 0 1px var(--steel-lo);
  color: var(--text);
  text-align: left;
}
.cp-use:hover {
  box-shadow: inset 0 0 0 1px var(--amber);
  color: var(--brass-hi);
}
.cp-use span:nth-child(2) {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cp-stats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 420px;
}
.cp-resist {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 420px;
}
.cr-row {
  display: grid;
  grid-template-columns: 80px 1fr 44px;
  gap: 8px;
  align-items: center;
}
.cr-bar {
  height: 8px;
  background: var(--well);
  box-shadow: 0 0 0 1px var(--ink);
}
.cr-fill {
  height: 100%;
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.35);
}

/* stats */
.win-stats .win-body {
  gap: 8px;
}
.st-tools {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.st-tools .tabs {
  padding: 0;
  box-shadow: none;
}
.st-tools .search {
  width: 200px;
}
.st-layout {
  flex: 1;
  min-height: 0;
  display: flex;
  gap: 10px;
}
.st-left {
  flex: none;
  width: 390px;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.st-head {
  display: flex;
  gap: 6px;
  padding: 0 6px 4px 28px;
  color: var(--mute);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.st-hp,
.st-hc,
.st-hn {
  width: 44px;
  text-align: right;
}
.st-hn {
  width: 64px;
}
.st-list {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  border: 2px solid transparent;
  border-image: var(--img-inset) 2 fill / 2px stretch;
}
.st-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  height: 24px;
  padding: 0 6px 0 4px;
  border: 0;
  background: none;
  color: var(--text);
  text-align: left;
}
.st-row:nth-child(even) {
  background: rgba(255, 255, 255, 0.02);
}
.st-row:hover {
  background: rgba(240, 168, 60, 0.08);
}
.st-row.on {
  background: rgba(240, 168, 60, 0.14);
}
.st-swatch {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--steel-lo);
  box-shadow: 0 0 0 1px var(--ink);
}
.st-name {
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.spark {
  width: 60px;
  height: 16px;
  image-rendering: pixelated;
  background: rgba(0, 0, 0, 0.25);
}
.st-p,
.st-c {
  width: 44px;
  text-align: right;
}
.st-net {
  width: 64px;
  text-align: right;
}
.st-right {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.st-graph-wrap {
  flex: 1;
  min-height: 0;
  padding: 2px;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--steel-lo);
}
.st-graph {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  cursor: crosshair;
}
.st-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  min-height: 14px;
}
.lg-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* blueprints */
.win-blueprints .win-body {
  padding: 0;
}
.bp-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}
.bp-left {
  flex: none;
  width: 170px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 6px;
  border-right: 1px solid var(--ink);
  box-shadow: 1px 0 var(--steel-lo);
}
.bp-folders {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bp-folder {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 6px;
  border: 0;
  background: none;
  color: var(--dim);
  text-align: left;
}
.bp-folder span:nth-child(2) {
  flex: 1;
}
.bp-folder:hover {
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
}
.bp-folder.on {
  background: rgba(240, 168, 60, 0.15);
  box-shadow: inset 2px 0 var(--amber);
  color: var(--brass-hi);
}
.bp-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}
.bp-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.bp-tools .search {
  width: 220px;
}
.bp-grid {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
  grid-auto-rows: min-content;
  gap: 6px;
  align-content: start;
}
.bp-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 6px 6px;
  border: 2px solid transparent;
  border-image: var(--img-slot) 2 fill / 2px stretch;
  background: none;
  color: var(--text);
  text-align: center;
}
.bp-card:hover {
  border-image-source: var(--img-slot-hover);
}
.bp-card.on {
  border-image-source: var(--img-slot-sel);
}
.bp-card.shared .bp-prev {
  box-shadow: inset 0 0 0 1px var(--cyan-dk);
}
.bp-prev {
  display: grid;
  grid-template-columns: repeat(2, 32px);
  gap: 2px;
  place-content: center;
  width: 76px;
  height: 76px;
  background: #13213a;
  background-image: linear-gradient(rgba(120, 170, 255, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(120, 170, 255, 0.12) 1px, transparent 1px);
  background-size: 8px 8px;
  box-shadow: inset 0 0 0 1px #2a4a7a;
}
.bp-prev.n1 {
  grid-template-columns: 48px;
}
.bp-name {
  line-height: 13px;
  max-width: 100%;
}
.bp-meta {
  font-size: 12px;
}
.bp-help {
  display: flex;
  align-items: center;
  gap: 3px;
}
.bp-side {
  flex: none;
  width: 270px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-left: 1px solid var(--ink);
  box-shadow: inset 1px 0 var(--steel-lo);
  background: rgba(0, 0, 0, 0.15);
  overflow-y: auto;
}
.bp-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 40px 10px;
  text-align: center;
  line-height: 15px;
}
.bp-side-head {
  display: flex;
  gap: 10px;
  align-items: center;
}
.bp-title {
  color: var(--brass-hi);
  font-weight: 700;
}
.bp-desc {
  color: var(--dim);
  line-height: 15px;
}
.bp-parts {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.bp-part {
  display: flex;
  align-items: center;
  gap: 6px;
}
.bp-note {
  line-height: 15px;
}
.bp-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
.bp-text {
  height: 120px;
  min-width: 460px;
  resize: none;
  white-space: pre-wrap;
  word-break: break-all;
  margin-top: 10px;
}

/* map */
.win-map .win-body {
  padding: 0;
}
.map-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}
.map-left,
.map-right {
  flex: none;
  width: 190px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
}
.map-left {
  border-right: 1px solid var(--ink);
  box-shadow: 1px 0 var(--steel-lo);
}
.map-right {
  width: 220px;
  border-left: 1px solid var(--ink);
  box-shadow: inset 1px 0 var(--steel-lo);
}
.map-layers {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}
.map-legend {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.lg-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--dim);
}
.map-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}
.map-tools {
  display: flex;
  align-items: center;
  gap: 8px;
}
.map-tools .search {
  flex: 1;
}
.map-frame {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  background: var(--ink);
  box-shadow: 0 0 0 1px var(--steel-lo), 0 0 0 2px var(--ink);
}
.map-canvas {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  cursor: crosshair;
  background: #0a0710;
}
.sc-twist {
  line-height: 1.35;
}
.sc-claim-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
}
.sc-ci {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}
.sc-hint {
  line-height: 1.35;
}
.map-find {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-height: 22px;
}
.map-find-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 22px;
  padding: 0 6px;
  color: var(--text);
  font: inherit;
  background: var(--face2);
  border: 0;
  box-shadow: 0 0 0 1px var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  cursor: pointer;
}
.map-find-chip:hover {
  background: var(--face3);
}
.map-find-chip.on {
  background: var(--brass-dk);
  box-shadow: 0 0 0 1px var(--brass), inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.map-find-chip.clear {
  color: var(--dim);
}
.map-help {
  display: flex;
  align-items: center;
  gap: 3px;
}
.map-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
}
.sc-name {
  font-weight: 700;
}
.sc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.sc-threat {
  display: flex;
  align-items: center;
  gap: 2px;
}
.sc-pip {
  width: 8px;
  height: 6px;
  background: var(--steel-lo);
  box-shadow: 0 0 0 1px var(--ink);
}
.sc-pip.on {
  background: var(--magenta);
}
.sc-res {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ============================================================ 8 accessibility */

/* Colour-blind palettes: overlay / alert / status colours (shapes stay the same). */
:root[data-cb='deutan'],
:root[data-cb='protan'] {
  --teal: #3a9ee8;
  --teal-dk: #1a4a80;
  --green: #3a9ee8;
  --good: #3a9ee8;
  --red: #f0a020;
  --bad: #f0a020;
  --magenta: #f0d040;
}
:root[data-cb='protan'] {
  --red: #ffd23a;
  --bad: #ffd23a;
}
:root[data-cb='tritan'] {
  --teal: #2ac0b8;
  --cyan: #e8e8f0;
  --cyan-hi: #ffffff;
  --violet: #e04c6a;
  --violet-hi: #ff8aa0;
  --amber: #f07a3a;
  --red: #ff3a6a;
  --bad: #ff3a6a;
}
:root[data-fx='minimal'] *,
:root[data-fx='minimal'] *::before,
:root[data-fx='minimal'] *::after {
  animation-duration: 0s !important;
  transition-duration: 0s !important;
}
@media (prefers-reduced-motion: reduce) {
  .title-hint,
  .live-dot,
  .edge-chev {
    animation: none;
  }
}

/* Lumen Spire stages in the context panel */
.sp-pips {
  display: flex;
  gap: 3px;
  margin: 2px 0 4px;
}
.sp-pip {
  flex: 1;
  height: 5px;
  background: var(--steel-lo);
  box-shadow: 0 0 0 1px var(--ink);
}
.sp-pip.done {
  background: var(--cyan);
}
.sp-pip.cur {
  background: linear-gradient(90deg, var(--cyan-dk), var(--cyan));
  animation: sp-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes sp-pulse {
  from { opacity: 0.55; }
  to { opacity: 1; }
}
.pb-fill.cyan {
  background: var(--cyan);
}

/* victory moment */
.victory-modal {
  width: min(640px, calc(100vw - 32px));
  overflow: hidden;
}
.victory-modal .modal-body {
  padding: 0;
}
.vic {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 28px 28px 18px;
  text-align: center;
  background: radial-gradient(ellipse at 50% 0%, rgba(79, 227, 255, 0.22), rgba(79, 227, 255, 0) 65%);
}
.vic > * {
  position: relative;
}
.vic-rays {
  position: absolute;
  left: 50%;
  top: 34px;
  width: 0;
  height: 0;
  animation: vic-spin 40s linear infinite;
  pointer-events: none;
}
.vic-rays i {
  position: absolute;
  left: -6px;
  top: -260px;
  width: 12px;
  height: 260px;
  transform-origin: 6px 260px;
  background: linear-gradient(to top, rgba(184, 246, 255, 0.28), rgba(184, 246, 255, 0));
}
@keyframes vic-spin {
  to { transform: rotate(360deg); }
}
.vic-spark {
  font-size: 32px;
  color: var(--cyan-hi);
  text-shadow: 0 0 12px var(--cyan), 0 0 28px var(--cyan);
  animation: vic-glow 1.6s ease-in-out infinite alternate;
}
.vic-spark .g {
  width: 32px;
  height: 32px;
}
@keyframes vic-glow {
  from { opacity: 0.7; transform: scale(0.94); }
  to { opacity: 1; transform: scale(1.06); }
}
.vic-kicker {
  color: var(--cyan);
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.vic-title {
  margin: 0;
  font-size: 34px;
  line-height: 1.1;
  color: var(--cyan-hi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-shadow: 2px 2px 0 var(--ink), 0 0 18px rgba(79, 227, 255, 0.6);
}
.vic-text {
  max-width: 500px;
  margin: 0;
  color: var(--text);
  line-height: 1.45;
}
.vic-stats {
  /* 7 numbers: rows of 4 + 3, centred (a 5 + 2 grid left a hole) */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
}
.vic-stat {
  flex: 1 1 120px;
  max-width: 132px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px 4px;
  background: rgba(7, 8, 10, 0.55);
  box-shadow: 0 0 0 1px var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.vic-stat b {
  color: var(--brass-hi);
  font-size: 16px;
}
.vic-stat span {
  color: var(--dim);
}
.vic-crew {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 4px;
}
.vic-next {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 520px;
  color: var(--violet-hi);
  text-align: left;
}
.modal-back:has(.victory-modal) {
  background: radial-gradient(ellipse at 50% 40%, rgba(79, 227, 255, 0.12), rgba(5, 5, 8, 0.45) 70%);
}

/* free camera chip below the top bar (game/qol.js): the camera is away from the Warden; click or C returns it */
.cam-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px 2px 6px;
  color: var(--cyan);
  font: inherit;
  white-space: nowrap;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 0 0 1px rgba(79, 227, 255, 0.35), 0 2px 0 rgba(0, 0, 0, 0.45);
  animation: hint-in 200ms steps(4);
}
.cam-chip:hover {
  color: var(--brass-hi);
}
.cam-chip .cc-t {
  font-weight: 700;
}
.cam-chip .cc-r {
  color: var(--dim);
}
/* the top-centre toasts move down below the chip while it shows */
body.cam-free #overlay > .toasts {
  top: var(--cam-chip-bottom, 84px);
}

/* first-contact hint card (game/hints.js) */
.hud-hint {
  position: absolute;
  left: 8px;
  bottom: 8px;
  width: 300px;
  padding: 8px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: auto;
  border: 2px solid transparent;
  border-image: var(--img-tip) 2 fill / 2px stretch;
  box-shadow: 0 0 0 1px rgba(79, 227, 255, 0.25), 0 4px 0 rgba(0, 0, 0, 0.45);
}
.hud-hint.hint-in {
  animation: hint-in 260ms steps(5);
}
.hud-hint.hint-covered {
  visibility: hidden;
}
@keyframes hint-in {
  from { opacity: 0; transform: translateY(10px); }
}
.hint-head {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--cyan);
}
.hint-title {
  font-weight: bold;
  color: var(--cyan-hi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.hint-tag {
  margin-left: auto;
  padding: 0 4px;
  font-size: 10px;
  color: var(--ink);
  background: var(--cyan);
}
.hint-text {
  margin: 0;
  line-height: 1.4;
  color: var(--text);
}
.hint-keys {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.hint-key {
  white-space: nowrap;
}
.hint-foot {
  display: flex;
  align-items: center;
}
.hint-off {
  padding: 0;
  font: inherit;
  color: var(--mute);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}
.hint-off:hover {
  color: var(--dim);
}
.alert.al-more {
  padding: 0 8px;
  pointer-events: none;
}
/* the delivered / needed numbers need more than the ammo row's 22px count column (they were clipped) */
.cx-spire .cx-ammo {
  grid-template-columns: 16px minmax(0, 1fr) 40px auto;
}
.cx-spire .cx-ammo-n {
  min-width: 0;
  text-align: right;
  white-space: nowrap;
}

/* build cursor label (game/worlddraw.js) */
.cursor-label {
  position: absolute;
  left: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 2px 7px 2px 4px;
  white-space: nowrap;
  color: var(--text);
  background: rgba(10, 11, 14, 0.88);
  box-shadow: 0 0 0 1px var(--ink), inset 0 0 0 1px rgba(47, 199, 160, 0.55);
  pointer-events: none !important;
  z-index: 5;
}
.cursor-label.bad {
  color: #ffb4a8;
  box-shadow: 0 0 0 1px var(--ink), inset 0 0 0 1px rgba(224, 80, 58, 0.8);
}
.cursor-label.decon {
  box-shadow: 0 0 0 1px var(--ink), inset 0 0 0 1px rgba(224, 80, 58, 0.55);
}
.cursor-label.warn {
  color: #ffd98a;
  box-shadow: 0 0 0 1px var(--ink), inset 0 0 0 1px rgba(240, 180, 60, 0.75);
}

.cx-store {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}
.cx-store .cx-ioslot {
  position: relative;
}

/* death screen (game/death.js) */
.death-back {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 50%, rgba(40, 6, 10, 0.35), rgba(5, 3, 6, 0.72));
  pointer-events: auto;
  z-index: 6;
}
.death-panel {
  width: 380px;
  padding: 12px 14px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.death-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: bold;
  color: var(--red);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.death-count {
  font-size: 15px;
}
.death-secs {
  font-size: 28px;
  font-weight: bold;
  color: var(--text);
}
.death-points {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.death-pt {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 5px 8px;
  font: inherit;
  color: var(--text);
  text-align: left;
  background: var(--face2);
  border: 0;
  box-shadow: 0 0 0 1px var(--ink), inset 0 1px 0 rgba(255, 255, 255, 0.05);
  cursor: pointer;
}
.death-pt:hover {
  background: var(--face3);
}
.death-pt .death-pt-name {
  flex: 1;
}
.death-pt.on,
.death-pt.auto {
  box-shadow: 0 0 0 1px var(--teal), inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.death-pt.on {
  background: var(--teal-dk);
}
.death-pt.attacked .g {
  color: var(--red);
}
.protect-chip {
  position: absolute;
  left: 50%;
  bottom: 96px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  color: var(--cyan-hi);
  background: rgba(10, 30, 40, 0.85);
  box-shadow: 0 0 0 1px var(--cyan-dk);
  pointer-events: none !important;
}

.inv-eq-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ---------------------------------------------------------------- help viewer (ui/help.js) */
.win-help {
  font-weight: 700;
}
.win-head .win-help {
  color: var(--cyan);
}
.win-head .win-help:hover {
  color: var(--ink);
  background: var(--cyan);
}
.win-helpview .win-body {
  padding: 0;
}
.hp-layout {
  display: flex;
  flex: 1;
  min-height: 0;
}
.hp-left {
  flex: none;
  width: 236px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px;
  border-right: 1px solid var(--ink);
  box-shadow: 1px 0 var(--steel-lo);
  min-height: 0;
}
.hp-nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hp-group {
  margin: 8px 0 3px;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.hp-group:first-child {
  margin-top: 2px;
}
.hp-nav-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 3px 5px;
  border: 0;
  text-align: left;
  font: inherit;
  color: var(--text);
  background: none;
  cursor: pointer;
}
.hp-nav-row:hover {
  background: var(--face2);
}
.hp-nav-row.on {
  color: var(--brass-hi);
  background: var(--face3);
  box-shadow: inset 2px 0 var(--amber);
}
.hp-nav-ic {
  flex: none;
  width: 16px;
  display: inline-flex;
  justify-content: center;
  color: var(--cyan);
}
.hp-nav-txt {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.hp-nav-sub {
  color: var(--mute);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hp-empty {
  color: var(--mute);
  padding: 6px;
}
.hp-howto {
  margin-top: 10px;
}
.hp-page {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: 14px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.hp-page:focus {
  outline: none;
}
.hp-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--ink);
  box-shadow: 0 1px var(--steel-lo);
}
.hp-head-ic {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--cyan);
  background: radial-gradient(circle, #23262d, #0e0f12 70%);
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--brass-dk), 0 0 0 2px var(--ink);
}
.hp-head-ic .g {
  transform: scale(2);
}
.hp-title {
  margin: 0;
  font-size: 24px;
  line-height: 26px;
  font-weight: 700;
  color: var(--brass-hi);
  text-shadow: 2px 2px 0 var(--ink);
}
.hp-blurb {
  color: var(--dim);
  margin-top: 2px;
}
.hp-p {
  margin: 0;
  line-height: 17px;
  max-width: 600px;
}
.hp-term {
  color: var(--brass-hi);
  font-weight: 700;
}
.hp-p .kbd,
.hp-tip .kbd,
.hp-step-t .kbd,
.hp-icon-text .kbd {
  margin: 0 1px;
}
.hp-tip {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  max-width: 600px;
  padding: 6px 9px;
  line-height: 16px;
  color: var(--cyan-hi);
  background: #0c2229;
  box-shadow: inset 0 0 0 1px var(--cyan-dk), 0 0 0 1px var(--ink);
}
.hp-tip > .g {
  flex: none;
  color: var(--cyan);
  margin-top: 3px;
}
.hp-fig {
  margin: 2px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}
.hp-pic {
  position: relative;
  flex: none;
  box-shadow: 0 0 0 1px var(--ink), 0 0 0 2px var(--steel-lo), 0 3px 0 2px rgba(0, 0, 0, 0.4);
  overflow: hidden;
}
.hp-canvas {
  display: block;
  image-rendering: pixelated;
}
.hp-lbl {
  position: absolute;
  white-space: nowrap;
  padding: 1px 4px 0;
  color: var(--text);
  background: rgba(8, 9, 12, 0.82);
  box-shadow: 0 0 0 1px var(--ink);
  pointer-events: none;
}
.hp-lbl-a {
  color: var(--brass-hi);
}
.hp-lbl-v {
  color: var(--violet-hi);
  box-shadow: 0 0 0 1px var(--violet-dk);
}
.hp-lbl-c {
  color: var(--cyan-hi);
  box-shadow: 0 0 0 1px var(--cyan-dk);
}
.hp-lbl-w {
  color: #9fd4ff;
}
.hp-cap {
  color: var(--dim);
  font-style: normal;
}
.hp-steps {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 600px;
}
.hp-step {
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 16px;
}
.hp-step-n {
  flex: none;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  font-weight: 700;
  background: var(--amber);
  box-shadow: inset 0 1px var(--brass-hi), inset 0 -1px var(--amber-dk), 0 0 0 1px var(--ink);
}
.hp-step-ic {
  flex: none;
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--steel-lo);
}
.hp-icons {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 12px;
  max-width: 640px;
}
.hp-icon-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 4px;
}
.hp-icon-row.hp-link {
  cursor: pointer;
}
.hp-icon-row.hp-link:hover {
  background: var(--face2);
}
.hp-icon-ic {
  flex: none;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--cyan);
  background: var(--well);
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--steel-lo);
}
.hp-icon-title {
  color: var(--brass-hi);
  font-weight: 700;
}
.hp-icon-text {
  color: var(--dim);
  line-height: 15px;
}
.hp-table-wrap {
  max-width: 640px;
  overflow-x: auto;
}
.hp-table {
  border-collapse: collapse;
  width: 100%;
}
.hp-table th {
  text-align: left;
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 3px 8px 3px 4px;
  border-bottom: 1px solid var(--steel-lo);
}
.hp-table td {
  padding: 3px 8px 3px 4px;
  vertical-align: top;
  line-height: 15px;
  border-bottom: 1px solid var(--face2);
}
.hp-table tr:nth-child(odd) td {
  background: rgba(255, 255, 255, 0.02);
}
.hp-cell-ic {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}
.hp-keys {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px 14px;
  max-width: 640px;
}
.hp-key {
  display: flex;
  gap: 8px;
  align-items: baseline;
  line-height: 15px;
  color: var(--dim);
}
.hp-key > .kbd {
  flex: none;
  min-width: 34px;
  text-align: center;
}
.hp-foot {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--ink);
  box-shadow: inset 0 1px var(--steel-lo);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.hp-foot-k {
  color: var(--brass);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 700;
}
.hp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.hp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 1px 7px 0 4px;
  border: 0;
  font: inherit;
  color: var(--text);
  background: var(--face2);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.06), 0 0 0 1px var(--ink);
  cursor: pointer;
}
.hp-chip:hover {
  color: var(--brass-hi);
  background: var(--steel-lo);
}
.hp-chip .g {
  color: var(--cyan);
}
.hp-gloss {
  margin: 0;
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 14px;
}
.hp-gl-term {
  color: var(--brass-hi);
  font-weight: 700;
}
.hp-gl-term.on {
  color: var(--ink);
  background: var(--amber);
  padding: 0 4px;
  align-self: start;
}
.hp-gl-text {
  margin: 0;
  line-height: 15px;
  color: var(--text);
}
.hp-gl-link {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: 6px;
  padding: 0;
  border: 0;
  font: inherit;
  color: var(--cyan);
  background: none;
  cursor: pointer;
}
.hp-gl-link:hover {
  color: var(--cyan-hi);
  text-decoration: underline;
}
.hp-glyph {
  display: inline-flex;
}

/* how to play card */
.modal.howto-modal {
  width: 720px;
  max-width: calc(100% - 32px);
}
.howto2 {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.howto-stage {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 330px;
}
.howto-pic {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 240px; /* every panel the same height: Next / Back stay under the pointer */
  overflow: hidden;
}
.howto-text {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 112px;
}
.howto-step {
  color: var(--mute);
}
.howto-title {
  margin: 0;
  font-size: 24px;
  line-height: 26px;
  color: var(--brass-hi);
  text-shadow: 2px 2px 0 var(--ink);
}
.howto-p {
  margin: 0;
  line-height: 17px;
}
.howto-keys2 {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin-top: 4px;
}
.howto-nav {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--ink);
  box-shadow: inset 0 1px var(--steel-lo);
}
.howto-dots {
  display: flex;
  gap: 6px;
}
.howto-dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  background: var(--steel);
  box-shadow: 0 0 0 1px var(--ink);
  cursor: pointer;
}
.howto-dot.on {
  background: var(--amber);
}

/* hint card: help link */
.hint-help {
  padding: 0;
  font: inherit;
  color: var(--cyan);
  background: none;
  border: 0;
  cursor: pointer;
  margin-right: 10px;
}
.hint-help:hover {
  color: var(--cyan-hi);
  text-decoration: underline;
}

/* cursor label: the fix for a refused placement */
.cursor-label.two {
  flex-direction: column;
  align-items: flex-start;
  white-space: normal;
  max-width: 320px;
  gap: 2px;
  padding: 3px 7px 3px 5px;
}
.cl-main {
  display: flex;
  align-items: center;
  gap: 5px;
}
.cl-fix {
  color: var(--text);
  line-height: 14px;
}
.cl-more {
  color: var(--mute);
}

/* build mode bar (game/guide.js) */
.build-bar {
  position: absolute;
  left: 50%;
  /* above the quickbar and the selected item's name (--qb-h: quickbar top, 2 or 4 rows; ui/hud/quickbar.js) */
  bottom: calc(var(--qb-h, 82px) + 50px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 6px 3px 8px;
  /* the bar floats over the playfield: clicks go through to the world (a beacon spot under it could not be clicked),
     only its "?" takes the pointer; it fades while the cursor is under it (game/guide.js) */
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 120ms steps(3);
}
#hud > .build-bar,
#hud > .build-bar * {
  pointer-events: none;
}
#hud > .build-bar .win-help {
  pointer-events: auto;
}
.build-bar.bb-under {
  opacity: 0.25;
}
.build-bar .bb-name {
  color: var(--brass-hi);
  font-weight: 700;
}
.build-bar .bb-keys {
  display: flex;
  gap: 10px;
  color: var(--dim);
}
.build-bar .win-help {
  color: var(--cyan);
}

/* guide marker ("Show me"): edge arrow when the target is off-screen */
.guide-edge {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.guide-edge .ge-chev {
  position: absolute;
  left: -10px;
  top: -10px;
  width: 20px;
  height: 20px;
  background: var(--amber);
  clip-path: polygon(0 0, 100% 50%, 0 100%, 25% 50%);
  filter: drop-shadow(1px 1px 0 var(--ink));
  animation: edge-pulse 0.7s steps(2) infinite;
}
.guide-edge .ge-lbl {
  position: absolute;
  white-space: nowrap;
  padding: 1px 5px 0;
  color: var(--brass-hi);
  background: rgba(10, 11, 14, 0.88);
  box-shadow: 0 0 0 1px var(--brass-dk);
  transform: translate(-50%, 16px);
}
.guide-edge .ge-lbl[data-side='left'] {
  transform: translate(calc(-100% - 16px), -50%);
}
.guide-edge .ge-lbl[data-side='right'] {
  transform: translate(16px, -50%);
}
.guide-edge .ge-lbl[data-side='up'] {
  transform: translate(-50%, calc(-100% - 16px));
}
.guide-tag {
  position: absolute;
  pointer-events: none;
  white-space: nowrap;
  padding: 1px 5px 0;
  color: var(--ink);
  font-weight: 700;
  background: var(--amber);
  box-shadow: 0 0 0 1px var(--ink), 0 2px 0 rgba(0, 0, 0, 0.5);
  transform: translate(-50%, -100%);
}

/* Expedition Log: step hint */
.obj-hint {
  display: flex;
  gap: 5px;
  align-items: flex-start;
  margin: 2px 0 4px;
  padding: 4px 6px;
  line-height: 14px;
  color: var(--cyan-hi);
  background: #0c2229;
  box-shadow: inset 0 0 0 1px var(--cyan-dk);
}
.obj-hint > .g {
  flex: none;
  color: var(--cyan);
  margin-top: 2px;
}

/* inventory: recipe highlighted by "Show me" */
.craft-slot.guide-hl {
  animation: guide-hl 0.6s steps(2) infinite;
  box-shadow: 0 0 0 2px var(--amber), 0 0 8px 2px rgba(240, 168, 60, 0.6);
}
.tab.guide-hl {
  box-shadow: inset 0 0 0 2px var(--amber);
}
@keyframes guide-hl {
  50% {
    box-shadow: 0 0 0 2px var(--brass-hi), 0 0 2px 1px rgba(240, 168, 60, 0.2);
  }
}

/* toast with a help link */
.toasts .toast.has-help {
  pointer-events: auto;
}
.toast-help {
  margin-left: 4px;
  padding: 0 5px;
  height: 16px;
  border: 0;
  font: inherit;
  font-weight: 700;
  color: var(--ink);
  background: var(--cyan);
  box-shadow: 0 0 0 1px var(--ink);
  cursor: pointer;
}
.toast-sub {
  color: var(--dim);
}
.toast .toast-col {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

/* context panel: purpose line and next action */
.cx-purpose {
  color: var(--dim);
  line-height: 14px;
}
.cx-next {
  margin-top: -2px;
  padding: 3px 6px;
  line-height: 14px;
  color: var(--text);
  background: rgba(240, 168, 60, 0.08);
  box-shadow: inset 2px 0 var(--amber);
}
.cx-next.bad {
  background: rgba(224, 80, 58, 0.1);
  box-shadow: inset 2px 0 var(--red);
}
.tt-next {
  margin-top: 2px;
  padding: 2px 5px;
  color: var(--text);
  line-height: 14px;
  background: rgba(240, 168, 60, 0.1);
  box-shadow: inset 2px 0 var(--amber);
}
.tt-help {
  color: var(--mute);
  margin-top: 2px;
}
.cx-tools .cx-help {
  width: 20px;
  height: 20px;
  margin-right: 2px;
  color: var(--cyan);
}
.cx-tools .cx-help:hover {
  color: var(--ink);
  background: var(--cyan);
}

.hp-page > * {
  flex-shrink: 0;
}
.tt-l {
  flex: none;
  white-space: nowrap;
}
.hud-context > * {
  flex-shrink: 0;
}
.cx-foot {
  display: flex;
  flex-wrap: wrap;
  column-gap: 10px;
  row-gap: 3px;
}
.cx-fk {
  white-space: nowrap;
}
.cx-statusbox {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cx-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* research panel: why it does not progress (game/hudbind.js labWait) */
.rs-wait {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  color: var(--warn);
  pointer-events: auto;
}
.rs-wait-t {
  flex: 1;
  min-width: 0;
}

/* research window: what research needs (packs at hand, a lab, how to make them) */
.rd-needs {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.rd-need {
  display: flex;
  align-items: center;
  gap: 6px;
}
.rd-need.bad > span:not(.mute) {
  color: var(--bad);
}
.rd-how {
  margin-top: 4px;
}

/* map sector card: resources as labelled chips */
.sc-res-wrap {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.sc-res {
  flex-wrap: wrap;
}
.sc-ri {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 5px 1px 2px;
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

/* floating pickup text above the Warden (game/warden.js floatText) */
.float-text {
  position: absolute;
  left: 0;
  top: 0;
  white-space: nowrap;
  color: var(--brass-hi);
  text-shadow: 1px 0 var(--ink), -1px 0 var(--ink), 0 1px var(--ink), 0 -1px var(--ink), 1px 1px var(--ink);
  pointer-events: none;
  z-index: 4;
}

/* pick dialogs (chest slot filter: ui/windows/chest.js) and mass-driver link picker (hudbind) */
.req-editor {
  width: 440px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.req-intro {
  margin: 0 0 4px;
  line-height: 16px;
}
.req-empty {
  padding: 6px 4px;
}
.req-pick {
  display: grid;
  grid-template-columns: repeat(auto-fill, 36px);
  gap: 4px;
  padding: 4px;
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--ink);
  min-height: 44px;
}
.req-pick .req-empty {
  grid-column: 1 / -1;
}
.ch-fpick {
  max-height: min(360px, calc(100vh - 260px));
  overflow-y: auto;
  align-content: start;
}
.md-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 320px;
}
.md-row {
  justify-content: flex-start;
}

/* chest window (ui/windows/chest.js): chest slots | backpack, limit bar, slot filters */
.win-chest .inv-layout {
  align-items: stretch;
}
.ch-tools {
  margin-top: auto;
}
.ch-left,
.ch-right {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ch-head {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 20px;
  margin-bottom: 6px;
  color: var(--dim);
}
.ch-status.warn {
  color: var(--warn);
}
.ch-depot {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
  padding: 2px 8px;
  color: var(--teal);
  background: rgba(47, 199, 160, 0.08);
  box-shadow: inset 0 0 0 1px var(--teal-dk);
}
.ch-depot.bad {
  color: var(--bad);
  background: rgba(224, 80, 58, 0.08);
  box-shadow: inset 0 0 0 1px #7a2a1a;
}
/* 8 rows at most (warehouse: 200 slots), then the grid scrolls */
.ch-scroll {
  max-height: calc(8 * var(--slot, 36px) + 4px);
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-width: thin;
}
.ch-lim {
  height: 20px;
}
.ch-lim .step-btn {
  height: 20px;
}
.ch-limval {
  min-width: 52px;
  height: 20px;
  line-height: 20px;
  padding: 0 4px;
  text-align: center;
  background: var(--well);
  box-shadow: inset 0 0 0 1px var(--ink);
  font-variant-numeric: tabular-nums;
}
.ch-limval.bad {
  color: #ffb0a0;
}
.ch-limtool .g {
  color: var(--red);
}
.ch-tool.on {
  color: var(--brass-hi);
}
/* the limit bar: slots from lim on are crossed out and red-tinted (Factorio's red X) */
.slot.barred::after {
  content: '';
  position: absolute;
  inset: 1px;
  pointer-events: none;
  background:
    linear-gradient(45deg, transparent calc(50% - 1px), rgba(224, 80, 58, 0.6) calc(50% - 1px), rgba(224, 80, 58, 0.6) calc(50% + 1px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), rgba(224, 80, 58, 0.6) calc(50% - 1px), rgba(224, 80, 58, 0.6) calc(50% + 1px), transparent calc(50% + 1px)),
    rgba(150, 30, 20, 0.26);
}
.slot.barred:not(.empty)::after {
  opacity: 0.55;
}
.slot.bar-first {
  box-shadow: inset 2px 0 0 var(--red), -1px 0 0 var(--red);
}
/* limit tool hover: the slots that would be closed */
.slot.bar-prev::after {
  content: '';
  position: absolute;
  inset: 1px;
  pointer-events: none;
  background: rgba(224, 80, 58, 0.22);
  box-shadow: inset 0 0 0 1px rgba(224, 80, 58, 0.6);
}
.slot-grid.mode-limit .slot,
.slot-grid.mode-filter .slot {
  cursor: crosshair;
}
.slot-grid.mode-limit,
.slot-grid.mode-filter {
  outline: 1px dashed var(--amber-dk);
  outline-offset: 1px;
}
/* a filtered slot holding its item: a small filter corner */
.slot.has-filter:not(.empty)::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 0;
  height: 0;
  border-top: 6px solid var(--cyan);
  border-right: 6px solid transparent;
  pointer-events: none;
}
.slot.has-filter.empty {
  box-shadow: inset 0 0 0 1px var(--cyan-dk);
}
.ch-pick {
  /* the silence beacon lists up to ~8 sectors: no inner scroll at 1280x720 (the help line scrolled away) */
  max-height: min(440px, calc(100vh - 220px));
  overflow-y: auto;
}
/* the keyboard-focus frame only while the grid is keyboard-focused (a mouse drag left a stray frame behind) */
.win-chest .slot-grid:not(:focus-visible) .slot.kfocus {
  border-image-source: var(--img-slot);
}
.win-chest .slot-grid:not(:focus-visible) .slot.kfocus:hover {
  border-image-source: var(--img-slot-hover);
}

/* derelict section of the context panel (ui/hud/context.js sel.derelict) */
.cx-derelict .cx-dl-head {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}
.cx-derelict .cx-dl-head .sp-pips {
  margin: 0;
}
.cx-dl-lv {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 4px;
  line-height: 14px;
  color: var(--mute);
}
.cx-dl-lv.on {
  color: var(--text);
}
.cx-dl-lv.on .cx-dl-n {
  color: var(--cyan);
}
.cx-dl-lv.next .cx-dl-n {
  color: var(--brass-hi);
}
.cx-dl-n {
  font-weight: bold;
}
.cx-derelict .cx-ammo {
  grid-template-columns: 16px 1fr 36px auto;
}
.cx-derelict .cx-ammo-n {
  white-space: nowrap;
}

/* map sector card: derelict block, charter row (ui/windows/map.js) */
.map-right {
  overflow-y: auto;
  min-height: 0;
}
.sc-der {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 4px;
  border-top: 1px solid var(--steel-lo);
}
.sc-der-head {
  display: flex;
  align-items: center;
  gap: 5px;
}
.sc-der-name {
  flex: 1;
  font-weight: 700;
  line-height: 14px;
}
.sc-der-st {
  line-height: 14px;
}
.sc-dl {
  display: grid;
  grid-template-columns: 16px 1fr;
  gap: 3px;
  color: var(--dim);
  line-height: 14px;
}
.sc-dl.on {
  color: var(--text);
}
.sc-dl-n {
  color: var(--brass);
}
.sc-dl-h {
  grid-column: 2;
  color: var(--violet-hi);
}
.sc-ch {
  display: flex;
  align-items: center;
  gap: 6px;
}
.sc-ch .sc-charter {
  margin-left: auto;
}
.sc-pin {
  font-size: inherit;
  line-height: 14px;
}
/* charter / archive / silence pickers (game/derelictui.js) */
.ch-pick {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: min(440px, 80vw);
}
.ch-help {
  line-height: 15px;
}
.ch-opt {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 8px;
  align-items: center;
}
.ch-desc {
  color: var(--dim);
  line-height: 14px;
}
.ch-pick > .ch-row {
  justify-content: flex-start;
}
.inv-shield {
  align-self: center;
  white-space: nowrap;
}
.ch-opt.ch-opt-ic {
  grid-template-columns: 20px 150px 1fr;
}

/* filter inserters: the panel row (ui/hud/context.js) and the picker (game/filterui.js) */
.cx-fslots {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.cx-fslot {
  width: 28px;
  height: 28px;
  cursor: pointer;
}
.cx-fslot.empty {
  box-shadow: inset 0 0 0 1px var(--steel-lo);
  background: repeating-linear-gradient(45deg, var(--well) 0 3px, var(--deep) 3px 6px);
}
.cx-fslot:hover {
  box-shadow: inset 1px 1px var(--ink), 0 0 0 1px var(--amber);
}
.cx-filters .cx-note {
  margin-top: 3px;
  line-height: 14px;
}
.fi-head {
  display: flex;
  align-items: center;
  gap: 4px;
}
.fi-chosen {
  display: flex;
  gap: 4px;
  flex: 1;
}
.fi-slot.fi-empty {
  opacity: 0.8;
}
.fi-count {
  line-height: 16px;
  min-height: 16px;
}
.fi-k {
  margin-top: 2px;
}
.fi-grid .slot.fi-near::after {
  content: '';
  position: absolute;
  right: 2px;
  top: 2px;
  width: 4px;
  height: 4px;
  background: var(--teal);
  box-shadow: 0 0 0 1px var(--ink);
  pointer-events: none;
}
.fi-grid .slot.sel {
  box-shadow: 0 0 0 1px var(--amber);
}