/* Colour tokens. Dark is the default; [data-theme="light"] (set before first paint by the
   inline script in index.html, from the saved choice or the system setting) swaps them. */
:root {
  --bg: #0B1120;
  --panel: #111827;
  --panel-2: #1E293B;
  --panel-3: #0F172A;
  --border: #334155;
  --text: #F8FAFC;
  --text-dim: #94A3B8;
  --text-faint: #64748B;
  --text-2: #CBD5E1;
  --att: #3B82F6;
  --def: #8B5CF6;
  --green: #10B981;
  --amber: #F59E0B;
  --red: #EF4444;
  --gold: #FFD700;
  --sky: #38BDF8;
  --att-soft: #93C5FD;
  --def-soft: #C4B5FD;
  --soft: rgba(255,255,255,0.05);
  --chip-bg: rgba(255,255,255,0.1);
  --chip-border: rgba(255,255,255,0.2);
  --warn-bg: rgba(255,179,0,0.15);
  --danger-bg: rgba(239,68,68,0.2);
  --drag-bg: rgba(59,130,246,0.08);
  --shadow: rgba(0,0,0,0.5);
  --shadow-sm: rgba(0,0,0,0.15);
  --banner-bg: linear-gradient(135deg, #111827 0%, #311042 100%);
  --banner-title: #F5F3FF;
  --banner-sub: #A78BFA;
  --banner-glow: 0 0 15px rgba(139,92,246,0.6);
  --statline-bg: rgba(20,20,25,0.6);
  --stat-k: #90CAF9;
  --stat-v: #FFFFFF;
  --mean-glow: 0 0 12px currentColor;
  --svg-label: #888888;
  color-scheme: dark;
}
:root[data-theme="light"] {
  --bg: #F1F5F9;
  --panel: #FFFFFF;
  --panel-2: #F8FAFC;
  --panel-3: #FFFFFF;
  --border: #CBD5E1;
  --text: #0F172A;
  --text-dim: #475569;
  --text-faint: #64748B;
  --text-2: #334155;
  --att: #2563EB;
  --def: #7C3AED;
  --green: #047857;
  --amber: #B45309;
  --red: #DC2626;
  --gold: #D97706;
  --sky: #0369A1;
  --att-soft: #1D4ED8;
  --def-soft: #6D28D9;
  --soft: #F1F5F9;
  --chip-bg: #F1F5F9;
  --chip-border: #CBD5E1;
  --warn-bg: #FEF3C7;
  --danger-bg: #FEE2E2;
  --drag-bg: #EFF6FF;
  --shadow: rgba(15,23,42,0.12);
  --shadow-sm: rgba(15,23,42,0.06);
  --banner-bg: linear-gradient(135deg, #FFFFFF 0%, #EDE9FE 100%);
  --banner-title: #3B0764;
  --banner-sub: #6D28D9;
  --banner-glow: none;
  --statline-bg: #F1F5F9;
  --stat-k: #1D4ED8;
  --stat-v: #0F172A;
  --mean-glow: none;
  --svg-label: #64748B;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: var(--bg); color: var(--text);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 14px;
}
body { padding: 14px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); max-width: 1400px; margin: 0 auto; }
select, input, button { font-family: inherit; }

/* ---------- banner ---------- */
.banner {
  background: var(--banner-bg); position: relative;
  padding: 22px 20px; border-radius: 12px; border: 2px solid var(--def);
  box-shadow: 0 10px 20px var(--shadow); text-align: center; margin-bottom: 18px;
}
.banner h1 {
  margin: 0; color: var(--banner-title); font-size: clamp(18px, 4vw, 30px); font-weight: 900;
  letter-spacing: 1px; text-shadow: var(--banner-glow);
}
.banner p {
  margin: 6px 0 0; color: var(--banner-sub); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 1.5px;
}

/* ---------- theme toggle ---------- */
.theme-toggle {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%;
  background: var(--soft); border: 1px solid var(--border); color: var(--text); font-size: 16px;
  line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.theme-toggle:hover { border-color: var(--text-dim); }
@media (max-width: 560px) { .banner { padding-left: 44px; padding-right: 44px; } }

/* ---------- setup panel ---------- */
.setup-panel { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; margin-bottom: 16px; overflow: hidden; }
.setup-panel-head {
  display: flex; justify-content: space-between; align-items: center; padding: 10px 16px;
  font-size: 13px; font-weight: 700; color: var(--text-dim); cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--border);
}
.setup-panel-head .chev { transition: transform 0.15s ease; }
.setup-panel-body.collapsed { display: none; }
.setup-panel-head.collapsed .chev { transform: rotate(-90deg); }
.setup-panel-body { padding: 14px 16px; }

.setup-grid { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 12px; align-items: start; }
@media (max-width: 760px) { .setup-grid { grid-template-columns: 1fr; } .setup-swap { order: 3; } }

.setup-swap { display: flex; align-items: center; justify-content: center; padding-top: 24px; }
#swapBtn {
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); color: #fff; font-weight: 800;
  border: none; border-radius: 8px; padding: 10px 6px; font-size: 10.5px; line-height: 1.3;
  cursor: pointer; width: 100%;
}
#swapBtn:hover { filter: brightness(1.1); }

