/* Deck builder.
   Borrows the menu's HUD tokens (--neon-*, --font-heading, --glass-border) so
   the builder and the table setup screen read as one system. Only the layout a
   long, editable, three-rail deck needs lives here. */

.deck-builder-page {
  --c-blue: #2fa8ff;
  --c-green: #3fd08a;
  --c-red: #ff5d52;
  --c-purple: #b06bff;
  --c-grey: #7d94a2;

  --rail-a: #2fa8ff;
  --rail-b: #b06bff;
  --rail-c: #ff5d52;

  --db-panel: rgba(9, 19, 34, 0.82);
  --db-panel-solid: #0a1424;
  --db-line: rgba(90, 160, 205, 0.22);
  --db-line-strong: rgba(120, 200, 255, 0.45);
  --db-ink: #e6f2fb;
  --db-dim: #8ea6b8;

  /* Only needed for the inspector's parchment effect panel, which mirrors
     the card registry and the table's own card zoom (both defined in their
     own stylesheets) rather than sharing CSS with them. */
  --pf-text-dark: #14191b;
  --pf-serif: "Roboto Slab", Georgia, "Times New Roman", serif;

  min-height: 100vh;
}

.db-shell {
  position: relative;
  z-index: 2;
  display: grid;
  gap: 14px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: calc(var(--pf-header-h, 76px) + 16px) clamp(16px, 2vw, 36px) 40px;
  color: var(--db-ink);
}

/* --- Shared furniture ---------------------------------------------------- */

.db-kicker {
  margin: 0;
  font-family: var(--font-sub);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--neon-cyan);
}

.db-note {
  margin: 0;
  font-size: 0.75rem;
  line-height: 1.45;
  color: var(--db-dim);
}
.db-note.is-warning { color: #f3c667; }

.db-blurb {
  margin: 4px 0 0;
  max-width: 46ch;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--db-dim);
}

.db-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 14px;
  border: 1px solid var(--db-line);
  border-radius: 6px;
  background: rgba(16, 32, 54, 0.85);
  color: var(--db-ink);
  font-family: var(--font-sub);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  text-decoration: none;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.db-btn:hover:not(:disabled) {
  border-color: var(--neon-cyan);
  background: rgba(0, 240, 255, 0.14);
  color: #ffffff;
}
.db-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.db-btn.is-primary {
  border-color: rgba(0, 150, 255, 0.7);
  background: linear-gradient(180deg, #1b73d8, #12508f);
  color: #ffffff;
}
.db-btn.is-primary:hover { background: linear-gradient(180deg, #2b8bf5, #1861ab); }
.db-btn.is-small { min-height: 28px; padding: 3px 10px; font-size: 0.76rem; }
.db-btn.is-icon { min-width: 34px; padding: 6px 9px; font-size: 1rem; }

.db-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  font-family: var(--font-sub);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--db-dim);
}
.db-field input,
.db-field select {
  min-width: 0;
  min-height: 34px;
  padding: 6px 10px;
  border: 1px solid var(--db-line);
  border-radius: 6px;
  background: rgba(4, 12, 22, 0.9);
  color: var(--db-ink);
  font-family: var(--font-sub);
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: normal;
  text-transform: none;
}
.db-field select { cursor: pointer; }
.db-field input:focus,
.db-field select:focus {
  outline: none;
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 1px rgba(0, 240, 255, 0.35);
}
.db-field option { background: #0a1428; color: var(--db-ink); }

/* --- Command bar --------------------------------------------------------- */

.db-bar {
  display: grid;
  grid-template-columns: minmax(240px, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid var(--db-line);
  border-radius: 10px;
  background: var(--db-panel);
  backdrop-filter: blur(14px);
}

.db-identity h1 {
  margin: 2px 0 0;
  font-family: var(--font-heading);
  font-size: 1.75rem;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #ffffff;
  text-shadow: 0 0 18px rgba(0, 240, 255, 0.25);
}

/* Counts, not fractions: there is no maximum deck size and no rail cap. */
.db-stats {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid var(--db-line);
  border-radius: 8px;
  background: rgba(4, 12, 22, 0.6);
}
.db-stat {
  display: grid;
  gap: 2px;
  justify-items: center;
  min-width: 74px;
  padding: 0 10px;
  border-right: 1px solid rgba(90, 160, 205, 0.14);
}
.db-stat:last-of-type { border-right: none; }
.db-stat-label {
  font-family: var(--font-sub);
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-dim);
  white-space: nowrap;
}
.db-stat-value {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
}
.db-stat-value.is-big { font-size: 1.9rem; line-height: 1; }
.db-stat[data-rail="row-a"] .db-stat-value { color: var(--rail-a); }
.db-stat[data-rail="row-b"] .db-stat-value { color: var(--rail-b); }
.db-stat[data-rail="row-c"] .db-stat-value { color: var(--rail-c); }

.db-status {
  flex: 1 1 150px;
  margin: 0;
  font-family: var(--font-sub);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--db-dim);
}
.db-status.is-good { color: var(--neon-green); }
.db-status.is-warning { color: #f3c667; }

.db-header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.header-field-label {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  letter-spacing: .12em;
}
.db-file-fields { display: flex; align-items: center; gap: 8px; }
.db-file-actions { display: flex; align-items: center; gap: 6px; }
.db-menu-wrap { position: relative; display: inline-flex; }

.db-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 1000;
  display: grid;
  gap: 2px;
  min-width: 210px;
  padding: 6px;
  border: 1px solid var(--db-line-strong);
  border-radius: 8px;
  background: var(--db-panel-solid);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.75);
}
.db-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: 5px;
  background: none;
  color: var(--db-ink);
  font-family: var(--font-sub);
  font-size: 0.82rem;
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}
.db-menu-item:hover:not(:disabled) { background: rgba(0, 240, 255, 0.12); }
.db-menu-item:disabled { opacity: 0.4; cursor: not-allowed; }
.db-menu-check input { width: auto; }

