:root {
  color-scheme: dark;
  font-family: Inter, "Microsoft YaHei", "PingFang SC", sans-serif;
  background: #141716;
  color: #ebe7dc;
  --gold: #e0bd78;
  --muted: #b5b1a6;
  --panel: #202322;
  --border: #45443b;
}
* { box-sizing: border-box; }
body { margin: 0; }
.build-start { padding-block: 24px; }
.companion-page .wrap { width: auto; margin-inline: clamp(12px, 2vw, 24px); }
.build-controls { display: flex; flex-wrap: wrap; gap: 16px; }
.build-controls label { display: grid; gap: 6px; }
.build-layout { display: grid; grid-template-columns: minmax(210px, 270px) minmax(0, 1fr); gap: 24px; margin-top: 16px; }
#build-progression { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
#build-progression h2 { font-size: 1.05rem; margin: 0 0 8px; }
#build-progression select { max-width: 100%; }
.build-backgrounds, .build-levels ul { list-style: none; padding: 0; }
.build-backgrounds { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 16px; }
.build-backgrounds li { position: relative; }
.build-backgrounds button { padding: 5px 8px; font-size: .95rem; }
.build-background-preview { display: none; position: absolute; z-index: 2; top: 100%; left: 0; width: min(280px, 76vw); padding: 10px; border: 1px solid var(--border); border-radius: 5px; background: #282b29; font-size: .9rem; white-space: pre-line; box-shadow: 0 6px 18px #0006; }
.build-backgrounds li:hover .build-background-preview, .build-backgrounds li:focus-within .build-background-preview { display: block; }
#background-detail { width: min(640px, calc(100% - 32px)); max-height: 85vh; padding: 20px; background: var(--panel); color: inherit; border: 1px solid var(--border); border-radius: 6px; }
#background-detail::backdrop { background: #0009; }
.build-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.build-dialog-header h2 { margin: 0; font-size: 1.25rem; }
.build-dialog-header button { width: 36px; height: 36px; padding: 0; border-color: var(--border); background: transparent; color: var(--muted); font-size: 1.5rem; line-height: 1; }
#background-detail-content { white-space: pre-line; line-height: 1.55; }
#build-choice-controls:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.build-choice-list { list-style: none; padding: 0; }
.build-choice-list > li { display: flex; align-items: center; gap: 8px; padding: 4px; }
.build-choice-list small { display: block; color: var(--muted); }
#background-detail[open]:has(.build-loadout-picker) {
  display: flex; flex-direction: column; width: min(1320px, calc(100% - 24px)); max-width: none;
  height: calc(100dvh - 24px); max-height: none; padding: clamp(10px, 2vw, 20px);
}
#background-detail:has(.build-loadout-picker) > :is(header, #build-choice-controls) { flex: none; }
#background-detail:has(.build-loadout-picker) #background-detail-content { flex: 1; min-height: 0; margin-top: 12px; }
#build-loadout-filters:not([hidden]) { display: flex; flex: 0 0 100%; flex-wrap: wrap; align-items: end; gap: 8px; }
#build-loadout-filters label { display: grid; gap: 4px; color: var(--muted); font-size: .82rem; }
#build-loadout-filters select { max-width: 170px; }
#build-loadout-filters [role="status"] { align-self: center; color: var(--muted); font-size: .85rem; }
.build-choice-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: start; gap: 12px; margin-top: 12px; }
.build-choice-layout > * { margin: 0; max-height: 55vh; overflow: auto; border: 1px solid var(--border); border-radius: 4px; }
.build-choice-layout .build-choice-list > li { padding: 0; border-inline-start: 2px solid transparent; }
.build-choice-layout .build-choice-list > li + li { border-top: 1px solid var(--border); }
.build-choice-layout .build-choice-list > li:not(.build-clickable),
.build-choice-layout .build-clickable button { gap: 10px; padding: 5px 10px; }
.build-choice-layout .build-clickable button { border: 0; border-radius: 0; background: #282c29; font-weight: 600; }
.build-choice-layout .build-choice-list img { width: 32px; height: 32px; flex-basis: 32px; }
.build-choice-layout .build-choice-list > li:not(.build-clickable) { color: #aaa49a; background: #191b1a; }
.build-choice-layout .build-choice-list > li:not(.build-clickable) img { opacity: .55; filter: grayscale(.8); }
.build-choice-layout .build-choice-unavailable-label { flex: none; margin-inline-start: auto; padding: 1px 5px; border: 1px solid #69443d; border-radius: 3px; background: #2b201e; color: #e8aaa0; font-size: .72rem; }
.build-choice-layout :focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
#build-choice-preview { padding: 14px; background: #171a19; overflow-wrap: anywhere; }
#build-choice-preview h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; color: var(--gold); font-size: 1rem; }
#build-choice-preview h3 img { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 3px; }
#build-choice-preview .build-icon-missing { visibility: hidden; }
#build-choice-preview p { margin: 0; }
.build-choice-condition { margin-top: 16px; padding: 10px 12px; border: 1px solid #81514a; border-radius: 4px; background: #2b201e; }
.build-choice-condition h4 { margin: 0 0 5px; color: #e8aaa0; font-size: .9rem; }
#build-choice-preview .build-choice-condition-status { margin-top: 5px; color: var(--muted); font-size: .85rem; }
.build-choice-layout .build-choice-list > .build-previewed { border-inline-start-color: var(--gold); background: #353126; }
.build-choice-layout .build-previewed button { background: transparent; }
.build-choice-layout .build-choice-list > .build-previewed:not(.build-clickable) { border-inline-start-color: #bc8177; background: #28201f; }
@media (max-width: 640px) {
  .build-choice-layout { grid-template-columns: minmax(0, 1fr); }
  .build-choice-layout > .build-choice-list { max-height: 34vh; }
  #build-choice-preview { max-height: 24vh; }
}
.build-levels ul > li.build-clickable { padding: 0; }
.build-clickable button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 4px; text-align: left; }
.build-choice-list img { flex: 0 0 48px; object-fit: contain; }
.build-choice-list .build-icon-missing { visibility: hidden; }
.build-levels ul li { background: var(--panel); border-radius: 4px; margin: 4px 0; }
.build-levels { padding-left: 2rem; }
.build-levels > li { padding-left: 4px; margin-bottom: 12px; }
.build-levels ul > li { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 4px 12px 4px 4px; }
.build-levels img { display: block; flex: 0 0 48px; object-fit: contain; border-radius: 3px; background: #171a19; }
.build-levels li.build-open-slot { background: transparent; border: 1px solid var(--border); color: var(--muted); }
.build-levels .build-open-slot img { opacity: .65; background: transparent; }
.build-levels img.build-icon-missing { visibility: hidden; }
@media (max-width: 1050px) { #build-progression { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } }
@media (max-width: 720px) { .build-layout { grid-template-columns: 1fr; gap: 16px; } }
#start-summary { margin: 0; font-weight: 600; }
.build-stats-title { margin: 0 0 7px; color: var(--gold); font-size: 1rem; }
.build-stats { display: grid; gap: 4px; margin: 0; }
.build-stats > div { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; background: var(--panel); border-radius: 4px; padding: 6px 10px; }
.build-stats dt { font-size: .95rem; color: var(--muted); }
.build-stats dd { margin: 0; font-size: 1.05rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.build-loadout-title { margin-top: 20px; }
#active-weapon-group-label:not([hidden]) { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
.build-loadout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.build-loadout button { display: grid; align-content: start; gap: 3px; min-height: 58px; padding: 6px 8px; text-align: left; overflow-wrap: anywhere; }
.build-loadout button small, .build-loadout p, .build-choice-list .build-unavailable { color: var(--muted); }
.build-loadout button > span { min-width: 0; }
.build-loadout button small { display: block; }
.build-loadout button.build-equipped-slot { grid-template-columns: 28px minmax(0, 1fr); gap: 6px; border-color: #80663f; background: #302920; }
.build-equipped-slot img { width: 28px; height: 28px; object-fit: contain; }
.build-equipped-slot img.build-icon-missing { visibility: hidden; }
.build-loadout button .build-slot-modifiers { color: var(--gold); }
.build-stat-bonus, .build-loadout-delta { color: #9dd9bb; }
.build-stat-penalty { color: #e8aaa0; }
.build-stats dd small { font-size: .75em; }
#loadout-status { margin: 0 0 8px; color: #9dd9bb; font-size: .9rem; }
#loadout-status:empty { margin: 0; }
.build-loadout-picker .build-loadout-unavailable button { color: #c2b5af; }
.build-loadout-picker .build-loadout-unavailable small { color: #e8aaa0; }
.build-choice-layout.build-loadout-picker { height: 100%; align-items: stretch; margin-top: 0; }
.build-loadout-picker > .build-choice-list, .build-loadout-picker #build-choice-preview { max-height: none; }
.build-loadout-picker button > span { min-width: 0; overflow-wrap: anywhere; }
.build-loadout-picker #build-choice-preview { background: var(--panel); }
.build-loadout-picker #build-choice-preview > h3 { margin-bottom: 4px; font-size: 1.25rem; }
.build-loadout-picker #build-choice-preview > .entry-type { margin-bottom: 12px; }
.build-loadout-picker #build-choice-preview .entry-section p { white-space: pre-wrap; }
.build-loadout-picker #build-choice-preview .entry-section a { color: var(--gold); }
.build-loadout-picker #build-choice-preview .build-loadout-delta { margin-top: 10px; }
.build-loadout-picker #build-choice-preview .build-choice-condition { margin-top: 10px; color: #e8aaa0; }
.build-loadout-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.build-loadout-actions button:first-child:not(:disabled) { color: #201a13; background: var(--gold); }
@media (max-width: 640px) {
  .build-choice-layout.build-loadout-picker { grid-template-rows: minmax(0, 2fr) minmax(0, 3fr); }
}
.build-loadout p { grid-column: 1 / -1; margin: 0; }
.build-choice-list .build-unavailable { display: block; padding: 7px 8px; }
.build-choice-list .build-choice-heading { padding: 8px; color: var(--gold); }
.wrap { width: min(1320px, calc(100% - 48px)); margin-inline: auto; }
.masthead { background: linear-gradient(115deg, #28251f, #171c1b 72%); border-bottom: 1px solid #80663f; padding: 20px 0 24px; }
.catalog-masthead {
  background:
    linear-gradient(90deg, #101312 0%, #101312e8 24%, #10131280 45%, transparent 72%),
    linear-gradient(0deg, #101312e0, transparent 65%),
    #101312 url("rogue-trader-hero.jpg") center 37% / cover no-repeat;
  padding-bottom: clamp(32px, 5vw, 72px);
}
.masthead .site-nav { padding: 0; margin-bottom: 24px; }
.catalog-masthead .site-nav { margin-bottom: clamp(16px, 2.2vw, 30px); }
.site-nav a {
  padding: 8px 12px;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--muted);
  text-decoration: none;
}
.site-nav a:hover, .site-nav a[aria-current="page"] { border-color: #80663f; background: #211d17; color: var(--gold); }
.companion-page .masthead h1 { margin-bottom: 0; }
.catalog-logo {
  display: block;
  width: clamp(148px, 17vw, 220px);
  height: auto;
  margin-bottom: 10px;
  filter: drop-shadow(0 3px 6px #000b);
}
.catalog-title { margin-bottom: 18px; line-height: 1.18; }
.catalog-title > span {
  display: block;
  width: fit-content;
  font-family: "Noto Serif SC", "Songti SC", SimSun, "Microsoft YaHei", serif;
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 900;
  letter-spacing: .12em;
  color: #e9d5ab;
  filter: drop-shadow(0 1px #654425) drop-shadow(0 3px 6px #000d);
}
@supports (background-clip: text) {
  .catalog-title > span {
    background: linear-gradient(180deg, #fff1cb 18%, #e5cc98 53%, #b78754 56%, #d7b47d 83%);
    background-clip: text;
    color: transparent;
  }
}
.catalog-title > small {
  display: block;
  margin-top: 8px;
  color: #ded0b5;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-shadow: 0 2px 8px #000;
}
.catalog-masthead form { max-width: 520px; }
.catalog-masthead input { border-color: #74634b; }
.catalog-masthead form :is(input, button) { min-height: 44px; }
h1 { margin: 0 0 22px; font-size: clamp(1.8rem, 5vw, 2.65rem); letter-spacing: .06em; }
form { display: flex; gap: 8px; max-width: 650px; }
input, select, button { font: inherit; border: 1px solid var(--border); border-radius: 4px; color: inherit; background: #282b29; padding: 8px 12px; }
input { flex: 1; min-width: 0; background: #161a19; }
input::placeholder { color: var(--muted); }
button { cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--gold); }
button:disabled { opacity: .5; cursor: default; }
button[aria-pressed=true], form button { background: var(--gold); color: #201a13; border-color: var(--gold); }
nav, #filters { display: flex; flex-wrap: wrap; gap: 8px; }
nav { padding: 20px 0 12px; }
.catalog-controls { margin: 18px 0; padding: 0 14px; border: 1px solid var(--border); border-radius: 6px; background: #1b1f1d; }
#categories { gap: 4px; padding: 8px 0 0; border-bottom: 1px solid var(--border); }
#categories button {
  min-height: 42px;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 4px 4px 0 0;
  background: transparent;
  color: var(--muted);
}
#categories button:hover { background: #292921; color: #ebe7dc; }
#categories button[aria-pressed="true"] { background: #332b21; color: var(--gold); border-bottom-color: var(--gold); }
#filter-toggle { display: none; }
#filters { align-items: end; padding: 12px 0; }
#filters label { display: grid; gap: 4px; font-size: .82rem; color: var(--muted); }
#filters label[hidden] { display: none; }
#filters select { max-width: 170px; min-height: 40px; }
#filters select:has(option:checked:not([value=""])) { border-color: #9b7950; color: var(--gold); background: #302920; }
#reset-filters {
  min-height: 40px;
  border-color: transparent;
  color: var(--muted);
  background: transparent;
}
#reset-filters:hover { color: var(--gold); text-decoration: underline; }
.layout { display: grid; grid-template-columns: minmax(235px, 1fr) minmax(0, 2fr); gap: 16px; align-items: start; }
.results, article { border: 1px solid var(--border); background: var(--panel); border-radius: 6px; min-width: 0; }
#count, #pages { margin: 0; padding: 12px 14px; color: var(--muted); font-size: .88rem; }
#count { font-variant-numeric: tabular-nums; font-weight: 600; }
#results { list-style: none; margin: 0; padding: 0; }
#results a { display: grid; gap: 8px; padding: 10px 14px 10px 11px; border-top: 1px solid #353831; border-inline-start: 3px solid transparent; color: inherit; text-decoration: none; overflow-wrap: anywhere; }
#results a:hover, #results a[aria-current=true] { background: #353126; color: var(--gold); }
#results a[aria-current=true] { border-inline-start-color: var(--gold); }
.result-heading, .entry-heading { display: flex; align-items: center; gap: 10px; }
.result-name { display: block; font-weight: 650; line-height: 1.4; }
#results small { display: block; margin-top: 2px; color: var(--muted); font-size: .76rem; line-height: 1.45; }
.catalog-icon { width: 1.45em; height: 1.45em; object-fit: contain; vertical-align: middle; margin-inline-end: .4em; }
.result-heading > .catalog-icon, .entry-heading > .catalog-icon {
  flex: none;
  margin: 0;
  width: 36px;
  height: 36px;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 4px;
  background: #181b19;
}
.result-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 6.4rem)); gap: 5px 8px; margin: 0; }
.result-stats > div { display: flex; justify-content: space-between; gap: 4px; align-items: baseline; padding: 3px 7px; background: #171a18; border: 1px solid #3c4037; border-radius: 4px; }
.result-stats dt { color: var(--muted); font-size: .75rem; }
.result-stats-wide { grid-template-columns: repeat(auto-fit, minmax(5.25rem, 1fr)); }
.result-stats-wide dt { white-space: nowrap; }
.result-stats dd { color: var(--gold); font-size: .83rem; font-weight: 650; font-variant-numeric: tabular-nums; margin: 0; white-space: nowrap; }
#pages { display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--border); }
article { padding: 22px clamp(16px, 3vw, 34px); min-height: 260px; line-height: 1.75; overflow-wrap: anywhere; }
article h2 { margin: 0; font-size: 1.65rem; line-height: 1.35; }
.entry-heading { gap: 14px; }
.entry-heading > .catalog-icon { width: 58px; height: 58px; padding: 5px; }
.entry-back { display: none; }
article h3 { color: var(--gold); font-size: 1rem; margin: 18px 0 3px; }
article p { margin: 0; white-space: pre-wrap; }
article details { margin-top: 22px; color: var(--muted); }
article summary { cursor: pointer; }
a { color: var(--gold); text-underline-offset: 3px; }
footer { color: var(--muted); padding: 18px 0; font-size: .82rem; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 700px) {
  .wrap { width: calc(100% - 24px); }
  .catalog-masthead {
    background-image:
      linear-gradient(90deg, #101312ef, #10131280 70%, #10131230),
      linear-gradient(0deg, #101312e8, transparent 82%),
      url("rogue-trader-hero.jpg");
    background-position: center, center, 76% center;
  }
  .catalog-controls { padding-inline: 10px; }
  #categories { gap: 2px; }
  #categories button { min-height: 44px; padding-inline: 9px; font-size: .9rem; }
  #filter-toggle {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin-block: 8px;
    background: #242824;
  }
  #filter-toggle::after {
    content: "";
    width: 6px;
    height: 6px;
    margin-inline-start: 12px;
    border-inline-end: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
  }
  #filter-toggle[aria-expanded="true"]::after { transform: translateY(2px) rotate(225deg); }
  #filter-count { color: var(--gold); font-size: .85em; white-space: pre; }
  #filter-toggle[aria-expanded="false"] + #filters { display: none; }
  #filters { padding-top: 4px; }
  .layout { grid-template-columns: 1fr; }
  #entry { min-height: 0; scroll-margin-top: 12px; }
  #entry:not(.entry-open), .layout:has(.entry-open) > .results { display: none; }
  .entry-back { display: inline-block; min-height: 44px; margin-bottom: 16px; color: var(--gold); }
}
#pages[hidden] { display: none; }
#subcategories:not(:empty) { padding: 12px 0; border-bottom: 1px solid var(--border); }
.subcategory-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.subcategory-row + .subcategory-row { margin-top: 10px; }
.subcategory-row > span { color: var(--muted); font-size: .85rem; margin-right: 5px; }
.subcategory-row button { min-height: 36px; font-size: .88rem; padding: 6px 10px; }
.subcategory-row button small { margin-inline-start: 3px; color: var(--muted); font-size: .85em; font-variant-numeric: tabular-nums; }
.subcategory-row button[aria-pressed="true"] { border-color: #9b7950; background: #302920; color: var(--gold); }
.subcategory-row button[aria-pressed="true"] small { color: #d4bc95; }
.entry-type { color: var(--muted); font-size: .9rem; margin-top: 6px; }
.entry-section { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.entry-section h3 { margin: 0 0 8px; }
.project-rewards { list-style: none; margin: 0; padding: 0; }
.project-rewards li + li { margin-top: .35em; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)); gap: 8px; margin: 0; }
.stat-grid > div { background: #282b27; border: 1px solid var(--border); border-radius: 4px; padding: 8px 12px; }
.stat-grid dt { color: var(--muted); font-size: .8rem; }
.stat-grid dd { margin: 0; font-size: 1.25rem; font-weight: 650; font-variant-numeric: tabular-nums; }
#entry .stat-grid > div { background: #302d24; }
#entry .stat-grid dd { color: var(--gold); }
.attack-list { list-style: none; margin: 0; padding: 0; }
.attack-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding: 7px 0; }
.attack-list li + li { border-top: 1px solid var(--border); }
.attack-list li > span:not(.attack-cost) { flex: 1 1 160px; }
.attack-cost { margin-left: auto; padding: 0 8px; border: 1px solid var(--border); border-radius: 4px; color: var(--gold); white-space: nowrap; }