.side-label { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.side-label.att { color: var(--att); }
.side-label.def { color: var(--def); }

select {
  width: 100%; background: var(--panel-3); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px; font-size: 13px; margin-bottom: 6px;
}

.statline {
  background: var(--statline-bg); border-radius: 6px; padding: 4px 8px; display: flex;
  justify-content: space-between; gap: 4px; margin-bottom: 8px;
}
.statline .stat { text-align: center; flex: 1; }
.statline .stat .k { font-size: 9px; color: var(--stat-k); display: block; }
.statline .stat .v { font-size: 14px; font-weight: 900; color: var(--stat-v); }

.mini-label { font-size: 10px; color: var(--text-dim); font-weight: 700; margin-top: 8px; margin-bottom: 4px; letter-spacing: 0.3px; }

.weapon-row { display: grid; grid-template-columns: 1.5fr repeat(7, 0.7fr); gap: 4px; align-items: end; }
@media (max-width: 760px) { .weapon-row { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.weapon-row label { display: flex; flex-direction: column; font-size: 10px; color: var(--text-dim); gap: 2px; }
.weapon-row input {
  background: var(--panel-3); color: var(--text); border: 1px solid var(--border); border-radius: 4px;
  padding: 3px 5px; font-size: 12.5px; height: 26px; width: 100%;
}
.weapon-label { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding-bottom: 2px; grid-column: span 1; }
.weapon-name { font-size: 12.5px; font-weight: bold; color: var(--att); margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.weapon-name.def-name { color: var(--def); }
.badge-container { display: flex; flex-wrap: wrap; gap: 3px; }
.kw-badge {
  background: var(--chip-bg); color: var(--text-dim); padding: 1px 5px; border-radius: 4px;
  font-size: 8.5px; line-height: 1.3; border: 1px solid var(--chip-border); text-transform: uppercase;
}

/* ---------- main layout ---------- */
.main-layout { display: grid; grid-template-columns: 260px 1fr; gap: 20px; align-items: start; }
/* Datasheets still loading from BSData: the previous result stays, dimmed. */
.main-layout.loading { opacity: 0.45; transition: opacity 0.2s; pointer-events: none; }
.data-loading { margin: 6px 0; font-size: 12.5px; color: var(--text-dim); }
.data-loading::before { content: "⏳ "; }
.data-loading.error { color: var(--red); }
.data-loading.error::before { content: "⚠️ "; }
.data-loading .reset-btn { margin-left: 6px; }
@media (max-width: 900px) { .main-layout { grid-template-columns: 1fr; } }

.mods-col { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 14px; position: sticky; top: 10px; }
@media (max-width: 900px) { .mods-col { position: static; } }

.mods-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.mods-head h4 { margin: 0; font-size: 14px; }
.att-color { color: var(--att); }
.def-color { color: var(--def); }
.reset-btn {
  background: var(--soft); color: var(--text-dim); border: 1px solid var(--border);
  padding: 3px 9px; font-size: 11px; height: 24px; border-radius: 6px; cursor: pointer;
}
.reset-btn:hover { background: var(--danger-bg); color: var(--red); border-color: var(--red); }

.mods-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.mods-row2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 8px; }
.num-field, .sel-field { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.num-field label, .sel-field label { font-size: 9.5px; color: var(--text-dim); }
/* width + min-width: number inputs have an intrinsic minimum width that otherwise
   overflows the sidebar grid and covers the Hits card. */
.num-field input, .sel-field select {
  background: var(--panel-3); color: var(--text); border: 1px solid var(--border); border-radius: 5px;
  padding: 4px 6px; font-size: 12.5px; height: 28px; width: 100%; min-width: 0;
}

.mods-checkgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px 8px; margin-bottom: 6px; }
.mods-checkgrid2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 8px; }
.chk-field { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-dim); }
.chk-field input { accent-color: var(--att); width: 14px; height: 14px; }

.reroll-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.reroll-label { font-size: 11px; color: var(--text-dim); width: 40px; }
.radio-row { display: flex; gap: 6px; flex-wrap: wrap; }
.radio-row label { display: flex; align-items: center; gap: 3px; font-size: 11px; color: var(--text-dim); }
.radio-row input { accent-color: var(--def); }

.divider { height: 1px; background: var(--border); margin: 14px 0; }

/* ---------- charts ---------- */
.chart-row3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 10px; }
.chart-row2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 700px) { .chart-row3, .chart-row2 { grid-template-columns: 1fr; } }