/* --- Opening hand -------------------------------------------------------- */

.db-hand {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border: 1px solid var(--db-line);
  border-radius: 10px;
  background: var(--db-panel);
}
.db-hand-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0;
  border: none;
  background: none;
  color: var(--db-ink);
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
}
.db-caret { transition: transform 140ms ease; }
.db-hand.is-collapsed .db-caret { transform: rotate(-90deg); }
.db-hand.is-collapsed .db-hand-list,
.db-hand.is-collapsed .db-hand-note,
.db-hand.is-collapsed #starting-add { display: none; }
.db-hand-count { color: var(--db-dim); }
.db-hand-list { display: contents; margin: 0; padding: 0; list-style: none; }
.db-hand-note { flex: 1 1 200px; margin: 0; text-align: right; font-size: 0.72rem; color: var(--db-dim); }

.db-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px 6px 12px;
  border: 1px solid var(--db-line);
  border-left: 3px solid var(--chip, var(--c-grey));
  border-radius: 7px;
  background: rgba(4, 14, 26, 0.85);
  font-family: var(--font-sub);
  font-size: 0.85rem;
  font-weight: 600;
}
.db-chip[data-color="blue"] { --chip: var(--c-blue); }
.db-chip[data-color="green"] { --chip: var(--c-green); }
.db-chip[data-color="red"] { --chip: var(--c-red); }
.db-chip[data-color="purple"] { --chip: var(--c-purple); }
.db-chip-count { color: var(--neon-cyan); font-weight: 800; }
.db-chip-more,
.db-chip-remove {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 4px;
  background: none;
  color: var(--db-dim);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.db-chip-more:hover { color: var(--neon-cyan); border-color: var(--db-line); }
.db-chip-remove:hover { color: #ffffff; background: rgba(255, 93, 82, 0.35); }
.db-chip.is-add {
  border-left-width: 1px;
  border-style: dashed;
  color: var(--db-dim);
  cursor: pointer;
}
.db-chip.is-add:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }

/* --- Toolbar ------------------------------------------------------------- */

.db-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: 10px;
  padding: 12px 16px;
  border: 1px solid var(--db-line);
  border-radius: 10px;
  background: var(--db-panel);
}

