:root {
  --bg: #0a0b0d;
  --bg2: #0f1114;
  --panel: #15181d;
  --panel2: #1b1f26;
  --panel3: #222730;
  --line: #262b33;
  --line2: #343b47;
  --text: #e9e7e2;
  --muted: #9aa0a8;
  --dim: #6b727c;
  --accent: #f2b632;
  --accent-dim: rgba(242, 182, 50, 0.16);
  --good: #47d17c;
  --good-dim: rgba(71, 209, 124, 0.14);
  --bad: #ff6b6b;
  --bad-dim: rgba(255, 107, 107, 0.14);
  --info: #5ec8f2;
  --info-dim: rgba(94, 200, 242, 0.14);
  --g-s: #ffd166;
  --g-a: #47d17c;
  --g-b: #5ec8f2;
  --g-c: #f2b632;
  --g-d: #ff6b6b;
  --font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --cond: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', Impact, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --r: 10px;
  --r-sm: 6px;
}
* { box-sizing: border-box; }
html { background: var(--bg); color-scheme: dark; }
body {
  margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.45; color: var(--text);
  background: radial-gradient(1200px 600px at 20% -10%, #171b22 0%, var(--bg) 60%);
  min-height: 100vh; display: flex; flex-direction: column;
}
a { color: var(--info); text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3, h4 { font-family: var(--cond); font-weight: 600; letter-spacing: 0.01em; margin: 0; }
code, .mono { font-family: var(--mono); font-size: 0.92em; }
[hidden] { display: none !important; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 20; display: flex; align-items: center;
  padding: 0; background: rgba(10, 11, 13, 0.85); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* the header's contents share the page column, so brand and nav line up with the content below */
.top-in { display: flex; align-items: center; gap: 22px; width: 100%; max-width: 1880px; margin: 0 auto; padding: 10px 20px; }
.foot { max-width: 1880px; margin: 0 auto; width: 100%; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--text); text-decoration: none !important; }
.rec { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; color: #ff4d4d; }
.rec i { width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 8px #ff4d4d; animation: blink 1.6s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }
.brand-name { font-family: var(--cond); font-size: 22px; font-weight: 700; letter-spacing: 0.06em; }
.brand-name em { font-style: normal; color: var(--accent); }
.nav { display: flex; gap: 4px; margin-left: 8px; }
.nav a { padding: 7px 12px; border-radius: var(--r-sm); color: var(--muted); font-weight: 500; text-decoration: none !important; }
.nav a:hover { color: var(--text); background: var(--panel2); }
.nav a.active { color: var(--text); background: var(--panel3); }
.top-meta { margin-left: auto; font-family: var(--mono); font-size: 11px; color: var(--dim); text-align: right; line-height: 1.3; }

.nav a { white-space: nowrap; }
@media (max-width: 860px) {
  .top-in { flex-wrap: wrap; gap: 6px 12px; padding: 8px 12px; }
  .brand-name { font-size: 18px; white-space: nowrap; }
  .nav { order: 3; width: 100%; overflow-x: auto; margin-left: 0; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }
  .top-meta { display: none; }
  .app { padding: 12px 12px 30px; }
  .hero h1 { font-size: 24px; }
  .hero p { font-size: 13px; }
}
.app { flex: 1; width: 100%; max-width: 1880px; margin: 0 auto; padding: 18px 20px 40px; }
.foot { padding: 18px 20px 28px; border-top: 1px solid var(--line); color: var(--dim); font-size: 12px; text-align: center; }

/* ---------- generic ---------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); }
.panel-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px 10px; border-bottom: 1px solid var(--line); }
.panel-h h2 { font-size: 26px; line-height: 1; }
.panel-h .sub { display: block; color: var(--muted); margin-top: 4px; font-size: 13px; }
.panel-body { padding: 14px 16px; }
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line2); background: var(--panel2); color: var(--text); font-weight: 500; white-space: nowrap;
}
.btn:hover { background: var(--panel3); border-color: #465064; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #1a1405; font-weight: 600; }
.btn.primary:hover { background: #ffc94d; }
.btn.ghost { background: transparent; }
.btn.sm { padding: 5px 9px; font-size: 12px; }
.linkbtn { background: none; border: 0; padding: 0; color: var(--info); font-size: 12px; }
.linkbtn:hover { text-decoration: underline; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--muted); font-size: 12px; }
.chip:hover { color: var(--text); border-color: #4a5468; }
.chip.active { background: var(--accent-dim); border-color: var(--accent); color: var(--accent); }
.tag { display: inline-block; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 500; background: var(--panel3); color: var(--muted); border: 1px solid var(--line2); }
.tag.rec { color: var(--accent); border-color: rgba(242,182,50,0.5); background: var(--accent-dim); }
.tag.warn { color: var(--accent); }
.tag.info { color: var(--info); border-color: rgba(94,200,242,0.5); background: var(--info-dim); }
.pill {
  display: inline-block; padding: 2px 7px; border-radius: 5px; font-size: 11.5px; font-family: var(--mono);
  background: var(--panel3); color: var(--muted); border: 1px solid transparent; white-space: nowrap;
}
.pill.good { color: var(--good); background: var(--good-dim); }
.pill.bad { color: var(--bad); background: var(--bad-dim); }
.pill.warn { color: var(--accent); background: var(--accent-dim); }
.pills { display: flex; flex-wrap: wrap; gap: 4px; }
.delta { font-family: var(--mono); font-size: 12px; padding: 1px 6px; border-radius: 4px; }
.delta.pos { color: var(--good); background: var(--good-dim); }
.delta.neg { color: var(--bad); background: var(--bad-dim); }
.delta.zero { color: var(--muted); background: var(--panel3); }
.note { padding: 10px 12px; border-radius: var(--r-sm); background: var(--accent-dim); border: 1px solid rgba(242,182,50,0.35); color: var(--text); font-size: 13px; }
.note.info { background: var(--info-dim); border-color: rgba(94,200,242,0.35); }
.muted { color: var(--muted); }
.dim { color: var(--dim); }
.small { font-size: 12px; }
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 50;
  background: var(--panel3); border: 1px solid var(--line2); color: var(--text); padding: 10px 16px; border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5); font-weight: 500;
}

/* ---------- build lab layout: three steps side by side, each scrolling inside itself ---------- */
:root { --top-h: 54px; }
.lab { display: grid; grid-template-columns: 260px 640px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.lab > .panel { min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.lab > .panel > .panel-h { flex: none; }
.lab-mode .foot { display: none; }
@media (min-width: 1221px) {
  .top { height: var(--top-h); }
  .top-in { height: 100%; }
  .lab-mode .app { padding: 14px 20px; }
  .lab { height: calc(100vh - var(--top-h) - 28px); }
  .gunpick .panel-body, .loadout-body, .score .panel-body { flex: 1; min-height: 0; overflow-y: auto; }
}
@media (max-width: 1220px) {
  .lab { grid-template-columns: minmax(0, 1fr) 400px; }
  .lab .gunpick { grid-column: 1 / -1; }
  .gunpick .panel-body { max-height: 330px; overflow-y: auto; }
}
@media (max-width: 860px) { .lab { grid-template-columns: minmax(0, 1fr); } }
.lab > .panel.locked { opacity: 0.45; filter: saturate(0.25); pointer-events: none; user-select: none; }
.lock-body { flex: 1; display: grid; place-content: center; text-align: center; padding: 30px 22px; color: var(--muted); font-size: 13.5px; max-width: 40ch; margin: 0 auto; }
.lock-body .big { display: block; font-family: var(--cond); font-size: 22px; color: var(--text); margin-bottom: 6px; }
.step { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.step-n { flex: none; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; font-family: var(--cond); font-size: 18px; font-weight: 700; margin-top: 1px; }
.step-n.now { background: var(--accent); color: #1a1405; }
.step-n.done { background: var(--good-dim); color: var(--good); border: 1px solid rgba(71, 209, 124, 0.45); }
.step-n.wait { background: var(--panel3); color: var(--dim); }
.actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; align-items: center; }

/* gun picker: the shop's list, grouped by class */
.gunpick .panel-body { padding: 10px; }
.gunpick .chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.gunpick .chips::-webkit-scrollbar { display: none; }
.gunpick .chip { white-space: nowrap; }
.tiles { display: grid; grid-template-columns: 1fr; gap: 4px; margin-top: 8px; min-width: 0; }
.tile-group { grid-column: 1 / -1; font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.07em; font-size: 12px; color: var(--dim); padding: 8px 4px 0; }
.tile-group:first-child { padding-top: 0; }
@media (max-width: 1220px) { .tiles { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } }
@media (max-width: 860px) {
  .tiles { display: flex; overflow-x: auto; gap: 6px; padding-bottom: 6px; scroll-snap-type: x proximity; }
  .tile { flex: 0 0 150px; scroll-snap-align: start; }
  .tile-group { display: none; }
  .gunpick .panel-h { padding: 10px 12px 6px; }
  .gunpick .panel-h h2 { font-size: 20px; }
}
.tile {
  display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: auto auto; gap: 0 10px; align-items: center; text-align: left;
  padding: 6px 8px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg2); color: var(--text);
}
.tile:hover { border-color: var(--line2); background: var(--panel2); }
.tile.active { border-color: var(--accent); background: var(--accent-dim); }
.tile-name { font-family: var(--cond); font-size: 16px; font-weight: 600; line-height: 1.1; align-self: end; }
.tile-meta { color: var(--muted); font-size: 11px; line-height: 1.25; align-self: start; }

/* the gun identity strip at the top of the loadout */
.gun-id { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 14px; padding: 12px 12px 0; }
.gun-title { display: block; font-family: var(--cond); font-size: 24px; font-weight: 600; line-height: 1.1; }
.gun-id .sub { display: block; color: var(--muted); font-size: 12.5px; margin-top: 2px; }
.gun-id .note { flex: 1 1 260px; }

/* loadout */
.slots { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; padding: 12px; }
@media (max-width: 560px) { .slots { grid-template-columns: 1fr; } }
.slot { position: relative; background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 10px 9px; }
.slot.open { border-color: var(--accent); z-index: 5; }
.slot-h { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.slot-name { font-family: var(--cond); font-size: 15px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.slot-h .spacer { flex: 1; }
.slot-cur {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; padding: 8px 10px;
  border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--panel2); color: var(--text);
}
.slot-cur:hover { border-color: #4a5468; background: var(--panel3); }
/* the name never shrinks while the kind line has anything left to give (any shrink at all would put an ellipsis on it) */
.slot-cur .cur-name { font-weight: 600; flex: 1 0 auto; max-width: 70%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.slot-cur .cur-name.empty { color: var(--dim); font-weight: 400; }
.slot-cur .cur-sub { color: var(--dim); font-size: 11px; white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.slot-cur .caret { color: var(--dim); font-size: 11px; }
.slot .pills { margin-top: 7px; min-height: 18px; }
.slot .slot-foot { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11.5px; color: var(--dim); }
.picker-backdrop { position: fixed; inset: 0; z-index: 40; background: rgba(0, 0, 0, 0.5); }
.picker {
  position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(620px, 94vw); max-height: min(80vh, 760px); display: flex; flex-direction: column;
  background: var(--panel2); border: 1px solid var(--accent); border-radius: var(--r); box-shadow: 0 24px 60px rgba(0,0,0,0.7);
  padding: 10px;
}
.picker-top { display: flex; align-items: center; gap: 10px; padding: 2px 4px 8px; }
.picker-top b { font-family: var(--cond); font-size: 19px; text-transform: uppercase; letter-spacing: 0.04em; }
.picker-top .btn { margin-left: auto; }
.picker-q { width: 100%; padding: 8px 10px; border-radius: var(--r-sm); border: 1px solid var(--line2); background: var(--bg2); color: var(--text); font: inherit; }
.picker-q:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.picker-list { flex: 1; min-height: 0; overflow: auto; margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.prow {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 2px 8px; text-align: left;
  padding: 7px 9px; border-radius: 5px; border: 1px solid transparent; background: transparent; color: var(--text);
}
.prow:hover { background: var(--panel3); }
.prow.sel { border-color: var(--accent); background: var(--accent-dim); }
.prow-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow-tags { color: var(--dim); font-size: 11px; text-align: right; white-space: nowrap; }
.prow-pills { grid-column: 1 / -1; }
.picker-empty { padding: 12px; color: var(--dim); text-align: center; }
.picker-h { display: flex; justify-content: space-between; align-items: center; padding: 4px 4px 6px; font-size: 11.5px; color: var(--dim); }

/* scorecard */
.score .panel-body { padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; overflow-x: hidden; }
.score .panel-body > * { min-width: 0; flex-shrink: 0; }   /* a column flexbox may not squash a child (the hint note was shrunk to its min-height and the percentile box drew over it) */
.score-top { display: flex; align-items: flex-start; gap: 16px; }
.gauge-wrap { position: relative; width: 140px; flex: 0 0 140px; }
.gauge-wrap svg { display: block; width: 100%; height: auto; }
.gauge-val { position: absolute; left: 0; right: 0; top: 36px; text-align: center; font-family: var(--cond); font-size: 38px; font-weight: 700; line-height: 1; }
.gauge-cap { position: absolute; left: 0; right: 0; top: 76px; text-align: center; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.1em; }
.grade { position: absolute; right: 2px; top: 0; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; font-family: var(--cond); font-size: 22px; font-weight: 700; color: #111; }
.grade.S { background: var(--g-s); } .grade.A { background: var(--g-a); } .grade.B { background: var(--g-b); } .grade.C { background: var(--g-c); } .grade.D { background: var(--g-d); }
.score-text { flex: 1; min-width: 0; }
.score-title { font-family: var(--cond); font-size: 22px; font-weight: 600; }
.score-verdict { color: var(--text); margin: 4px 0 8px; min-height: 2.9em; }
.score-line { color: var(--muted); font-size: 12.5px; margin-top: 3px; }
.score-line b { color: var(--text); }

.pctl { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 10px 12px; }
.pctl-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.pctl-h { align-items: center; margin-bottom: 4px; }
.pctl-t { font-family: var(--cond); font-size: 15px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.hist { display: block; width: 100%; height: 64px; margin: 6px 0 4px; }
.pctl-sub { font-size: 12px; color: var(--muted); }

.bands { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1500px) and (min-width: 1221px) { .bands { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .bands { grid-template-columns: 1fr; } }
.band { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 10px; min-width: 0; overflow: hidden; }
.band-h { display: flex; justify-content: space-between; align-items: baseline; }
.band-h span:first-child { font-family: var(--cond); font-size: 15px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); }
.band-score { font-family: var(--cond); font-size: 24px; font-weight: 700; }
.minibar { position: relative; height: 6px; border-radius: 3px; background: var(--panel3); margin: 6px 0; overflow: visible; }
.minibar > div { height: 100%; border-radius: 3px; background: var(--accent); }
.minibar .mark { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--text); opacity: 0.7; }
.band-pct { font-size: 12px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band-pct b { color: var(--accent); }
.band-warn { margin-top: 6px; font-size: 11.5px; color: var(--accent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.comps-h, .sheet summary { font-family: var(--cond); font-size: 16px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); }
.comp { display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 8px; font-size: 12.5px; }
.comp-l small { white-space: nowrap; }
.comp-l { color: var(--text); font-weight: 500; }
.comp-l small { display: block; color: var(--dim); font-weight: 400; font-size: 11px; }
.bar { position: relative; height: 10px; border-radius: 5px; background: var(--panel3); }
.bar .fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, #6b7a90, var(--info)); }
.bar .mark { position: absolute; top: -4px; width: 2px; height: 18px; background: var(--dim); }
.bar .mark.best { background: var(--accent); }
.bar .mark.stock { background: var(--muted); }
.comp-v { font-family: var(--mono); font-size: 12px; color: var(--muted); text-align: right; white-space: nowrap; }
.comps-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
/* a chart's key: small pills at the top right, never a line of text under the chart */
.key { display: flex; gap: 6px; flex: none; }
.key span { font-size: 11px; color: var(--dim); border: 1px solid var(--line); border-radius: 999px; padding: 2px 8px; background: var(--panel3); white-space: nowrap; }
.key i { display: inline-block; width: 2px; height: 10px; vertical-align: -1px; margin-right: 5px; border-radius: 1px; }

.share { display: flex; flex-wrap: wrap; gap: 8px; }
.sheet { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px 12px; }
.sheet summary { cursor: pointer; }
.sheet table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; }
.sheet th, .sheet td { padding: 5px 6px; border-top: 1px solid var(--line); text-align: left; }
.sheet th { color: var(--dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.sheet td.num { font-family: var(--mono); text-align: right; }
.sheet .good { color: var(--good); } .sheet .bad { color: var(--bad); }
.sheet h4 { margin: 12px 0 4px; font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

/* dropdown menu */
.dropdown { position: relative; }
.menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 25; min-width: 240px; background: var(--panel2); border: 1px solid var(--line2); border-radius: var(--r-sm); box-shadow: 0 16px 40px rgba(0,0,0,0.6); padding: 4px; }
.menu button { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; padding: 8px 10px; border: 0; background: none; border-radius: 4px; color: var(--text); }
.menu button:hover { background: var(--panel3); }
.menu button small { color: var(--dim); }

/* ---------- rankings ---------- */
.rank-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.tabs { display: flex; gap: 4px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px; }
.tabs button { padding: 7px 14px; border: 0; background: transparent; border-radius: 4px; color: var(--muted); font-weight: 500; }
.tabs button:hover { color: var(--text); }
.tabs button.active { background: var(--panel3); color: var(--text); }
.rank-blurb { color: var(--muted); font-size: 13px; margin: 0 0 12px; min-height: 3.9em; }
table.rank { width: 100%; border-collapse: collapse; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
table.rank th, table.rank td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--line); }
table.rank th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); font-weight: 500; background: var(--bg2); }
table.rank td.num, table.rank th.num { text-align: right; font-family: var(--mono); font-size: 12.5px; }
table.rank tr.row { cursor: pointer; }
table.rank tr.row:hover td { background: var(--panel2); }
table.rank td.gun { font-family: var(--cond); font-size: 17px; font-weight: 600; }
table.rank td.gun small { display: block; font-family: var(--font); font-size: 11px; color: var(--dim); font-weight: 400; }
.scorecell { display: flex; align-items: center; gap: 10px; min-width: 160px; }
.scorecell .bar { flex: 1; height: 8px; }
.scorecell b { font-family: var(--mono); width: 44px; text-align: right; }
.rank-wrap { overflow-x: auto; }
.rankpos { font-family: var(--cond); font-size: 18px; color: var(--dim); width: 34px; }
.rankpos.top { color: var(--accent); }

/* ---------- compare ---------- */
.cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 860px) { .cmp { grid-template-columns: 1fr; } }
.cmp .empty { padding: 40px 20px; text-align: center; color: var(--muted); }
.cmp-col h2 { font-size: 26px; }
.cmp-items { list-style: none; margin: 0; padding: 0; font-size: 12.5px; }
.cmp-items li { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.cmp-items li span:first-child { color: var(--dim); }
table.diff { width: 100%; table-layout: fixed; border-collapse: collapse; margin-top: 16px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
table.diff th, table.diff td { padding: 8px 16px; border-bottom: 1px solid var(--line); text-align: left; }
table.diff th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--dim); font-weight: 500; background: var(--bg2); text-align: right; }
table.diff th.a, table.diff td.a { width: 50%; border-right: 16px solid var(--bg); }   /* the same 16px gap as between the two cards */
table.diff .cell { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
table.diff .lbl small { display: block; font-size: 11px; }
table.diff .num { font-family: var(--mono); white-space: nowrap; }
table.diff .win { color: var(--good); font-weight: 600; }
table.diff .lose { color: var(--muted); }
table.diff tr.section td { background: var(--bg2); color: var(--muted); font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.05em; font-size: 13px; }
.cmp-scores { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 10px; }
.cmp-score { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 8px; text-align: center; }
.cmp-score span { display: block; font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: 0.05em; }
.cmp-score b { font-family: var(--cond); font-size: 24px; font-weight: 700; }
.cmp-score.win { border-color: var(--good); }
.cmp-score small { display: block; font-size: 11px; color: var(--muted); }

/* ---------- about ---------- */
.about { max-width: 860px; margin: 0 auto; }
.about .panel { padding: 18px 22px; margin-bottom: 14px; }
.about h2 { font-size: 28px; margin-bottom: 8px; }
.about h3 { font-size: 20px; margin: 16px 0 6px; color: var(--accent); }
.about p, .about li { color: var(--text); font-size: 14px; }
.about li { margin: 4px 0; }
.about table { width: 100%; border-collapse: collapse; margin: 8px 0 12px; font-size: 13px; }
.about th, .about td { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.about th { color: var(--dim); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.about .big { font-family: var(--cond); font-size: 20px; color: var(--accent); }

/* ---------- misc ---------- */
.hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.hero h1 { font-size: 30px; }
.hero p { margin: 2px 0 0; color: var(--muted); }
.rank-hero p { min-height: 2.9em; }
.kbd { font-family: var(--mono); font-size: 11px; padding: 1px 5px; border: 1px solid var(--line2); border-radius: 4px; color: var(--muted); }

/* ---------- svg bits ---------- */
.g-bg { fill: none; stroke: var(--panel3); stroke-width: 12; stroke-linecap: round; }
.g-val { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: round; }
.g-val.g-S { stroke: var(--g-s); } .g-val.g-A { stroke: var(--g-a); } .g-val.g-B { stroke: var(--g-b); } .g-val.g-C { stroke: var(--g-c); } .g-val.g-D { stroke: var(--g-d); }
.hist .bars rect { fill: #3a4352; }
.hist line { stroke-width: 2; }
.hist line.you { stroke: var(--accent); }
.hist line.best { stroke: var(--text); stroke-dasharray: 3 3; }
.hist line.bare { stroke: var(--muted); stroke-dasharray: 3 3; }
select.btn { appearance: auto; }

/* ---------- small-screen sticky score bar ---------- */
.mini { display: none; }
@media (max-width: 860px) {
  .mini {
    position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 30; display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 10px; border: 1px solid var(--line2); background: rgba(21, 24, 29, 0.96);
    box-shadow: 0 10px 30px rgba(0,0,0,0.6); text-align: left; color: var(--text);
  }
  .mini .mini-grade { position: static; width: 30px; height: 30px; font-size: 18px; border-radius: 6px; }
  .mini-main { flex: 1; min-width: 0; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mini-main b { font-family: var(--cond); font-size: 20px; color: var(--text); }
  .mini-bands { display: flex; gap: 8px; font-size: 11px; color: var(--dim); font-family: var(--mono); }
  .mini-bands b { color: var(--text); }
  .app { padding-bottom: 76px; }
}

/* ---------- game art ---------- */
/* Shop icons come two ways - transparent, or baked onto an opaque black square. textures.py keys the black
   out and lifts the dark tones of every icon, so they all sit on the card the same way with no blend mode
   (a `lighten` blend erased the dark grey ones - suppressors, the VSD). */
.art {
  display: block; object-fit: contain; background: transparent;
  border-radius: var(--r-sm); flex: none;
}
.art.noart, .art.empty-img {
  display: grid; place-items: center; color: var(--dim); font-family: var(--cond); font-size: 13px;
  text-transform: uppercase; background: repeating-linear-gradient(135deg, #1c2027 0 6px, #191d23 6px 12px);
}
/* gun picker tile */
.tile-img { grid-column: 1; grid-row: 1 / span 2; width: 62px; height: 34px; padding: 1px 2px; }
/* loadout / compare header */
.loadout-id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.hero-img { width: 190px; height: 86px; padding: 4px 6px; }
.gun-id .hero-img { width: 150px; height: 68px; }
@media (max-width: 560px) { .hero-img { width: 120px; height: 60px; } }
/* fitted part on a slot card */
.slot-img { width: 46px; height: 34px; padding: 2px; }
/* rows in the part picker */
.prow { grid-template-columns: auto minmax(0, 1fr) auto; }
.prow-pills { grid-column: 1 / -1; }
.prow-img { grid-row: 1 / span 2; width: 54px; height: 40px; padding: 2px; align-self: center; }
/* rankings table */
.gun-cell { display: flex; align-items: center; gap: 10px; }
.rank-img { width: 74px; height: 34px; padding: 1px 3px; }
@media (max-width: 700px) { .rank-img { display: none; } }
/* compare part list */
.cmp-part { display: inline-flex; align-items: center; gap: 7px; text-align: right; }
.cmp-img { width: 34px; height: 24px; padding: 1px; }

@media (max-width: 700px) {
  .panel-h { flex-wrap: wrap; }
  .loadout .panel-h > .actions { width: 100%; justify-content: flex-start; }
  .loadout-id { flex: 1 1 100%; }
  .hero-img { width: 104px; height: 52px; }
  .panel-h h2 { font-size: 22px; }
}

/* segmented with/without-attachments switch */
.tabs.seg button { font-size: 13px; }
.tabs.seg button.active { background: var(--accent-dim); color: var(--accent); }
table.rank td.num small { font-size: 11px; }

/* "Improve this build": one heading, one row per tool (label / one line / control), results under the row */
.improve { padding: 6px 12px 2px; }
.improve .comps-h { margin-bottom: 2px; }
.imp-row { display: flex; align-items: center; gap: 12px; padding: 8px 0; min-height: 40px; }
.imp-row + .imp-row, .imp-body + .imp-row { border-top: 1px solid var(--line); }
.imp-k { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.04em; font-size: 12.5px; color: var(--muted); width: 46px; flex: none; }
.imp-d { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: var(--dim); }
.imp-row > .btn { flex: none; margin-left: auto; }
.imp-body { padding: 0 0 8px; }
.imp-body > p { margin: 0 0 6px; }
.loadout-foot { margin: 4px 12px 12px; padding-top: 8px; border-top: 1px solid var(--line); }
.upg {
  display: grid; grid-template-columns: 54px minmax(0, 1fr) auto; gap: 4px 10px; align-items: center; width: 100%; text-align: left;
  padding: 7px 9px; margin-bottom: 6px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--bg2); color: var(--text);
}
.upg:hover { border-color: var(--accent); background: var(--panel2); }
.upg-img { width: 54px; height: 38px; padding: 2px; }
.upg-main { min-width: 0; font-size: 12.5px; }
.upg-main b { font-weight: 600; }
.upg-slot { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-size: 12px; }
.upg-main .pills { margin-top: 4px; }
.upg-delta { text-align: right; white-space: nowrap; color: var(--muted); font-size: 12px; }
.upg-delta b.pos { color: var(--good); font-family: var(--cond); font-size: 20px; margin-right: 4px; }
.upg-delta small { display: flex; gap: 6px; justify-content: flex-end; margin-top: 3px; font-size: 11px; }

/* score-as switch and clickable view boxes */
.focus-row { display: flex; align-items: center; gap: 10px; }
.focus-row .tabs.seg button { padding: 5px 11px; font-size: 12.5px; }
.band { text-align: left; font: inherit; color: inherit; cursor: pointer; width: 100%; }
.band:hover { border-color: var(--line2); background: var(--panel2); }

/* stable scorecard: the scored view is highlighted, never removed; the breakdown keeps its height */
.band.focus { border-color: var(--accent); background: var(--accent-dim); }
.band.focus .band-h span:first-child { color: var(--accent); }
table.rank td.num.cur { color: var(--accent); font-weight: 600; }

/* the loadout header stays clickable above a part-picker backdrop, so Reset / Load / Score always act */
.loadout > .panel-h { position: relative; z-index: 42; }

.cmp-score small.ref { color: var(--dim); margin-top: 2px; }

/* compare: per-side best-build swap */
.cmp-load { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; margin-bottom: 10px; }
.cmp-load .tabs.seg button { padding: 4px 10px; font-size: 12px; }

/* in-theme confirm dialog */
.modal {
  position: fixed; z-index: 41; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(460px, 92vw);
  background: var(--panel2); border: 1px solid var(--accent); border-radius: var(--r); box-shadow: 0 24px 60px rgba(0,0,0,0.7); padding: 18px 20px 16px;
}
.modal h3 { font-size: 24px; margin-bottom: 8px; }
.modal p { margin: 0 0 16px; color: var(--muted); font-size: 13.5px; line-height: 1.5; }
.modal p b { color: var(--text); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* tuner */
.imp-row.tune { align-items: flex-start; }
.imp-row.tune .imp-k { padding-top: 8px; }
.imp-row.tune > .btn { margin-top: 2px; }
.tune-form { display: flex; flex-direction: column; gap: 8px; color: var(--text); }
.tune-line { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-height: 32px; }
.tune-form select.btn { appearance: auto; width: auto; min-width: 150px; }
/* protected-stat chips read as toggles: a plus to add, a tick when held */
.tune-form .chip { padding: 4px 9px 4px 8px; font-size: 11.5px; }
.tune-form .chip::before { content: '+'; display: inline-block; width: 10px; margin-right: 3px; color: var(--dim); font-weight: 600; }
.tune-form .chip.active::before { content: '\2713'; color: var(--accent); }
.tune-none { margin-left: 2px; }
/* results: one card, one row per answer */
.tune-out { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--r-sm); margin-top: 2px; }
.tune-r { display: grid; grid-template-columns: 92px minmax(0, 1fr) auto; gap: 3px 12px; align-items: center; padding: 9px 11px; }
.tune-r + .tune-r { border-top: 1px solid var(--line); }
.tune-eb { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.05em; font-size: 12px; color: var(--muted); align-self: start; padding-top: 2px; }
.tune-main { min-width: 0; font-size: 13px; }
.tune-main b { font-weight: 600; }
.tune-main .pills { margin-top: 4px; }
.tune-parts { margin-top: 3px; font-size: 12.5px; line-height: 1.5; }
.tune-part .sl { font-family: var(--cond); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11.5px; color: var(--muted); margin-right: 2px; }
.tune-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; font-size: 12px; font-family: var(--mono); white-space: nowrap; }
.tune-stat.main .delta { font-size: 14px; font-weight: 600; }
.tune-act { grid-column: 3; justify-self: end; }
.tune-r:has(.tune-stats) .tune-act { grid-column: 3; grid-row: 2; }
.tune-r:has(.tune-stats) .tune-stats { grid-row: 1; }
.tune-r:has(.tune-stats) .tune-main { grid-row: 1 / span 2; }
.tune-r:has(.tune-stats) .tune-eb { grid-row: 1 / span 2; }
.tune-cap { margin: 0; padding: 6px 11px 7px; border-top: 1px solid var(--line); }
/* parts page */
table.parts th.sortable { cursor: pointer; user-select: none; }
table.parts th.sortable:hover { color: var(--text); }
table.parts th.on { color: var(--accent); }
table.parts td.num.good { color: var(--good); }
table.parts td.num.bad { color: var(--bad); }
.parts-q { width: 220px; flex: none; }
.swatch { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: -2px; border: 1px solid var(--line2); }

/* trimmed scorecard */
.hint-slot { min-height: 8px; flex: none; }
.gun-note { margin: 10px 12px 0; }


/* scrollbars in theme: thin, dark track, muted thumb that brightens on hover */
* { scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--line2); border-radius: 6px; border: 2px solid var(--panel); }
*::-webkit-scrollbar-thumb:hover { background: #4a5468; }
*::-webkit-scrollbar-corner { background: transparent; }

/* step headers: title shrinks, the action buttons never wrap */
.lab > .panel > .panel-h { flex-wrap: nowrap; align-items: flex-start; }
.lab > .panel > .panel-h .step { flex: 1 1 auto; min-width: 0; }
.lab > .panel > .panel-h .step h2 { font-size: 24px; white-space: nowrap; }
.lab > .panel > .panel-h .actions { flex: none; flex-wrap: nowrap; }

/* controls that sit beside a tab strip match its height */
.rank-head .tabs { height: 40px; align-items: center; }
.rank-head select.tabs-h, .rank-head .parts-q { height: 40px; padding: 0 12px; box-sizing: border-box; }

/* slot switcher on the parts page: a tab strip like the one above it, with counts */
.slot-tabs { flex-wrap: wrap; height: auto; }
.slot-tabs button { padding: 7px 12px; font-size: 13px; }
.slot-tabs button small { color: var(--dim); font-family: var(--mono); font-size: 11px; margin-left: 3px; }
.slot-tabs button.active small { color: var(--accent); }

/* the disclaimer sits in the header, always visible */
.unofficial { margin-left: auto; font-size: 12px; color: var(--accent); border: 1px solid rgba(242,182,50,0.45); background: var(--accent-dim); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
@media (max-width: 1100px) { .unofficial { display: none; } .foot::before { content: 'Unofficial fan project - not affiliated with Reissad Studio or Bodycam. '; color: var(--accent); } }

/* attachment compatibility */
.slot.incompat .slot-cur { border-color: rgba(255, 77, 77, 0.55); }
.pill.bad { color: var(--bad, #ff6b6b); border-color: rgba(255, 77, 77, 0.4); }
.prow.nofit { opacity: 0.55; }
.prow.nofit .prow-name::after { content: ''; }

/* ---------- playstyle ---------- */
.ps-btn { margin-left: 6px; padding: 6px 11px; border-radius: 999px; border: 1px solid var(--line2); background: transparent; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.ps-btn b { color: var(--text); font-weight: 600; }
.ps-btn:hover { color: var(--text); border-color: #4a5468; }
.ps-btn.on { border-color: var(--accent); background: var(--accent-dim); color: var(--accent); }
.ps-btn.on b { color: var(--accent); }
.modal.ps { width: min(580px, 94vw); max-height: 92vh; overflow-y: auto; }
.modal.ps h4 { margin: 16px 0 6px; font-family: var(--cond); font-size: 17px; letter-spacing: 0.03em; text-transform: uppercase; color: var(--muted); }
.modal.ps h4 small { font-family: var(--font); font-size: 12px; text-transform: none; letter-spacing: 0; margin-left: 6px; color: var(--dim); }
.modal.ps .ps-row { display: grid; grid-template-columns: 150px minmax(0, 1fr) 48px; align-items: center; gap: 10px; padding: 3px 0; }
.modal.ps .ps-k { font-size: 13px; }
.modal.ps .ps-v { text-align: right; font-family: var(--cond); font-size: 17px; }
.modal.ps input[type=range] { width: 100%; accent-color: var(--accent); margin: 0; }
.modal.ps .ps-seg { grid-column: 2 / -1; justify-self: start; }
.modal.ps .ps-caveat { margin: 14px 0 12px; }
.modal.ps .btn[disabled] { opacity: 0.45; cursor: default; }
.ps-note { margin-left: auto; color: var(--muted); white-space: nowrap; }
.ps-note b { color: var(--accent); }
.ps-banner { border-left: 3px solid var(--accent); padding-left: 10px; }