.chart-card {
  text-align: center; padding: 14px; border-radius: 8px;
  background: linear-gradient(145deg, var(--panel-2), var(--panel-3));
  border: 1px solid var(--border); box-shadow: 0 4px 6px var(--shadow-sm);
}
.chart-card .title { font-size: 16px; color: var(--text); font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; }
.chart-card .target { font-size: 11.5px; color: var(--text-dim); margin-bottom: 3px; }
.chart-card .conv { font-size: 12px; color: var(--sky); font-weight: 700; margin: -2px 0 5px; }
.chart-card .conv .sub { font-size: 9.5px; color: var(--text-dim); font-weight: 400; display: block; }
.chart-card .mean { font-size: 38px; font-weight: 900; margin-top: -4px; text-shadow: var(--mean-glow); }
.chart-card .stats-line { font-size: 12px; color: var(--text-2); margin-top: 6px; background: var(--soft); padding: 5px; border-radius: 4px; }
.chart-card .wipe-warn {
  color: var(--amber); font-size: 11.5px; font-weight: 900; margin-top: 6px;
  background: var(--warn-bg); padding: 4px; border-radius: 4px;
}
.chart-card svg { width: 100%; height: 110px; margin-top: 6px; display: block; }

/* ---------- footer ---------- */
.footer { text-align: center; margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--border); }
.footer p { color: var(--text-faint); font-size: 11px; font-style: italic; margin: 0; }
.footer p + p { margin-top: 6px; }
.footer .data-info, .footer .disclaimer { font-style: normal; font-size: 10.5px; max-width: 640px; margin-left: auto; margin-right: auto; line-height: 1.5; }
.footer a { color: var(--text-dim); }