.db-search {
  position: relative;
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  min-width: 0;
}
.db-search input {
  width: 100%;
  min-height: 36px;
  padding: 6px 32px;
  border: 1px solid var(--db-line);
  border-radius: 6px;
  background: rgba(4, 12, 22, 0.9);
  color: var(--db-ink);
  font-family: var(--font-sub);
  font-size: 0.88rem;
}
.db-search input:focus { outline: none; border-color: var(--neon-cyan); }
.db-search-icon { position: absolute; left: 11px; color: var(--db-dim); pointer-events: none; }
.db-search-clear {
  position: absolute;
  right: 6px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--db-dim);
  cursor: pointer;
}
.db-search-clear:hover { color: #ffffff; }

.db-view-switch {
  display: flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--db-line);
  border-radius: 8px;
  background: rgba(4, 12, 22, 0.8);
}
.db-view-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: none;
  color: var(--db-dim);
  font-family: var(--font-sub);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.db-view-btn:hover { color: var(--db-ink); }
.db-view-btn.is-active {
  background: rgba(0, 240, 255, 0.18);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(0, 240, 255, 0.4);
}

.db-bulk { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.db-bulk-label {
  font-family: var(--font-sub);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-dim);
}

/* --- Body: board plus inspector ------------------------------------------ */

.db-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.db-main { min-width: 0; }

.db-card-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* --- Rails --------------------------------------------------------------- */

.db-rails {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 360px), 1fr));
  gap: 16px;
  align-items: start;
}

@media (min-width: 1200px) {
  .db-rails {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Each rail is its own outlined block, in its own colour, because the rail a
   card sits on is the first thing you need to see. */
.db-rail {
  --rail: var(--rail-a);
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--rail) 45%, transparent);
  border-top: 3px solid var(--rail);
  border-radius: 12px;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--rail) 12%, transparent), transparent 180px),
    rgba(6, 15, 28, 0.82);
  box-shadow: 0 0 24px color-mix(in srgb, var(--rail) 12%, transparent);
}
.db-rail[data-rail="row-b"] { --rail: var(--rail-b); }
.db-rail[data-rail="row-c"] { --rail: var(--rail-c); }

.db-rail-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid color-mix(in srgb, var(--rail) 28%, transparent);
}
.db-rail-glyph {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid color-mix(in srgb, var(--rail) 55%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--rail) 16%, transparent);
  color: var(--rail);
  font-size: 1rem;
}
.db-rail-titles { min-width: 0; }
.db-rail-head h2 {
  margin: 0;
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--rail);
}
.db-rail-hint { margin: 2px 0 0; font-size: 0.7rem; line-height: 1.3; color: var(--db-dim); }
.db-rail-count { display: grid; justify-items: end; gap: 1px; }
.db-rail-count strong { font-family: var(--font-heading); font-size: 1.25rem; color: #ffffff; }
.db-rail-count small {
  font-family: var(--font-sub);
  font-size: 0.58rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--db-dim);
  white-space: nowrap;
}

.db-rail-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
  gap: 12px;
}

.db-add-card-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 180px;
  padding: 16px 10px;
  border: 1px dashed color-mix(in srgb, var(--rail, var(--db-line)) 60%, transparent);
  border-radius: 9px;
  background: rgba(4, 13, 24, 0.4);
  color: color-mix(in srgb, var(--rail, var(--neon-cyan)) 85%, #fff);
  font-family: var(--font-sub);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.db-add-card-tile:hover {
  border-color: var(--rail, var(--neon-cyan));
  border-style: solid;
  background: color-mix(in srgb, var(--rail, var(--neon-cyan)) 15%, rgba(4, 13, 24, 0.85));
  transform: translateY(-2px);
  box-shadow: 0 0 18px color-mix(in srgb, var(--rail, var(--neon-cyan)) 30%, transparent);
}
.db-add-card-tile .db-add-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid color-mix(in srgb, var(--rail, var(--neon-cyan)) 50%, transparent);
  border-radius: 50%;
  font-size: 1.2rem;
  line-height: 1;
}

/* --- Card tile ----------------------------------------------------------- */

.db-card {
  --ink: var(--c-grey);
  display: flex;
  flex-direction: column;
  border: 1px solid var(--db-line);
  border-radius: 9px;
  background: rgba(4, 13, 24, 0.9);
  overflow: hidden;
  transition: border-color 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.db-card[data-color="blue"] { --ink: var(--c-blue); }
.db-card[data-color="green"] { --ink: var(--c-green); }
.db-card[data-color="red"] { --ink: var(--c-red); }
.db-card[data-color="purple"] { --ink: var(--c-purple); }
.db-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.db-card.is-selected {
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink), 0 0 22px color-mix(in srgb, var(--ink) 40%, transparent);
}
/* A card set to zero is out of the game. Make that unmistakable. */
.db-card.is-out { opacity: 0.42; }
.db-card.is-out:hover { opacity: 0.75; }

