/* Army builder. Builds on style.css (colours, .card, .chip, .badge, .sub2, .hint). */
body { --race: var(--terran); }
body[data-race="protoss"] { --race: var(--protoss); }
body[data-race="zerg"] { --race: var(--zerg); }


.army-main { max-width: 1400px; }
.muted { color: var(--muted); }
.small { font-size: 12px; }
.lbl small, .gas-note { color: var(--muted); font-weight: 400; }
.gas-note b { color: var(--good); }

button { font: inherit; }
.btn { background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 8px; padding: 6px 12px; cursor: pointer; }
.btn:hover { border-color: var(--race); }
.btn.ghost { background: transparent; color: var(--muted); }
.link { background: none; border: 0; padding: 0; color: var(--def); cursor: pointer; font-size: 12px; }
.link:hover { text-decoration: underline; }
.link.danger { color: var(--bad); }
.help-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel2); color: var(--muted); font-size: 11px; cursor: pointer; padding: 0; margin-left: 4px; }

/* Setup */
.setup-row { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-end; margin-bottom: 12px; }
.setup-block .lbl { display: flex; align-items: center; }
.setup-block.actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.seg { display: flex; flex-wrap: wrap; gap: 4px; }
.seg-btn { background: var(--panel2); border: 1px solid var(--line); color: var(--text); padding: 6px 12px; border-radius: 8px; cursor: pointer; }
.seg-btn small { color: var(--muted); }
.seg-btn.on { border-color: var(--race); box-shadow: inset 0 0 0 1px var(--race); }
.seg-btn.terran.on { color: var(--terran); }
.seg-btn.protoss.on { color: var(--protoss); }
.seg-btn.zerg.on { color: var(--zerg); }
.limits { display: flex; align-items: center; gap: 8px; }
.limits input { width: 96px; background: var(--panel2); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px; }
.help-panel { background: #10161f; border: 1px solid var(--line); border-left: 3px solid var(--race); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }
.help-panel ol { margin: 0; padding-left: 18px; }
.help-panel li { margin-bottom: 4px; }

.fc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.fc { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; }
.fc.on { border-color: var(--race); box-shadow: inset 0 0 0 1px var(--race); }
.fc-main { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; width: 100%; background: none; border: 0; color: var(--text); text-align: left; padding: 0; cursor: pointer; }
.fc-tag { font-size: 11.5px; color: var(--muted); }
.fc.on .fc-tag { color: var(--race); }
.res { font-size: 11.5px; color: var(--muted); }
.chips { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.slot-chip { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #1d2638; border: 1px solid var(--line); white-space: nowrap; }
.s-Core { --slot: #6fc3ff; }
.s-Elite { --slot: #f0a43a; }
.s-Support { --slot: #4fd68a; }
.s-Air { --slot: #b89cff; }
.s-Hero { --slot: #ff7aa8; }
.slot-chip[class*="s-"] { color: var(--slot); border-color: color-mix(in srgb, var(--slot) 40%, transparent); }

/* Summary */
.summary { position: sticky; top: 0; z-index: 4; display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px;
  background: rgba(11, 15, 23, .94); backdrop-filter: blur(6px); padding: 8px 0; margin-bottom: 8px; border-bottom: 1px solid var(--line); }
.meter { background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 6px 8px; min-width: 0; }
.m-top { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--muted); }
.m-top b { color: var(--text); font-size: 16px; }
.m-top b small { color: var(--muted); font-weight: 400; font-size: 12px; }
.m-track { height: 5px; background: #1d2638; border-radius: 3px; margin-top: 4px; overflow: hidden; }
.m-fill { height: 100%; background: var(--slot, var(--race)); border-radius: 3px; }
.meter.minerals { --slot: #6fc3ff; }
.meter.gas { --slot: var(--good); }
.meter.full .m-top b { color: var(--good); }
.meter.over { border-color: var(--bad); }
.meter.over .m-top b { color: var(--bad); }
.meter.over .m-fill { background: var(--bad); }
.totals { grid-column: span 2; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; font-size: 12px; color: var(--muted); padding: 0 4px; }
.totals b { color: var(--text); font-size: 15px; margin-left: 3px; }
.status { padding: 3px 10px; border-radius: 999px; font-weight: 600; text-decoration: none; }
.status.ok { background: #143524; color: var(--good); }
.status.bad { background: #3a1616; color: var(--bad); }

/* Two columns */
.army-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .army-grid { grid-template-columns: 1fr; } .roster { order: -1; } .totals { grid-column: 1 / -1; } }
.col-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.col-head .side-title { margin: 0; }
.tabs { display: flex; gap: 4px; }
.tab { background: none; border: 1px solid var(--line); color: var(--muted); border-radius: 999px; padding: 3px 12px; cursor: pointer; font-size: 12px; }
.tab.on { color: var(--text); border-color: var(--race); }
.search { width: 100%; background: var(--panel); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; margin-bottom: 8px; }
.grp { font-size: 12px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--slot); margin: 14px 0 6px; display: flex; justify-content: space-between; }
.grp small { color: var(--muted); letter-spacing: 0; text-transform: none; font-weight: 400; }
.grp.over small { color: var(--bad); font-weight: 600; }

/* Catalog unit */
.cu, .ru { display: flex; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px; margin-bottom: 8px; }
.cu.has { border-color: color-mix(in srgb, var(--race) 45%, var(--line)); }
.cu img, .ru img { width: 58px; height: 112px; object-fit: cover; object-position: top; border-radius: 6px; background: var(--panel2); flex: none; }
.cu-body, .ru-body { flex: 1; min-width: 0; }
.cu-name { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; }
.count { font-size: 11px; color: var(--race); }
.meta { margin-bottom: 3px; }
.badge.sub { background: #1c2340; color: #a9b8ff; }
.statline { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: 12px; margin: 4px 0; }
.statline small { color: var(--muted); font-size: 10.5px; text-transform: uppercase; }
.add-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 4px; }
.add { background: #182235; border: 1px solid color-mix(in srgb, var(--race) 50%, var(--line)); color: var(--text); padding: 4px 9px; border-radius: 7px; cursor: pointer; font-size: 12.5px; }
.add:hover { background: color-mix(in srgb, var(--race) 18%, #182235); }
.add small { color: var(--muted); }
.add.minus { padding: 4px 10px; }
.taken { font-size: 12px; color: var(--warn); }
.profiles, .sizes { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; margin: 5px 0; font-size: 12px; }
.profiles .chip.on, .sizes .chip.on { border-color: var(--race); color: var(--race); }
.chip small { color: var(--muted); }
.details { border-top: 1px solid #1d2638; margin-top: 6px; padding-top: 4px; font-size: 12px; }
.details .sub2 { margin: 8px 0 3px; }
.wpn, .abl { margin-bottom: 5px; }
.kw { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.kw span { font-size: 10.5px; padding: 0 5px; border-radius: 4px; background: #2a2140; color: #d2b8ff; }
.cost { color: var(--protoss); font-size: 12px; white-space: nowrap; }

/* Catalog card */
.cc { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; }
.cc.has { border-color: color-mix(in srgb, var(--race) 45%, var(--line)); }
.cc-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.cc-act { display: flex; gap: 4px; flex: none; }
.cc .chips { margin: 6px 0 2px; }
.boost-names { font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.boosts { margin-top: 6px; display: grid; gap: 6px; font-size: 12.5px; }
.boost { background: #10161f; border-radius: 6px; padding: 6px 8px; }
.who { color: var(--muted); font-size: 11.5px; margin-top: 3px; }
.who .mine { color: var(--good); font-weight: 600; }

/* Issues */
.issues { display: grid; gap: 6px; margin-bottom: 10px; scroll-margin-top: 120px; }
.issue { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; border-radius: 8px; font-size: 13px; background: var(--panel); border: 1px solid var(--line); }
.issue .ico { flex: none; width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; margin-top: 1px; }
.issue.error { border-color: #5a2222; background: #1f1214; }
.issue.error .ico { background: var(--bad); color: #000; }
.issue.warn { border-color: #5a4a1a; }
.issue.warn .ico { background: var(--warn); color: #000; }
.issue.info { color: var(--muted); font-size: 12px; padding: 5px 10px; }
.issue.info .ico { background: #1d2638; color: var(--muted); }
.fixes { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.fix { background: #142a1e; border: 1px solid #23573a; color: var(--good); border-radius: 6px; padding: 3px 8px; cursor: pointer; font-size: 12px; text-align: left; }
.fix:hover { background: #18382a; }

/* Roster */
.rfc .sub2:first-child { margin-top: 0; }
.rfc .sub2 small { text-transform: none; letter-spacing: 0; }
.rc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 5px 0; border-top: 1px solid #1d2638; }
.rc.bad b { color: var(--bad); }
.rc .cost { margin-left: auto; }
.x { background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; padding: 0 4px; line-height: 1; }
.x:hover { color: var(--bad); }
.ru.bad { border-color: #5a2222; }
.ru-head { display: flex; justify-content: space-between; gap: 8px; }
.ru-cost { text-align: right; flex: none; }
.ru-cost b { font-size: 17px; color: var(--protoss); }
.ru-cost small { color: var(--muted); }
.ru-cost .muted { font-size: 11px; }
.ru-issue { font-size: 12px; margin: 4px 0; padding: 3px 8px; border-radius: 5px; }
.ru-issue.error { background: #2a1416; color: #ff9c9c; }
.ru-issue.warn { background: #2a2414; color: var(--warn); }
.upgs { display: grid; gap: 2px; margin: 6px 0; }
.upg { display: flex; align-items: center; gap: 6px; font-size: 12.5px; padding: 3px 6px; border-radius: 6px; cursor: pointer; }
.upg:hover { background: #172031; }
.upg.on { background: #172031; }
.upg.on .u-name { color: var(--race); }
.upg .cost { margin-left: auto; }
.upg .badge { font-size: 9.5px; }
.ru-act { display: flex; gap: 14px; margin-top: 4px; }
.big-empty { padding: 24px; text-align: center; border: 1px dashed var(--line); border-radius: 10px; }

.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--panel2); border: 1px solid var(--race); color: var(--text);
  padding: 7px 16px; border-radius: 999px; font-size: 13px; z-index: 10; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); }

@media (max-width: 600px) {
  main.army-main { padding: 10px 16px; }
  .setup-block.actions { margin-left: 0; }
  .summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .totals { grid-column: 1 / -1; }
  .cu img, .ru img { width: 46px; height: 92px; }
}
@media (max-width: 600px) {
  .summary { gap: 5px; padding: 6px 0; }
  .meter { padding: 4px 6px; }
  .m-top { font-size: 11px; }
  .m-top b { font-size: 14px; white-space: nowrap; }
  .m-top b small { font-size: 11px; }
}

/* Keyword and card pop-ups */
.kwd { cursor: help; }
.kw .kwd { border-bottom: 1px dotted #a68bd8; }
.kwd.inline { color: #d2b8ff; border-bottom: 1px dotted #a68bd8; }
.badge.kwd { border-bottom: 1px dotted var(--muted); }
.has-pop { cursor: help; border-bottom: 1px dotted var(--muted); }
.fix-wrap { display: inline-flex; align-items: stretch; }
.fix-wrap .fix { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.info { background: #142a1e; border: 1px solid #23573a; border-left: 0; color: var(--good); border-radius: 0 6px 6px 0; padding: 0 8px; cursor: help; font-size: 12px; font-style: italic; font-weight: 700; }
.pop { position: fixed; z-index: 20; background: #161f2f; border: 1px solid #3a4a68; border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .6); max-height: calc(60vh / var(--z)); overflow-y: auto; }
.pop p { margin: 0 0 6px; }
.pop p:last-child { margin-bottom: 0; }
.pop-title { font-weight: 700; margin-bottom: 6px; display: flex; justify-content: space-between; gap: 8px; color: var(--text); }
.pop .chips { margin-bottom: 6px; }
.pop-boost { background: #10161f; border-radius: 6px; padding: 6px 8px; margin-top: 6px; }

/* Skills that help other units in the list */
.syn { font-size: 12px; color: var(--muted); margin: 3px 0; }
.syn b { color: var(--good); font-weight: 600; }
.syn-l { color: var(--text); }
#pop2 { z-index: 21; border-color: #5a4a80; }

/* Catalog filters */
.filters { display: grid; gap: 5px; margin-bottom: 8px; }
.filters:empty { display: none; }
.frow { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; font-size: 12px; }
.frow > .muted { width: 34px; flex: none; }
.fchip { padding: 2px 9px; }
.fchip[class*="s-"] { color: var(--slot); }
.fchip.on { border-color: var(--race); color: var(--race); background: color-mix(in srgb, var(--race) 14%, var(--panel2)); }
.fchip[class*="s-"].on { border-color: var(--slot); color: var(--slot); background: color-mix(in srgb, var(--slot) 14%, var(--panel2)); }
.chip:disabled { opacity: .35; cursor: not-allowed; }
.s-Other { --slot: #9aa7bd; }
.syn .mine { color: var(--good); font-weight: 600; }
.auto-note { font-size: 11.5px; color: var(--good); margin-top: 2px; }

/* Print sheet: only #print is printed, black on white, two dense columns */
#print { display: none; }
@media print {
  @page { size: A4; margin: 9mm; }
  body { background: #fff !important; color: #000; font: 7.6pt/1.3 "Segoe UI", Roboto, Arial, sans-serif; padding: 0 !important; }
  body > *:not(#print) { display: none !important; }
  #print { display: block; color: #000; }
  .p-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; border-bottom: 1.5pt solid #000; padding-bottom: 3pt; margin-bottom: 4pt; }
  .p-top span { display: block; }
  .p-title { font-size: 11pt; }
  .p-code { font-size: 6.5pt; text-align: right; word-break: break-all; max-width: 45%; color: #333; }
  .p-err { border: 1pt solid #000; padding: 2pt 4pt; margin-bottom: 4pt; font-weight: 600; }
  .p-cols { column-count: 2; column-gap: 5mm; column-rule: .5pt solid #bbb; }
  .p-unit, .p-card, .p-kw { break-inside: avoid; }
  .p-unit, .p-card { border-bottom: .5pt solid #999; padding: 2pt 0 3pt; }
  .p-h { display: flex; justify-content: space-between; gap: 6px; align-items: baseline; }
  .p-h b { font-size: 8.6pt; }
  .p-h span, .p-abl span { color: #444; font-size: 6.8pt; }
  .p-stats { margin: 1pt 0; }
  .p-w { width: 100%; border-collapse: collapse; margin: 1pt 0 2pt; font-size: 6.9pt; }
  .p-w th { text-align: left; font-weight: 600; border-bottom: .5pt solid #000; padding: 0 2pt 0 0; }
  .p-w td { padding: .5pt 2pt 0 0; vertical-align: top; border-bottom: .3pt solid #ddd; }
  .p-abl { margin: 1pt 0; }
  .p-sec { font-weight: 700; text-transform: uppercase; letter-spacing: 1pt; font-size: 7pt; margin: 4pt 0 1pt; border-bottom: 1pt solid #000; break-after: avoid; }
  .p-kw { margin: .5pt 0; }
}

/* How a skill is used */
.act { display: inline-block; font-size: 10.5px; font-weight: 700; padding: 0 7px; border-radius: 4px; letter-spacing: .3px; white-space: nowrap; vertical-align: 1px; }
.act-passive { background: #1f2a44; color: #9fb6ff; border: 1px solid #3a4f86; }
.act-active { background: #123b25; color: #5ff09a; border: 1px solid #23794a; }
.act-reaction { background: #45270f; color: #ffb35c; border: 1px solid #8a5420; }
.act-other { background: #1d2638; color: var(--muted); }
.upg .act { font-size: 9.5px; padding: 0 5px; }
@media print {
  .act { background: none !important; color: #000 !important; border: .6pt solid #000 !important; font-size: 6.2pt; padding: 0 2pt; border-radius: 2pt; }
  .act-active { border-width: 1pt !important; }
  .act-reaction { border-style: dashed !important; }
}

/* Unit details: weapons, abilities and upgrades as distinct sections */
.details { border-top: 0; padding-top: 0; margin-top: 8px; display: grid; gap: 8px; }
.dsec { border: 1px solid var(--line); border-left: 3px solid var(--sec); border-radius: 8px; background: #10161f; padding: 6px 8px 4px; }
.dsec h5 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--sec); display: flex; justify-content: space-between; }
.dsec h5 small { color: var(--muted); letter-spacing: 0; }
.d-weapons { --sec: #ff8a5c; }
.d-abilities { --sec: #7fb2ff; }
.d-upgrades { --sec: #f3c74e; }
.dsec .item, .dsec > .wpn { padding: 5px 0; border-top: 1px solid #1d2638; }
.dsec h5 + .item, .dsec h5 + .wpn { border-top: 0; padding-top: 0; }
.item-head { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; margin-bottom: 2px; }
.item .wpn { margin-top: 3px; }
.wpn-name { font-weight: 600; }
.wcells { display: flex; flex-wrap: wrap; gap: 3px; margin: 3px 0; }
.wcell { display: inline-flex; flex-direction: column; align-items: center; min-width: 40px; padding: 1px 6px; border-radius: 5px; background: #182235; font-weight: 600; font-size: 12px; line-height: 1.2; }
.wcell small { font-size: 9px; color: var(--muted); font-weight: 400; text-transform: uppercase; letter-spacing: .4px; }
.sprof { display: flex; flex-wrap: wrap; gap: 3px 4px; align-items: center; font-size: 11.5px; margin: 3px 0; }
.sprof > small { color: var(--muted); font-size: 10.5px; text-transform: uppercase; margin-right: 2px; }
.spt { background: #182235; border: 1px solid var(--line); border-radius: 999px; padding: 0 7px; color: var(--muted); }
.spt b { color: var(--text); font-weight: 600; }
.item .wpn-name { display: none; }

/* Upgrade picker in the list: two columns, details in a pop-up */
.upgs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 6px; }
@media (max-width: 480px) { .upgs { grid-template-columns: 1fr; } }
.upg { border: 1px solid #1d2638; align-items: flex-start; }
.upg.on { border-color: color-mix(in srgb, var(--race) 45%, var(--line)); }
.upg input { margin-top: 2px; }
.u-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.u-name { overflow: hidden; text-overflow: ellipsis; }
.u-note { font-size: 10.5px; color: var(--muted); }
.upg .act { align-self: center; }
.upg .cost { margin-left: 0; align-self: center; }
.pop .wpn-name { display: none; }

/* Phase a skill can be used in */
.phase { display: inline-block; font-size: 10.5px; padding: 0 7px; border-radius: 4px; margin-left: 4px; white-space: nowrap; vertical-align: 1px; border: 1px dashed currentColor; }
.ph-movement { color: #5fd3e8; }
.ph-assault { color: #ff8a7a; }
.ph-combat { color: #d39bff; }
.ph-any { color: var(--muted); }
@media print { .phase { color: #000 !important; border: .5pt dotted #000; font-size: 6.2pt; padding: 0 2pt; margin-left: 2pt; } }

/* Header toolbar */
.top-inner { max-width: var(--page-max); margin: 0 auto; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 24px; flex-wrap: wrap; }
.top .sub { margin-bottom: 8px; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.tgroup { display: inline-flex; border: 1px solid var(--line); border-radius: 9px; overflow: hidden; background: var(--panel2); }
.tgroup .tbtn { border: 0; border-radius: 0; }
.tgroup .tbtn + .tbtn { border-left: 1px solid var(--line); }
.tbtn { display: inline-flex; align-items: center; gap: 6px; background: var(--panel2); border: 1px solid var(--line); color: var(--text); border-radius: 9px; padding: 6px 12px; cursor: pointer; font-size: 13px; white-space: nowrap; }
.tbtn:hover { background: color-mix(in srgb, var(--race) 16%, var(--panel2)); }
.tbtn .ic { width: 18px; height: 18px; display: inline-grid; place-items: center; border-radius: 50%; font-size: 11px; background: #0e1520; color: var(--race); flex: none; }
.tbtn.help .ic { font-weight: 700; }
.tbtn.danger { background: transparent; color: var(--muted); }
.tbtn.danger:hover { color: var(--bad); border-color: #5a2222; background: #1f1214; }
.tbtn.danger .ic { color: var(--bad); }

/* Responsive layout for desktop monitors (1280px up to 4K) */
:root { --page-max: 1500px; }
.army-main { max-width: var(--page-max); }
#roster { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 10px; align-items: start; }
#roster > :not(.ru) { grid-column: 1 / -1; }
@media (min-width: 1700px) {
  :root { --page-max: 2100px; }
}
@media (min-width: 2300px) {
  :root { --page-max: 2700px; }
  body { font-size: 15px; }
  #roster { grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); }
}
@media (min-width: 3000px) {
  :root { --page-max: 3400px; }
  body { font-size: 16px; }
}
@media (max-width: 1100px) {
  .top-inner { align-items: flex-start; flex-direction: column; }
  .toolbar { margin-bottom: 8px; }
}
/* Wide screens: setup controls and Faction Cards side by side */
.fc-list { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
@media (min-width: 1400px) {
  .setup { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; align-items: start; }
  .setup > .setup-row { grid-column: 1; grid-row: 1; flex-direction: column; align-items: flex-start; margin-bottom: 0; }
  .setup > .setup-row + .help-panel { grid-column: 1 / -1; grid-row: 2; margin: 12px 0 0; }
  .setup > div:last-child { grid-column: 2; grid-row: 1; }
}

/* Infinity-style workspace: unit list | selected unit | your army, each column scrolls on its own */
.army-grid { grid-template-columns: 300px minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; }
.army-grid > .col { background: linear-gradient(180deg, #111a2a, #0c121d); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.army-grid > .col > .col-head { margin: -10px -12px 10px; padding: 8px 12px; border-bottom: 2px solid var(--race); background: #0f1828; border-radius: 10px 10px 0 0; }
@media (min-width: 1100px) {
  .army-grid > .col { position: sticky; top: 8px; max-height: calc(100vh / var(--z) - 16px); overflow-y: auto; scrollbar-width: thin; }
  .catalog { display: flex; flex-direction: column; }
}
@media (max-width: 1099px) {
  .army-grid { grid-template-columns: 260px minmax(0, 1fr); }
  .army-grid > .roster { grid-column: 1 / -1; }
  .cat-list { max-height: 70vh; overflow-y: auto; }
}
@media (max-width: 900px) {
  .army-grid { grid-template-columns: 1fr; }
  .cat-list { max-height: 45vh; }
}
@media (min-width: 2300px) { .army-grid { grid-template-columns: 360px minmax(0, 1fr) minmax(0, 1fr); } }
.crow { display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-left: 3px solid var(--slot, var(--line)); border-radius: 6px; padding: 4px 8px 4px 4px; margin-bottom: 4px; cursor: pointer; font: inherit; }
.crow:hover { background: var(--panel2); }
.crow.on { border-color: var(--race); border-left-color: var(--slot, var(--race)); background: color-mix(in srgb, var(--race) 14%, var(--panel)); box-shadow: 0 0 0 1px var(--race) inset; }
.crow img { width: 34px; height: 44px; object-fit: cover; object-position: top; border-radius: 4px; flex: none; background: var(--panel2); }
.crow.card-row { padding-left: 10px; }
.crow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crow-main b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow-main small { color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow-side { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-size: 12px; flex: none; }
.crow-cost small { color: var(--muted); }
.crow.has .crow-main b { color: var(--race); }
.detail .cu { border: 0; background: none; padding: 0; }
.detail .cu img { width: 110px; height: 210px; }

/* Compact density: smaller type, one-line setup bar, slim meters */
body { font-size: 13px; }
.top { padding: 6px 16px 4px; }
.top h1 { font-size: 18px; }
.top .sub { display: none; }
.nav { margin-bottom: 2px; }
.tbtn { padding: 3px 8px; font-size: 12px; }
.army-main { padding: 8px 12px 16px; }
.setup.card, .setup { padding: 6px 10px; margin-bottom: 6px; display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
.setup > .setup-row { display: contents; }
.setup-block { display: flex; align-items: center; gap: 6px; }
.setup .lbl { font-size: 11px; color: var(--muted); margin: 0; font-weight: 600; }
.seg-btn { padding: 2px 8px; font-size: 12px; border-radius: 6px; }
.limits input { width: 72px; padding: 2px 6px; }
.gas-note { font-size: 11.5px; }
.setup > div:last-child { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fc-list { display: flex; flex-wrap: wrap; gap: 4px; }
.fc { padding: 2px 6px; border-radius: 6px; display: flex; align-items: center; gap: 6px; }
.fc-main { flex-direction: row; align-items: center; gap: 6px; }
.fc-main b { font-size: 12px; white-space: nowrap; }
.fc-tag, .fc .res { display: none; }
.fc .slot-chip { font-size: 10px; padding: 0 5px; }
.fc > .link { font-size: 11px; }
.setup .help-panel { flex-basis: 100%; margin: 4px 0 0; }
@media (min-width: 1400px) {
  .setup { display: flex; }
  .setup > .setup-row { display: contents; }
}
.summary { padding: 4px 0; gap: 5px; margin-bottom: 6px; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
.meter { padding: 2px 6px; border-radius: 6px; }
.m-top { font-size: 11px; }
.m-top b { font-size: 13px; }
.m-track { height: 3px; margin-top: 2px; }
.totals b { font-size: 13px; }
.grp { margin: 10px 0 4px; font-size: 11px; }
.army-grid > .col { padding: 8px 10px; }
.army-grid > .col > .col-head { margin: -8px -10px 8px; padding: 6px 10px; }
.side-title { font-size: 12px; }
.search { padding: 4px 8px; font-size: 12px; }
.chip, .fchip { font-size: 11px; }
.crow { padding: 2px 6px 2px 3px; margin-bottom: 3px; }
.crow img { width: 26px; height: 34px; }
.crow-main b { font-size: 12.5px; }
.crow-main small { font-size: 10.5px; }
.detail .cu-name b { font-size: 16px; }
.add { font-size: 12px; }
.upg { font-size: 12px; padding: 2px 6px; }

/* Army rows: one compact line each; click to edit in the middle */
.ru-row { cursor: pointer; padding: 4px 6px; gap: 8px; margin-bottom: 4px; align-items: flex-start; }
.ru-row:hover { background: var(--panel2); }
.ru-row.on { border-color: var(--race); box-shadow: inset 0 0 0 1px var(--race); }
.ru-row img { width: 26px; height: 34px; border-radius: 4px; }
.ru-line { display: flex; gap: 8px; align-items: baseline; }
.ru-line b { font-size: 12.5px; }
.ru-line .muted { font-size: 11px; }
.ru-line .ru-cost { margin-left: auto; }
.ru-line .ru-cost b { font-size: 13px; }
.ru-ups { font-size: 11px; color: var(--race); }
.ru-row .ru-issue { font-size: 11px; padding: 1px 6px; margin: 2px 0 0; }
.ru-full { border: 0; background: none; padding: 0; }
.fc > .link { white-space: nowrap; }

/* Desktop: the page fills the window and each column scrolls on its own; the list's search and filters stay put */
@media (min-width: 1100px) {
  body { height: calc(100vh / var(--z)); display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
  .army-main { padding-bottom: 8px; }
  .army-main { flex: 1; min-height: 0; display: flex; flex-direction: column; width: 100%; box-sizing: border-box; }
  .summary { position: static; }
  .army-grid { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
  .army-grid > .col { position: static; max-height: none; height: 100%; box-sizing: border-box; overflow-y: auto; }
  .army-grid > .catalog { display: flex; flex-direction: column; overflow: hidden; }
  .cat-list { flex: 1; min-height: 0; overflow-y: auto; margin-right: -6px; padding-right: 6px; }
  .army-grid > .col > .col-head { position: sticky; top: -8px; z-index: 2; }
  .foot { display: none; }
}

/* Faction Cards: name and "Show abilities" on one line, slots under the name */
.fc { display: grid; grid-template-columns: auto auto; align-items: start; column-gap: 8px; padding: 3px 8px; }
.fc-main { flex-direction: column; align-items: flex-start; gap: 2px; }
.fc > .link { margin-top: 1px; }
.fc > .boosts, .fc > :not(.fc-main):not(.link) { grid-column: 1 / -1; }

/* Weapons: one line each */
.wtable { width: 100%; border-collapse: collapse; font-size: 12px; }
.wtable th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); font-weight: 600; padding: 0 6px 3px 0; }
.wtable td { padding: 3px 6px 3px 0; border-top: 1px solid #1d2638; white-space: nowrap; vertical-align: top; }
.wtable .wt-name { font-weight: 600; white-space: normal; }
.wtable .wt-kw { white-space: normal; }
.wtable .wt-kw > span { display: inline-block; font-size: 10.5px; padding: 0 5px; border-radius: 4px; background: #2a2140; color: #d2b8ff; margin: 0 2px 2px 0; white-space: nowrap; }

/* Upgrades on the middle card: highlighted, with phase */
.detail .upgs .upg { border-left: 3px solid #f3c74e; background: #1a1708; }
.detail .upgs .upg .u-name { color: #f3d27a; }
.detail .upgs .upg.on { background: #2a2408; box-shadow: inset 0 0 0 1px #f3c74e; }
.detail .upgs .upg .phase { font-size: 9.5px; }

/* Portrait to the right of the unit header */
.head-img { float: right; width: 64px; height: 96px; object-fit: cover; object-position: top; border-radius: 6px; margin: 0 0 6px 10px; background: var(--panel2); }
.details { clear: both; }
.detail .cu img.head-img, .detail .ru img.head-img { width: 72px; height: 104px; }
.detail .sub2, .detail .upgs, .detail .add-row, .detail .ru-issue { clear: both; }
.detail .upg .u-name { white-space: normal; overflow: visible; text-overflow: clip; }

/* Clean card: header text left, portrait + Add button right, then size, upgrades, weapons */
.cu-full { display: block; }
.cu-top { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 6px; }
.cu-headtxt { flex: 1; min-width: 0; }
.cu-side { flex: none; width: 150px; display: flex; flex-direction: column; gap: 6px; }
.detail .cu-side img.head-img { float: none; margin: 0; width: 150px; height: 170px; object-fit: cover; object-position: center 15%; border-radius: 8px; }
.add-main { display: flex; flex-direction: column; align-items: center; gap: 1px; width: 100%; padding: 6px 8px; font-weight: 700;
  background: color-mix(in srgb, var(--race) 22%, var(--panel2)); border-color: var(--race); }
.add-main small { font-weight: 400; color: var(--muted); }
.cu-full > .sizes { margin: 2px 0 6px; }
.detail .ru img.head-img-float { float: right; margin: 0 0 6px 12px; width: 130px; height: 150px; object-fit: cover; object-position: center 15%; border-radius: 8px; }

/* Upgrades: yellow heading, calmer names, wrap instead of breaking the row */
.detail .sub2 { clear: both; }
.detail .upgs + .sub2, .detail .cu-full > .sub2 { color: #f3c74e; }
.detail .upgs .upg { flex-wrap: wrap; align-items: center; row-gap: 2px; border-left-color: #c9a640; background: #17150c; }
.detail .upgs .upg .u-name { color: #e6dcc0; font-weight: 600; }
.detail .upgs .upg.on { background: #262011; box-shadow: inset 0 0 0 1px #c9a640; }
.detail .upgs .upg.on .u-name { color: #f3d27a; }
.detail .upgs .u-main { flex: 1 1 120px; min-width: 0; }
.detail .upgs .upg .act, .detail .upgs .upg .phase, .detail .upgs .upg > .badge { flex: none; }

/* Army rows: slots and upgrade names with tooltips */
.ru-line .slot-chip { font-size: 10px; padding: 0 6px; }
.ru-ups { display: flex; flex-wrap: wrap; gap: 2px 8px; }
.ru-ups span { color: #e6dcc0; border-bottom: 1px dotted #8a7a4a; cursor: help; }
.ru-ups small { color: var(--muted); }
.upg-title { color: #f3c74e !important; }
.detail .upgs .upg { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 8px; align-items: start; }
.detail .upgs .upg .u-main { display: flex; flex-direction: column; }
.detail .upgs .upg .u-tags { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.detail .upgs .upg .cost { margin-left: 0; color: #f3d27a; font-weight: 600; }
@media (max-width: 600px) {
  .cu-side { width: 110px; }
  .detail .cu-side img.head-img { width: 110px; height: 130px; }
  .detail .ru img.head-img-float { width: 90px; height: 110px; }
}
/* Special versions of a unit sit under it, indented */
.crow.variant { margin-left: 14px; width: calc(100% - 14px); border-left-style: dashed; }
.crow.variant .var-mark { color: var(--muted); font-weight: 400; }

/* Size and Add to list sit under the supply line; the portrait stands alone on the right */
.cu-headtxt .sizes { margin: 6px 0 4px; }
.add-line { margin: 2px 0; }
.add-main { display: inline-flex; flex-direction: row; align-items: baseline; gap: 8px; width: auto; padding: 5px 12px; }
.am-min { color: #8fd3ff; font-weight: 700; }
.am-min small { color: var(--muted); font-weight: 400; }
.am-slot { color: var(--slot, var(--race)); font-weight: 700; padding: 0 6px; border-radius: 999px; border: 1px solid color-mix(in srgb, var(--slot, var(--race)) 50%, transparent); }
.cu-side { width: 150px; }
.detail .upgs .upg .cost { color: var(--muted); font-weight: 400; white-space: nowrap; }
.detail .upgs .upg .cost .cur, .detail .upgs .upg .cost:not(:has(span)) { color: #f3d27a; font-weight: 700; }
/* Upgrade name with its note on one line when it fits ("Hellfire Missiles · for Twin Autocannons"), tags below */
.detail .upgs .upg .u-main { display: block; }
.detail .upgs .upg .u-name { display: inline; }
.detail .upgs .upg .u-note { display: inline; margin-left: 6px; color: var(--muted); font-size: 11px; }
.detail .upgs .upg .u-tags { display: flex; }

/* Slot counts next to the slot name: "CORE 1/3" */
.grp { justify-content: flex-start; gap: 8px; align-items: baseline; }
.grp small { font-size: 11px; font-weight: 600; color: var(--muted); }

/* Tag filter as a folding multi-select */
.tagsel { align-items: center; }
.tag-toggle { display: inline-flex; gap: 6px; align-items: center; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag-toggle .caret { color: var(--muted); }
.tag-menu { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; margin: 2px 0 6px; background: #0f1828; border: 1px solid var(--line); border-radius: 6px; }

/* Your army: warnings and Faction Card stay put, the unit list scrolls */
@media (min-width: 1100px) {
  .army-grid > .roster { display: flex; flex-direction: column; overflow: hidden; }
  .roster > #issues { flex: none; max-height: 35%; overflow-y: auto; }
  .roster > #roster { flex: 1; min-height: 0; display: flex; flex-direction: column; }
  #roster > .rfc { flex: none; }
  .roster-units { flex: 1; min-height: 0; overflow-y: auto; margin-right: -6px; padding-right: 6px; }
}

/* Summary: green/red money, a resource box, one problems button with a pop-up */
.summary { position: relative; }
.meter.m-ok .m-top b { color: var(--good); }
.meter.m-bad .m-top b { color: var(--bad); }
.meter.over { border-color: var(--bad); box-shadow: inset 0 0 0 1px var(--bad); }
.res-meter .m-top b { color: var(--race); }
button.status { border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.status.warn { background: #3a3116; color: var(--warn); }
.issues-pop { position: absolute; right: 0; top: 100%; z-index: 20; width: min(560px, 90vw); max-height: 60vh; overflow-y: auto;
  background: #0f1828; border: 1px solid var(--line); border-radius: 10px; padding: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, .6); }
.issues-pop .issues { margin: 0; }
.rc-row { cursor: pointer; border-radius: 6px; padding: 4px 6px; border: 1px solid var(--line); background: var(--panel); margin-bottom: 4px; }
.rc-row:hover { background: var(--panel2); }
.rc-row.on { border-color: var(--race); box-shadow: inset 0 0 0 1px var(--race); }
.tab small { color: var(--muted); }
@media print {
  .p-n { font-size: 11pt; font-weight: 800; margin-right: 2pt; }
  .p-section { margin-top: 6pt; break-inside: auto; }
  .p-section .p-cols, .p-sec + .p-cols { column-count: 2; }
}
/* Faction Cards in the top bar: name with "Show abilities" right after it, slots below */
.fc { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 3px 8px; }
.fc-line { display: flex; align-items: baseline; gap: 8px; }
.fc-name { background: none; border: 0; padding: 0; color: var(--text); cursor: pointer; text-align: left; }
.fc-name b { font-size: 12px; white-space: nowrap; }
.fc .fc-main { flex-direction: row; gap: 6px; align-items: center; }
.fc .fc-main .fc-tag { display: none; }
.fc .link { font-size: 11px; white-space: nowrap; }
.fc > .boosts { max-width: 420px; font-size: 12px; }