/* ---------- army rosters ---------- */
.roster-section { margin-top: 26px; }
.section-head { margin-bottom: 10px; }
.section-head h2 { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: 0.5px; }
.section-head p { margin: 3px 0 0; color: var(--text-dim); font-size: 12px; }
.roster-grid { display: grid; grid-template-columns: 1fr 44px 1fr; gap: 12px; align-items: start; }
@media (max-width: 760px) {
  .roster-grid { grid-template-columns: 1fr; }
  .roster-swap { order: -1; }
}
.roster-col { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 12px; min-width: 0; }
.roster-swap { display: flex; justify-content: center; padding-top: 40px; }
@media (max-width: 760px) { .roster-swap { padding-top: 0; } }
#rosterSwap {
  background: linear-gradient(135deg, #3B82F6 0%, #8B5CF6 100%); color: #fff; font-weight: 800;
  border: none; border-radius: 8px; padding: 8px 10px; font-size: 15px; cursor: pointer;
}
#rosterSwap span { display: none; font-size: 12px; }
@media (max-width: 760px) { #rosterSwap { width: 100%; } #rosterSwap span { display: inline; } }

.roster-empty {
  border: 1.5px dashed var(--border); border-radius: 8px; padding: 14px; text-align: center;
  color: var(--text-dim); font-size: 12.5px;
}
.roster-empty.drag { border-color: var(--att); background: var(--drag-bg); }
.roster-empty p { margin: 0 0 8px; }
.roster-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.btn {
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border); border-radius: 6px;
  padding: 7px 12px; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.btn:hover { border-color: var(--text-dim); }
.btn.primary { background: var(--att); border-color: var(--att); color: #fff; }
.roster-hint { margin-top: 10px !important; font-size: 11px; color: var(--text-faint); }
.paste-box { margin-top: 10px; text-align: left; }
.paste-box textarea {
  width: 100%; background: var(--panel-3); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 8px; font: 12px/1.4 ui-monospace, SFMono-Regular, Menlo, monospace; resize: vertical;
}
.paste-row { display: flex; gap: 8px; margin-top: 6px; }
.paste-row select { margin: 0; flex: 1; min-width: 0; }
.roster-err { color: var(--red); font-size: 12px; margin-top: 8px !important; }

.roster-head .reset-btn { white-space: nowrap; }
.roster-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.roster-title { min-width: 0; }
.roster-name { font-weight: 800; font-size: 14px; overflow-wrap: anywhere; }
.roster-meta { color: var(--text-dim); font-size: 11.5px; margin-top: 2px; }
.roster-warn { color: var(--amber); font-size: 11.5px; margin: 0 0 6px; }
.roster-role {
  font-size: 10px; font-weight: 800; color: var(--text-faint); letter-spacing: 1px;
  margin: 10px 0 4px; padding-bottom: 3px; border-bottom: 1px solid var(--border);
}
.roster-unit {
  display: block; width: 100%;
  background: transparent; color: var(--text); border: 1px solid transparent; border-radius: 6px;
  padding: 6px 8px; text-align: left; cursor: pointer; font-size: 13px;
}
.roster-unit:hover { background: var(--panel-2); }
.roster-unit.selected { border-color: currentColor; background: var(--panel-2); }
#roster0 .roster-unit.selected { color: var(--att-soft); }
#roster1 .roster-unit.selected { color: var(--def-soft); }
.roster-unit.nodata { opacity: 0.45; cursor: default; }
.roster-unit.nodata:hover { background: transparent; }
.ru-name { font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.ru-sub { display: block; font-weight: 400; font-size: 11px; color: var(--text-dim); }
.ru-pts { color: var(--text-dim); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }

.toast {
  position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 150%);
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px var(--shadow);
  padding: 10px 12px; display: flex; gap: 12px; align-items: center; font-size: 13px;
  max-width: calc(100vw - 32px); transition: transform 0.2s ease, visibility 0.2s; z-index: 10; visibility: hidden;
}
.toast.show { transform: translate(-50%, 0); visibility: visible; }
.toast { width: max-content; }
.toast span { min-width: 0; }
.toast button { background: none; border: none; color: var(--att-soft); font-weight: 700; cursor: pointer; white-space: nowrap; font-size: 13px; }

.ru-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

/* ---------- army comparator ---------- */
/* Your selected unit: unmistakable, and named in a pinned bar when scrolled away. */
#roster0 .roster-unit.selected {
  color: var(--text); border: 1px solid var(--att); border-left: 5px solid var(--att);
  background: color-mix(in srgb, var(--att) 16%, var(--panel));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--att) 22%, transparent);
}
.att-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 999px; vertical-align: 1px;
  background: var(--att); color: #fff; font-size: 9.5px; font-weight: 800; letter-spacing: 0.6px;
}
.att-pin {
  position: sticky; top: 0; z-index: 5; margin: 0 0 10px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px;
  background: color-mix(in srgb, var(--att) 16%, var(--panel)); border: 1px solid var(--att); border-left: 5px solid var(--att);
  border-radius: 0 0 10px 10px; padding: 8px 12px; font-size: 13px; box-shadow: 0 6px 16px var(--shadow);
}
.att-pin[hidden] { display: none; }
.att-pin .ap-label { color: var(--text-dim); font-size: 11.5px; font-weight: 700; }
.att-pin .ap-sub { color: var(--text-dim); font-size: 11.5px; }
.att-pin .ap-actions { margin-left: auto; display: flex; gap: 6px; }