.db-card-open {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

/* The face is shared with the Card Editor. Only the tile's scale is owned by
   the builder; all card content and framing come from digital-card.css. */
.db-card-face {
  display: block;
  width: 100%;
  aspect-ratio: 5 / 7;
  container-type: inline-size;
}
.db-card-face .pf-digital-card--preview {
  border-radius: 8px;
  box-shadow: none;
}
.db-card-face .pf-digital-card--preview .pf-card-die,
.db-card-face .pf-digital-card--preview .pf-card-cost,
.db-card-face .pf-digital-card--preview .pf-card-symbol {
  width: clamp(27px, 16cqw, 56px);
  height: clamp(27px, 16cqw, 56px);
  min-width: clamp(27px, 16cqw, 56px);
  min-height: clamp(27px, 16cqw, 56px);
  max-width: clamp(27px, 16cqw, 56px);
  max-height: clamp(27px, 16cqw, 56px);
  border-width: 1px;
}
.db-card-face .pf-digital-card--preview .pf-card-die { top: 5px; left: 5px; border-radius: 6px; font-size: clamp(.95rem, 9.2cqw, 2.05rem); }
.db-card-face .pf-digital-card--preview .pf-card-cost { left: 5px; bottom: 5px; font-size: clamp(.98rem, 8.9cqw, 1.98rem); }
.db-card-face .pf-digital-card--preview .pf-card-symbol { top: 5px; right: 5px; }
.db-card-face .pf-digital-card--preview .pf-digital-card-title { padding: 0 7px 3px; font-size: clamp(.86rem, 6.5cqw, 2.4rem); }
.db-card-face .pf-digital-card--preview .pf-digital-card-rules {
  margin: 0 5px 10px;
  padding: 4px 5px;
  border-radius: 4px;
  font-size: clamp(.62rem, 4.2cqw, 1.3rem);
  line-height: 1.16;
}
.db-card-face .pf-digital-card--preview .pf-digital-card-foot {
  gap: 4px;
  padding: 0 5px 5px 34px;
  font-size: clamp(.45rem, 2.8cqw, .8rem);
}

/* --- Count stepper ------------------------------------------------------- */

.db-count {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 8px 8px;
}
.db-count-btn {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border: 1px solid var(--db-line);
  border-radius: 5px;
  background: rgba(10, 24, 42, 0.9);
  color: var(--db-ink);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}
.db-count-btn:hover { border-color: var(--neon-cyan); background: rgba(0, 240, 255, 0.16); }
.db-count input {
  flex: 1;
  min-width: 34px;
  width: 100%;
  padding: 4px;
  border: 1px solid var(--db-line);
  border-radius: 5px;
  background: rgba(3, 10, 18, 0.9);
  color: #ffffff;
  font-family: var(--font-heading);
  font-size: 0.85rem;
  font-weight: 800;
  text-align: center;
  -moz-appearance: textfield;
}
.db-count input::-webkit-outer-spin-button,
.db-count input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.db-count input:focus { outline: none; border-color: var(--neon-cyan); }
.db-count.is-large { padding: 0; }
.db-count.is-large .db-count-btn { width: 34px; height: 34px; font-size: 1.1rem; }
.db-count.is-large input { font-size: 1.2rem; min-width: 56px; }
.db-count-unit {
  font-family: var(--font-sub);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--db-dim);
}

/* --- Table view ---------------------------------------------------------- */

.db-table-wrap {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 1px solid var(--db-line);
  border-radius: 10px;
  background: var(--db-panel);
}
.db-table-scroll { overflow-x: auto; }
.db-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sub);
  font-size: 0.85rem;
}
.db-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 8px 10px;
  border-bottom: 1px solid var(--db-line-strong);
  background: #0a1626;
  text-align: left;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--db-dim);
  white-space: nowrap;
}
.db-sort {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 0;
  border: none;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}
.db-sort::after { content: "⇅"; opacity: 0.4; font-size: 0.8em; }
.db-sort[data-active="true"] { color: var(--neon-cyan); }
.db-sort[data-active="true"]::after { opacity: 1; content: "↑"; }
.db-sort[data-active="true"][data-direction="desc"]::after { content: "↓"; }