.cmp-banner {
  background: var(--panel); border: 1px solid var(--att); border-radius: 10px; padding: 10px 12px;
  margin-bottom: 10px; display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: space-between;
}
.cmp-title { font-size: 13px; }
.cmp-sub { display: block; color: var(--text-dim); font-size: 11.5px; margin-top: 2px; }
.cmp-opts { display: flex; flex-wrap: wrap; gap: 4px 14px; }

.best-badge {
  display: inline-block; font-size: 10px; font-weight: 700; color: var(--amber);
  background: var(--warn-bg); border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: 1px;
}
.cmp { display: block; margin-top: 6px; }
.cmp-line { display: block; padding: 4px 0; border-top: 1px dashed var(--border); }
.cmp-head { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.cmp-kind { width: 78px; flex: none; color: var(--text-dim); font-weight: 600; white-space: nowrap; }
.cmp-kills { flex: none; white-space: nowrap; color: var(--text); }
.cmp-kills b { font-size: 14px; }
.cmp-bar { flex: 1; min-width: 30px; height: 6px; background: var(--soft); border-radius: 3px; overflow: hidden; }
.cmp-bar i { display: block; height: 100%; background: var(--att); border-radius: 3px; }
.cmp-pct { flex: none; width: 34px; text-align: right; color: var(--text-dim); font-size: 11px; font-variant-numeric: tabular-nums; }
.cmp-detail { display: block; color: var(--text-dim); font-size: 11px; line-height: 1.4; margin-top: 2px; font-weight: 400; }
.cmp-none { color: var(--text-faint); font-size: 11.5px; }
.cmp-line.none .cmp-kind { display: inline-block; }
.cmp-pts { display: block; text-align: right; font-size: 11px; color: var(--text-dim); margin-top: 2px; }

.cmp-via { display: block; font-size: 11px; color: var(--text-faint); margin-top: 1px; font-weight: 400; }
.cmp-weps { display: block; margin: 6px 0 2px; border-left: 2px solid var(--att); padding-left: 8px; }
.cw-head { display: block; font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-faint); margin: 6px 0 2px; }
.cw-head:first-child { margin-top: 0; }
.cw { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 10px; align-items: baseline; font-size: 11.5px; line-height: 1.35; padding: 2px 0; font-weight: 400; }
.cw-name { color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.cw-badge { display: inline-block; width: 20px; }
.cw-status { display: block; padding-left: 20px; color: var(--text-faint); font-size: 10.5px; }
.cw-val { color: var(--text-dim); white-space: nowrap; text-align: right; }
.cw-val b { color: var(--text); }
.cw.option .cw-name { color: var(--text-dim); }
.roster-unit.expanded { border-color: var(--def); }
@media (max-width: 520px) {
  .cw { grid-template-columns: 1fr; }
  .cw-val { grid-column: 1; text-align: left; padding-left: 20px; }
}

/* ---------- efficiency rankings ---------- */
.rank-section { margin-top: 30px; }
.rank-controls { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: flex-end; margin-bottom: 10px; }
.rk-field { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: var(--text-dim); min-width: 0; }
.rk-field select, .rk-field input {
  margin: 0; background: var(--panel-3); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: 6px 8px; font-size: 13px; max-width: 260px; min-width: 0;
}
.rk-search input { width: 180px; }
.rk-legends { padding-bottom: 6px; }
.rk-mix { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; }
.rk-mix-h { flex: 1 1 100%; font-size: 10.5px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-faint); }
.rk-w { display: flex; flex-direction: column; gap: 2px; font-size: 11.5px; color: var(--text-dim); flex: 1 1 120px; }
.rk-w input { width: 100%; accent-color: var(--att); }
.rk-traits { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 10px; }
.rk-trait { font-size: 11px; font-weight: 700; border: 1px solid var(--border); background: var(--panel); border-radius: 999px; padding: 2px 8px; }
.rank-list { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.rk-head, .rk-main {
  display: grid; grid-template-columns: 36px minmax(0, 1fr) 190px 300px; gap: 10px; align-items: center; padding: 8px 12px;
}
.rk-head { font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-faint); border-bottom: 1px solid var(--border); }
.rk-targets-h, .rk-targets { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; text-align: center; }
.rk-targets-h span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-row { border-bottom: 1px solid var(--border); }
.rk-row:last-of-type { border-bottom: none; }
.rk-row.open { background: var(--panel-2); }
.rk-main { cursor: pointer; }
.rk-main:hover { background: var(--panel-2); }
.rk-rank { color: var(--text-faint); font-variant-numeric: tabular-nums; font-size: 12px; }
.rk-name { font-weight: 700; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.rk-sub { display: block; font-weight: 400; font-size: 11px; color: var(--text-dim); }
.rk-tag { display: inline-block; font-size: 9.5px; font-weight: 700; color: var(--text-dim); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; margin-left: 5px; vertical-align: 1px; }
.rk-scores { display: flex; gap: 8px; }
.rk-score { display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rk-lbl { font-size: 9px; color: var(--text-faint); text-transform: uppercase; letter-spacing: 0.4px; }
.rk-chip { display: inline-block; min-width: 30px; text-align: center; border-radius: 5px; padding: 2px 4px; font-weight: 800; font-size: 12px; font-variant-numeric: tabular-nums; }
.rk-t { border-radius: 4px; padding: 3px 0; font-size: 11.5px; font-variant-numeric: tabular-nums; }
.h5 { background: rgba(16,185,129,0.30); color: var(--text); }
.h4 { background: rgba(16,185,129,0.16); color: var(--text); }
.h3 { background: var(--soft); color: var(--text); }
.h2 { background: rgba(245,158,11,0.14); color: var(--text); }
.h1 { background: rgba(239,68,68,0.16); color: var(--text); }
.rk-detail { padding: 4px 12px 14px 58px; }
.rk-tables { display: grid; grid-template-columns: 3fr 2fr 2fr; gap: 16px; }
.rk-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.rk-table caption { text-align: left; font-size: 10px; font-weight: 800; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-faint); padding-bottom: 4px; }
.rk-table th, .rk-table td { text-align: left; vertical-align: top; padding: 4px 6px; border-top: 1px solid var(--border); font-weight: 400; }
.rk-table tr:first-child th { border-top: none; font-size: 10.5px; color: var(--text-dim); font-weight: 700; }
.rk-table th { color: var(--text); font-weight: 700; white-space: nowrap; }
.rk-table small { display: block; color: var(--text-faint); font-size: 10.5px; white-space: normal; }
.rk-table b { font-variant-numeric: tabular-nums; }
.rk-opt { color: var(--amber) !important; }
.rk-none { color: var(--text-faint); }
.rk-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.rk-basis { color: var(--text-faint); font-size: 10.5px; margin: 8px 0 0; line-height: 1.45; }
.rk-more { display: block; width: calc(100% - 24px); margin: 10px 12px; }
.rk-empty { color: var(--text-dim); padding: 16px; margin: 0; }
@media (max-width: 900px) {
  .rk-head, .rk-main { grid-template-columns: 30px minmax(0, 1fr) 180px; }
  .rk-targets-h, .rk-targets { display: none; }
  .rk-detail { padding-left: 12px; }
  .rk-tables { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .rk-head .rk-scores-h { display: none; }
  .rk-head { grid-template-columns: 30px 1fr; }
  .rk-main { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; padding: 8px 10px; }
  .rk-scores { gap: 5px; }
  .rk-chip { min-width: 26px; font-size: 11.5px; }
  .rk-field { flex: 1 1 45%; }
  .rk-field select, .rk-field input, .rk-search input { max-width: none; width: 100%; }
}

/* ---------- detachments + comparator buffs ---------- */
.det-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; margin: 2px 0 6px; }
.det-pick { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: var(--text-dim); min-width: 0; flex: 1 1 200px; }
.det-pick select { margin: 0; font-size: 12.5px; padding: 4px 6px; }
.det-toggle { height: 28px; }
.det-rules { background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin-bottom: 8px; font-size: 12px; line-height: 1.45; color: var(--text-2); max-height: 260px; overflow: auto; }
.det-rules p { margin: 0 0 8px; }
.det-rules p:last-child { margin-bottom: 0; }
.cmp-buffs { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; width: 100%; padding-top: 6px; border-top: 1px dashed var(--border); }
.buff-grp { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.buff-lbl { font-size: 11px; font-weight: 700; color: var(--text-dim); margin-right: 2px; }
.chip { background: var(--soft); color: var(--text-dim); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; font-size: 11.5px; cursor: pointer; }
.chip:hover { border-color: var(--text-dim); }
.chip.on { background: var(--att); border-color: var(--att); color: #fff; }
.buff-grp select { margin: 0; width: auto; font-size: 11.5px; padding: 2px 6px; height: 24px; }

/* ---------- free tier / paywall ---------- */
.cmp-meter { display: inline-block; margin-top: 4px; font-size: 11px; font-weight: 700; color: var(--amber); }
.cmp-meter.pro { color: var(--green); }
.paywall { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; width: 100%; }
.pw-text { flex: 1 1 360px; font-size: 13px; }
.pw-thanks { width: 100%; margin: 0; color: var(--green); font-size: 12.5px; font-weight: 700; }
.cmp-locked-wrap { display: block; position: relative; }
.cmp-locked { filter: blur(3px); opacity: 0.55; user-select: none; }
.cmp-lock-tag { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: 800;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }

.footer .footer-links { font-style: normal; margin-top: 8px; }

/* ---------- intro line (search engines read it; players get the links) ---------- */
.intro { max-width: 860px; margin: -6px auto 16px; text-align: center; color: var(--text-dim); font-size: 13px; line-height: 1.5; }
.intro a { color: var(--att); }
.intro strong { color: var(--text); }

/* Affiliate "find this unit" links (shop.js): one quiet line, never a banner. */
.shop { margin: 10px 0; font-size: 13px; color: var(--text-dim); }
.shop a { font-weight: 600; }
.shop small { display: block; margin-top: 2px; font-size: 11px; opacity: 0.8; }

/* Share this matchup */
.share-row { display: flex; justify-content: flex-end; margin: 0 0 8px; }
.share-row .btn { font-size: 12.5px; padding: 6px 12px; }

/* ---------- recent winning lists ---------- */
.lists-section { margin-top: 18px; }
.wl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 10px; }
.wl-card { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; min-width: 0; }
.wl-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.wl-place { font-weight: 800; font-size: 14px; white-space: nowrap; }
.wl-place small { font-weight: 600; color: var(--text-dim); font-size: 11px; }
.wl-fac { font-weight: 700; font-size: 13px; text-align: right; overflow-wrap: anywhere; }
.wl-det { color: var(--att-soft); font-size: 12px; font-weight: 600; margin-top: 2px; overflow-wrap: anywhere; }
.wl-sub { color: var(--text-dim); font-size: 11.5px; margin-top: 3px; overflow-wrap: anywhere; }
.wl-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.wl-actions .btn { font-size: 12px; padding: 5px 9px; }
.wl-actions a.reset-btn { text-decoration: none; display: inline-flex; align-items: center; }
.wl-text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11.5px; line-height: 1.45; background: var(--panel-2); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 8px 0 0; max-height: 360px; overflow: auto; }
.lists-credit { color: var(--text-faint); font-size: 10.5px; margin: 10px 0 0; line-height: 1.5; }

/* ---------- pixel shootout ---------- */
.shootout { margin: 0 0 10px; }
.shootout canvas {
  display: block; width: 100%; max-width: 640px; margin: 0 auto; aspect-ratio: 160 / 38; height: auto;
  image-rendering: pixelated; image-rendering: crisp-edges; border: 1px solid var(--border); border-radius: 10px;
}
.shootout canvas[hidden] { display: none; }
.so-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; max-width: 640px; margin: 4px auto 0; flex-wrap: wrap; }
.so-caption { font-size: 12px; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.so-actions { display: flex; gap: 6px; margin-left: auto; }

/* ---------- saved lists (in an empty roster slot) ---------- */
.lib { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; }
.lib-head { font-size: 10px; font-weight: 800; color: var(--text-faint); letter-spacing: 1px; margin-bottom: 4px; }
.lib-row { display: flex; align-items: stretch; gap: 4px; }
.lib-load { flex: 1; min-width: 0; text-align: left; background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 5px 8px; cursor: pointer; color: var(--text); }
.lib-load:hover { background: var(--panel-2); border-color: var(--border); }
.lib-name { display: block; font-weight: 600; font-size: 13px; overflow-wrap: anywhere; }
.lib-sub { display: block; font-size: 11px; color: var(--text-dim); }
.lib-del { background: transparent; border: none; color: var(--text-faint); cursor: pointer; padding: 0 8px; font-size: 13px; border-radius: 6px; }
.lib-del:hover { color: var(--red); background: var(--panel-2); }
.lib-more { margin-top: 4px; }

/* ---------- points changed since last visit ---------- */
.pts-notice { position: relative; background: color-mix(in srgb, var(--amber) 14%, var(--panel)); border: 1px solid var(--amber); border-radius: 8px; padding: 8px 34px 8px 10px; margin: 0 0 8px; font-size: 12.5px; }
.pts-notice ul { margin: 4px 0 0; padding-left: 18px; }
.pts-notice li { margin: 1px 0; }
.pts-notice .up { color: var(--red); }
.pts-notice .down { color: var(--green); }
.pts-delta { color: var(--text-dim); font-weight: 600; }
.pts-notice [data-pts-dismiss] { position: absolute; top: 6px; right: 6px; }

/* ---------- first-visit welcome ---------- */
.welcome { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 16px;
  background: color-mix(in srgb, var(--bg, #0b1120) 70%, transparent); backdrop-filter: blur(3px); }
.w-card { width: min(560px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: var(--panel); border: 1px solid var(--border);
  border-radius: 16px; padding: 20px; box-shadow: 0 20px 50px var(--shadow); text-align: center; }
.w-brand { font-weight: 900; letter-spacing: 1px; font-size: 15px; color: var(--att-soft); }
.w-brand small { display: block; font-size: 10.5px; letter-spacing: 1.5px; color: var(--text-dim); font-weight: 700; text-transform: uppercase; margin-top: 2px; }
.w-card h2 { margin: 14px 0 6px; font-size: 22px; }
.w-lede { color: var(--text-dim); font-size: 13.5px; margin: 0 0 16px; line-height: 1.5; }
.w-sides { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 480px) { .w-sides { grid-template-columns: 1fr; } }
.w-side { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 16px 10px; border-radius: 12px;
  border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; font-size: 15px; }
.w-side:hover, .w-side:focus-visible { border-color: var(--att); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--att) 25%, transparent); }
.w-icon { font-size: 30px; }
.w-side small { color: var(--text-dim); font-size: 11px; line-height: 1.35; }
.w-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.w-army { padding: 10px 8px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel-2); color: var(--text); cursor: pointer; font-weight: 700; font-size: 13px; }
.w-army:hover, .w-army:focus-visible { border-color: var(--att); outline: none; }
.w-back { display: block; margin: 10px 0 0; background: none; border: none; color: var(--att-soft); cursor: pointer; font-size: 13px; padding: 0; }
.w-skip { margin-top: 16px; background: none; border: none; color: var(--text-dim); cursor: pointer; font-size: 12.5px; text-decoration: underline; }