.db-row { border-bottom: 1px solid rgba(90, 160, 205, 0.1); cursor: pointer; }
.db-row:hover { background: rgba(0, 240, 255, 0.06); }
.db-row.is-selected { background: rgba(0, 150, 255, 0.16); }
.db-row.is-out { opacity: 0.45; }
.db-row td, .db-row th { padding: 5px 10px; vertical-align: middle; text-align: left; }
/* The flex lives on a span inside the cell, never on the <td>/<th> itself:
   display:flex on a table cell drops it out of the table's column model, and
   the tags ended up stacked under the faction instead of in their own column. */
.db-row-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: #ffffff;
  white-space: nowrap;
}
.db-row-swatch {
  width: 4px;
  height: 20px;
  border-radius: 2px;
  background: var(--c-grey);
  flex: 0 0 auto;
}
.db-row[data-color="blue"] .db-row-swatch { background: var(--c-blue); }
.db-row[data-color="green"] .db-row-swatch { background: var(--c-green); }
.db-row[data-color="red"] .db-row-swatch { background: var(--c-red); }
.db-row[data-color="purple"] .db-row-swatch { background: var(--c-purple); }
.db-row-cost { font-family: var(--font-heading); font-weight: 800; }
.db-row-faction { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.db-row-faction img { width: 15px; height: 15px; object-fit: contain; }
.db-row-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.db-row-tags span {
  padding: 1px 7px;
  border: 1px solid var(--db-line);
  border-radius: 999px;
  font-size: 0.66rem;
  color: #9fc4d6;
}
.db-row .db-count { padding: 0; }

.db-rail-pill {
  display: inline-block;
  padding: 1px 9px;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--rail-a);
}
.db-rail-pill[data-rail="row-b"] { color: var(--rail-b); }
.db-rail-pill[data-rail="row-c"] { color: var(--rail-c); }

/* --- Inspector ----------------------------------------------------------- */

/* #card-inspector is a .db-overlay (shared fixed-backdrop, centered like the
   faction web and every other full-screen panel on this page) -- see
   .db-overlay below. This is just the panel that centers inside it. */
.db-inspector-inner {
  --ink: var(--c-grey);
  position: relative;
  width: min(880px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  display: grid;
  gap: 16px;
  padding: 46px 24px 26px;
  border: 1px solid var(--db-line-strong);
  border-radius: 12px;
  background: var(--db-panel-solid);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.db-inspector-inner[data-color="blue"] { --ink: var(--c-blue); }
.db-inspector-inner[data-color="green"] { --ink: var(--c-green); }
.db-inspector-inner[data-color="red"] { --ink: var(--c-red); }
.db-inspector-inner[data-color="purple"] { --ink: var(--c-purple); }

.db-inspector-head { position: absolute; top: 12px; right: 12px; z-index: 2; }

.db-inspection-top {
  display: grid;
  grid-template-columns: minmax(200px, 260px) minmax(280px, 1fr);
  gap: 22px;
  align-items: start;
}

.db-inspector-card {
  width: 100%;
  aspect-ratio: 5 / 7;
}
.db-inspector-card .pf-digital-card--preview {
  border-radius: 12px;
}

/* Kicker / title / fact-box / effect-panel: the same reading of a card the
   card registry and the table's own card zoom give it (each defined in its
   own stylesheet), reformatted to fit this panel's column. */
.db-inspection-copy { display: grid; gap: 10px; align-content: start; }

.db-inspection-kicker {
  margin: 0;
  color: var(--ink);
  font: 700 0.68rem/1 "Orbitron", Arial, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.db-inspection-copy h2 {
  margin: 0;
  font: 800 1.7rem/0.95 var(--pf-card-font, "Barlow Condensed", Arial, sans-serif);
  letter-spacing: 0.02em;
  color: #ffffff;
}

.db-colour-note { margin: 0; font-size: 0.72rem; color: var(--ink); }

.db-inspection-facts {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.db-inspection-fact {
  display: grid;
  min-height: 62px;
  place-content: center;
  justify-items: center;
  gap: 4px;
  padding: 8px 10px;
  border: 1px solid color-mix(in srgb, var(--ink) 65%, #0d1b25);
  border-radius: 6px;
  background:
    radial-gradient(circle at 50% 0, color-mix(in srgb, var(--ink) 20%, transparent), transparent 70%),
    linear-gradient(145deg, #0c202be8, #040a0fe8);
  box-shadow: inset 0 0 0 1px #02070c, 0 0 12px color-mix(in srgb, var(--ink) 18%, transparent);
  text-align: center;
}
.db-inspection-fact.db-inspection-faction { grid-column: 1 / -1; }
.db-inspection-fact > span,
.db-inspection-label {
  color: #78ceef;
  font: 700 0.6rem/1 "Orbitron", Arial, sans-serif;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.db-inspection-fact > strong {
  color: #ffffff;
  font: 800 1.35rem/0.9 var(--pf-card-font, "Barlow Condensed", Arial, sans-serif);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.db-inspection-faction-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 1rem !important;
  white-space: nowrap;
}
.db-inspection-symbol {
  display: grid;
  width: 26px;
  height: 26px;
  flex: 0 0 auto;
  place-items: center;
  border: 2px solid #ecf3f6;
  border-radius: 50%;
  background: #050505;
  box-shadow: 0 2px 5px #000b;
}
.db-inspection-symbol svg { width: 66%; height: 66%; fill: #ffffff; }

.db-inspection-effect {
  display: grid;
  gap: 7px;
  margin: 0;
  padding: 12px 14px;
  color: var(--pf-text-dark);
  background:
    repeating-linear-gradient(97deg, #4a392b08 0 1px, transparent 1px 17px),
    repeating-linear-gradient(8deg, #ffffff0b 0 1px, transparent 1px 23px),
    radial-gradient(circle at 20% 20%, #f4edde 0, transparent 36%),
    radial-gradient(circle at 82% 70%, #d7c7ac66 0, transparent 40%),
    linear-gradient(135deg, #efe5d3, #ddd0ba 52%, #eee3d1);
  border: 1px solid #7e745f;
  box-shadow: inset 0 0 0 2px #f5eede66, inset 0 0 14px #8b76593d, 0 2px 5px #0009;
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 7px, 100% calc(100% - 7px), calc(100% - 7px) 100%, 7px 100%, 0 calc(100% - 7px), 0 7px);
}
.db-inspection-effect-text {
  color: #182026;
  font: 700 0.92rem/1.32 var(--pf-serif);
}

.db-inspection-engine {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 0 0 10px;
  border-left: 2px solid var(--ink);
}
.db-inspection-engine-text {
  margin: 0;
  color: var(--db-ink);
  font-size: 0.78rem;
  line-height: 1.35;
}

.db-inspector-flavor { margin: 0; font-size: 0.78rem; font-style: italic; color: var(--db-dim); }
.db-inspector-tags { display: flex; flex-wrap: wrap; gap: 4px; margin: 0; }
.db-inspector-tags span {
  padding: 1px 8px;
  border: 1px solid var(--db-line);
  border-radius: 999px;
  font-size: 0.66rem;
  color: #9fc4d6;
}

.db-dist { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--db-line); }
.db-dist h3 {
  margin: 0;
  font-family: var(--font-sub);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--db-dim);
}
.db-dist-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 34px;
  gap: 8px;
  align-items: center;
  font-size: 0.76rem;
  color: var(--db-dim);
}
.db-dist-row strong { color: #ffffff; text-align: right; }
.db-dist-bar {
  height: 7px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}
.db-dist-bar i { display: block; height: 100%; background: var(--neon-cyan); }
.db-dist-bar[data-rail="row-a"] i { background: var(--rail-a); }
.db-dist-bar[data-rail="row-b"] i { background: var(--rail-b); }
.db-dist-bar[data-rail="row-c"] i { background: var(--rail-c); }

.db-inspector-actions { display: grid; }

/* --- Faction balance footer ---------------------------------------------- */

.db-balance {
  display: grid;
  grid-template-columns: minmax(200px, auto) minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  padding: 12px 18px;
  border: 1px solid var(--db-line);
  border-radius: 10px;
  background: var(--db-panel);
}
.db-balance-head { display: flex; align-items: center; gap: 10px; }
.db-balance-icon { font-size: 1.5rem; color: var(--neon-green); }
.db-balance-head strong {
  display: block;
  font-family: var(--font-sub);
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--neon-green);
}
.db-balance-bars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 6px 18px;
}
.db-balance-item { display: grid; grid-template-columns: minmax(0, 1fr) 60px 34px; gap: 8px; align-items: center; }
.db-balance-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  font-size: 0.76rem;
  color: var(--db-ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.db-balance-name i { width: 9px; height: 9px; border-radius: 2px; flex: 0 0 auto; }
.db-balance-track { height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.db-balance-track i { display: block; height: 100%; }
.db-balance-item strong { font-size: 0.76rem; text-align: right; color: var(--db-dim); }

/* --- Payout web overlay -------------------------------------------------- */

.db-overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(2, 6, 14, 0.86);
  backdrop-filter: blur(6px);
}
.db-overlay-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 12px;
  width: min(1280px, 100%);
  max-height: calc(100vh - 40px);
  padding: 16px 20px 18px;
  border: 1px solid var(--db-line-strong);
  border-radius: 12px;
  background: var(--db-panel-solid);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.db-overlay-head { display: flex; align-items: center; gap: 14px; }
.db-overlay-head h2 {
  margin: 2px 0 0;
  font-family: var(--font-heading);
  font-size: 1.3rem;
  font-weight: 800;
  color: #ffffff;
}
.db-overlay-modes { margin-left: auto; display: flex; gap: 2px; padding: 3px; border: 1px solid var(--db-line); border-radius: 8px; }

/* Flex, not grid: the diagram grows with the number of symbols and must scroll
   inside the panel. A grid row would compress the <svg> -- a replaced element
   whose height comes from its aspect ratio -- and the strips below it would
   then be drawn straight over the diagram. */
.db-web {
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.db-web > * { flex: 0 0 auto; }
.db-web-svg { width: 100%; height: auto; display: block; }
.db-web-empty { margin: 40px auto; color: var(--db-dim); text-align: center; }

/* Nodes and links. Hovering anything dims everything it does not touch. */
.web-node { cursor: default; }
.web-node:focus { outline: none; }
.web-node:focus .web-node-disc,
.web-node:focus .web-payer-box { stroke: var(--neon-cyan); stroke-width: 2; }
.web-column-head {
  fill: #8ea6b8;
  font-family: var(--font-sub), sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}
.web-node-disc {
  fill: #0b1a2c;
  stroke: var(--neon-cyan);
  stroke-width: 1.5;
}
.web-faction.is-empty .web-node-disc { stroke: #f3c667; stroke-dasharray: 4 4; }
.web-symbol { fill: #ffffff; }
.web-faction-label {
  fill: #ffffff;
  font-family: var(--font-sub), sans-serif;
  font-size: 13px;
  font-weight: 700;
}
.web-faction-supply {
  fill: #8ea6b8;
  font-family: var(--font-sub), sans-serif;
  font-size: 11px;
}
.web-faction-supply.is-empty { fill: #f3c667; }
.web-supply-track { fill: rgba(255, 255, 255, 0.09); }
.web-supply-fill { fill: var(--neon-cyan); opacity: 0.75; }

.web-payer-box { fill: #0a1626; stroke: rgba(120, 200, 255, 0.35); stroke-width: 1; }
.web-payer-edge { fill: #7d94a2; }
.web-payer[data-color="blue"] .web-payer-edge { fill: #2fa8ff; }
.web-payer[data-color="green"] .web-payer-edge { fill: #3fd08a; }
.web-payer[data-color="red"] .web-payer-edge { fill: #ff5d52; }
.web-payer[data-color="purple"] .web-payer-edge { fill: #b06bff; }
.web-payer-name { fill: #ffffff; font-family: var(--font-sub), sans-serif; font-size: 12.5px; font-weight: 700; }
.web-payer-rate { fill: #8ea6b8; font-family: var(--font-sub), sans-serif; font-size: 10.5px; }
.web-payer-copies { fill: #00f0ff; font-family: var(--font-heading), sans-serif; font-size: 11px; font-weight: 800; }

.web-link { fill: none; stroke: rgba(120, 200, 255, 0.35); stroke-width: 1.4; }
.web-link.is-dead { stroke: #f3c667; stroke-dasharray: 5 5; }
.web-rate rect { fill: #0a1626; stroke: rgba(120, 200, 255, 0.4); }
.web-rate text { fill: #cfe9f8; font-family: var(--font-heading), sans-serif; font-size: 10px; font-weight: 800; }
.web-rate.is-dead rect { stroke: #f3c667; }
.web-rate.is-dead text { fill: #f3c667; }

.db-web-svg.is-focused .web-node,
.db-web-svg.is-focused .web-link,
.db-web-svg.is-focused .web-rate { opacity: 0.2; transition: opacity 120ms ease; }
.db-web-svg.is-focused .is-lit { opacity: 1; }
.db-web-svg.is-focused .web-link.is-lit { stroke: var(--neon-cyan); stroke-width: 2.4; }

.db-web-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  padding-top: 8px;
  border-top: 1px solid var(--db-line);
  font-size: 0.72rem;
  color: var(--db-dim);
}
.db-web-legend span { display: flex; align-items: center; gap: 7px; }
.db-legend-disc { width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--neon-cyan); }
.db-legend-line { width: 20px; height: 0; border-top: 2px solid rgba(120, 200, 255, 0.6); }
.db-legend-line.is-dead { border-top-style: dashed; border-top-color: #f3c667; }

.db-web-chain { display: grid; gap: 5px; }
.db-web-chain h3 {
  margin: 0;
  font-family: var(--font-sub);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--db-dim);
}
.db-chain-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: 0.8rem; }
.db-chain-card {
  padding: 2px 10px;
  border: 1px solid var(--db-line);
  border-left: 3px solid var(--c-grey);
  border-radius: 6px;
  color: #ffffff;
}
.db-chain-card[data-color="blue"] { border-left-color: var(--c-blue); }
.db-chain-card[data-color="green"] { border-left-color: var(--c-green); }
.db-chain-card[data-color="red"] { border-left-color: var(--c-red); }
.db-chain-card[data-color="purple"] { border-left-color: var(--c-purple); }
.db-chain-arrow { color: var(--neon-cyan); }
.db-chain-note { color: var(--db-dim); font-size: 0.75rem; }
.db-chain-row.is-dead .db-chain-note { color: #f3c667; }

.db-ledger { min-height: 0; overflow: auto; }
.db-ledger-table th[scope="row"] { display: flex; align-items: center; gap: 8px; color: #ffffff; }
.db-ledger-table th[scope="row"] .db-faction-icon { width: 18px; height: 18px; flex: 0 0 18px; fill: #ffffff; }
.db-ledger-table td { padding: 6px 10px; border-bottom: 1px solid rgba(90, 160, 205, 0.1); vertical-align: middle; }
.db-ledger-table tr.is-broken { background: rgba(243, 198, 103, 0.08); }
.db-ledger-payer {
  display: inline-block;
  margin: 2px 4px 2px 0;
  padding: 1px 8px;
  border: 1px solid var(--db-line);
  border-left: 3px solid var(--c-grey);
  border-radius: 5px;
  font-size: 0.76rem;
}
.db-ledger-payer[data-color="blue"] { border-left-color: var(--c-blue); }
.db-ledger-payer[data-color="green"] { border-left-color: var(--c-green); }
.db-ledger-payer[data-color="red"] { border-left-color: var(--c-red); }
.db-ledger-payer[data-color="purple"] { border-left-color: var(--c-purple); }

/* --- Narrow ------------------------------------------------------------- */

@media (max-width: 1180px) {
  .db-bar { grid-template-columns: minmax(0, 1fr); }
  .db-stats { justify-content: start; }
  .db-balance { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 900px) {
  .db-bulk { margin-left: 0; }
  .db-hand-note { text-align: left; }
}

@media (max-width: 640px) {
  /* The card-plus-copy row stacks on a phone: two 200px+ columns don't fit
     beside the .db-overlay's own 20px side padding. */
  .db-inspection-top { grid-template-columns: minmax(0, 1fr); }
  .db-inspector-card { max-width: 240px; margin: 0 auto; }
  .db-inspector-inner { padding: 44px 16px 20px; }
}

@media (max-width: 560px) {
  .db-shell { width: calc(100vw - 16px); }
  .db-file-fields { grid-template-columns: minmax(0, 1fr); }
  .db-rail-cards { grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); }
  .db-overlay { padding: 8px; }
  .db-overlay-panel { padding: 12px; }
}