.squad-head {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s5);
  margin-bottom: var(--s5);
  align-items: start;
}

/* When players are out, the alert panel sits beside the overview. */
.squad-head:has(.squad-panel-alert) {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
}

.squad-overview {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  align-items: center;
  justify-content: space-between;
}

.squad-overview-main {
  flex: 1 1 320px;
  min-width: 0;
}

.squad-overview h3 {
  margin-bottom: var(--s3);
}

.squad-lineup-cta {
  flex: 0 0 auto;
  white-space: nowrap;
}

.squad-list-row {
  padding: var(--s2) 0;
  font-size: var(--fs-sm);
  color: var(--text);
}

.squad-list-row + .squad-list-row {
  border-top: 1px solid var(--line);
}

.squad-panel-alert {
  border-color: color-mix(in srgb, var(--bad) 52%, var(--line-strong));
}

.bigstats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(88px, 1fr));
  gap: var(--s3);
}

.bigstat {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-2) 88%, transparent), color-mix(in srgb, var(--surface) 82%, transparent)),
    var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-1);
  padding: var(--s4);
  text-align: center;
}

.bigstat .bs-num {
  display: block;
  font-size: clamp(1.65rem, 1.4rem + 1vw, 2.2rem);
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}

.bigstat .bs-label {
  display: block;
  margin-top: var(--s2);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.bs-num-accent {
  color: var(--gold);
}

.bs-num-good {
  color: var(--good);
}

.bs-num-bad {
  color: var(--bad);
}

.squad-toolbar {
  display: flex;
  align-items: center;
  gap: var(--s3);
  margin-bottom: var(--s4);
  flex-wrap: wrap;
}

.squad-roster-title {
  margin: 0;
}

.squad-toolbar select {
  margin-left: auto;
}

/* ---- position groups ---- */
.squad-groups {
  display: grid;
  gap: var(--s5);
}

.squad-group-head {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid color-mix(in srgb, var(--role, var(--line-strong)) 28%, var(--line));
}

.squad-group-dot {
  align-self: center;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--role, var(--accent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--role, var(--accent)) 55%, transparent);
}

.squad-group-name {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: color-mix(in srgb, var(--role, var(--text)) 72%, var(--text));
}

.squad-group-meta {
  font-size: var(--fs-sm);
  color: var(--text-2);
}

/* ---- comparison tables ---- */
.squad-table-wrap {
  overflow-x: auto;
}

.squad-table {
  table-layout: auto;
}

.squad-table th,
.squad-table td {
  vertical-align: middle;
  white-space: nowrap;
}

.squad-table th {
  position: sticky;
  top: 0;
}

.squad-table th.sq-attr {
  text-align: right;
  color: color-mix(in srgb, var(--role, var(--text-3)) 55%, var(--text-3));
  cursor: help;
}

.squad-table td.sq-attr {
  cursor: help;
}

.squad-table .c-shirt {
  width: 2.2rem;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}

.squad-table .c-name {
  width: 100%;
  white-space: normal;
}

.squad-row {
  cursor: pointer;
  transition: background-color 140ms ease;
}

.squad-row:hover {
  background: color-mix(in srgb, var(--role, var(--surface-2)) 12%, transparent);
}

.squad-row.is-out {
  opacity: 0.62;
}

.row-ava {
  display: inline-block;
  vertical-align: middle;
}

.row-ava canvas {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.row-id {
  display: inline-flex;
  flex-direction: column;
  gap: 0.1rem;
  vertical-align: middle;
  margin-left: var(--s2);
}

.row-name {
  font-weight: 600;
  color: var(--text);
}

.row-tags {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-size: var(--fs-cap);
}

.row-tags .badge {
  min-height: 1.25rem;
  padding: 0 0.4rem;
  font-size: 0.62rem;
}

.row-pos {
  letter-spacing: 0.02em;
}

/* Morale + form: a compact mood dot and a form arrow. */
.mood {
  display: inline-flex;
  align-items: center;
}
.mood-dot {
  display: inline-block;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset;
  vertical-align: middle;
}
.form-arrow {
  font-size: 0.62rem;
  line-height: 1;
  margin-left: -0.1rem;
}
.pm-tags .mood-dot {
  margin-right: 0.25rem;
}

.squad-table .c-ovr,
.squad-table td.sq-attr {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.ovr {
  font-weight: 700;
}

.attr-val {
  font-weight: 600;
}

td.sq-attr.is-boosted {
  background: color-mix(in srgb, var(--good) 9%, transparent);
}

.attr-mod {
  margin-left: 0.15rem;
  color: var(--good);
  font-size: 0.7em;
  font-weight: 700;
  vertical-align: super;
}

.squad-roster-note {
  margin-bottom: var(--s4);
  font-size: var(--fs-cap);
  line-height: 1.5;
}

.squad-roster-note .attr-mod {
  margin: 0;
  vertical-align: baseline;
}

.c-gear .eq-chip + .eq-chip {
  margin-left: 0.25rem;
}

.gear-none {
  font-size: var(--fs-sm);
}

.pm-portrait canvas {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 1.65rem;
  padding: 0.1rem 0.5rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-2) 94%, transparent);
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 700;
}

.badge.starter {
  border-color: color-mix(in srgb, var(--good) 40%, var(--line-strong));
  color: var(--good);
}

.badge.bench {
  border-color: color-mix(in srgb, var(--steel) 34%, var(--line-strong));
  color: color-mix(in srgb, var(--steel) 65%, var(--text));
}

.badge.inj {
  border-color: color-mix(in srgb, var(--bad) 42%, var(--line-strong));
  color: var(--bad);
}

/* Captaincy: the (C) badge, header line and active-band chip. */
.badge.cap {
  min-width: 1.65rem;
  padding: 0.1rem 0.4rem;
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line-strong));
  color: var(--accent);
  font-weight: 800;
}
.captain-line {
  margin-top: var(--s3);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}
.cap-c {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 55%, var(--line-strong));
  color: var(--accent);
  font-weight: 800;
  font-size: 0.7rem;
}
.band-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.1rem 0.5rem 0.1rem 0.2rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  font-size: 0.72rem;
  font-weight: 700;
}
.band-chip-art {
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 50%;
  object-fit: cover;
}

.kb {
  display: grid;
  grid-template-columns: 3.4rem 1fr 2rem;
  gap: var(--s2);
  align-items: center;
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.kb span,
.kb b {
  position: relative;
  z-index: 1;
}

.kb b {
  color: var(--text);
  font-weight: 600;
  text-align: right;
}

.kb-track {
  position: relative;
  overflow: hidden;
  height: 0.5rem;
  background: color-mix(in srgb, var(--bg) 82%, var(--surface));
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
}

.kb-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  box-shadow: 0 0 14px color-mix(in srgb, currentColor 26%, transparent);
  transition: width 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

.kb-fill.grow {
  width: var(--w);
}

/* ---- equipped gear ---- */
.eq-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--r-md);
  border: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface-2) 90%, transparent);
  font-size: 0.95rem;
  line-height: 1;
  cursor: help;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

.eq-chip:hover {
  transform: translateY(-1px);
}

.eq-chip.rar-common { border-color: color-mix(in srgb, var(--rar-common) 45%, var(--line)); }
.eq-chip.rar-magic { border-color: color-mix(in srgb, var(--rar-magic) 50%, var(--line)); }
.eq-chip.rar-rare { border-color: color-mix(in srgb, var(--rar-rare) 55%, var(--line)); }
.eq-chip.rar-epic {
  border-color: color-mix(in srgb, var(--rar-epic) 60%, var(--line));
  box-shadow: 0 0 10px color-mix(in srgb, var(--rar-epic) 22%, transparent);
}
.eq-chip.rar-legendary {
  border-color: color-mix(in srgb, var(--rar-legendary) 65%, var(--line));
  box-shadow: 0 0 12px color-mix(in srgb, var(--rar-legendary) 30%, transparent);
}

.pm-equip {
  margin-top: var(--s4);
  border-top: 1px solid var(--line);
  padding-top: var(--s4);
}

.pm-equip-head {
  font-size: var(--fs-h3);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--s3);
}

.player-modal {
  max-width: 760px;
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background:
    radial-gradient(circle at top, color-mix(in srgb, var(--surface-2) 54%, transparent), transparent 60%),
    linear-gradient(180deg, color-mix(in srgb, var(--surface) 98%, transparent), color-mix(in srgb, var(--bg-raised) 96%, transparent));
  box-shadow: var(--shadow-2);
  backdrop-filter: var(--blur);
}

.player-modal.tier-gold {
  border-color: color-mix(in srgb, var(--gold) 36%, var(--line-strong));
}

.player-modal.tier-silver {
  border-color: color-mix(in srgb, var(--steel) 34%, var(--line-strong));
}

.player-modal.tier-bronze {
  border-color: color-mix(in srgb, var(--ember) 30%, var(--line-strong));
}

.pm-head {
  display: flex;
  gap: var(--s4);
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--s4);
  margin-bottom: var(--s4);
}

.pm-id {
  flex: 1;
}

.pm-name {
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.7rem);
  font-weight: 700;
  color: var(--text);
}

.pm-meta {
  margin-top: var(--s2);
  font-size: var(--fs-sm);
  color: var(--text-2);
}

.pm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s3);
}

.pm-rating {
  font-size: clamp(2.6rem, 2.2rem + 1.4vw, 3.6rem);
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 0 22px color-mix(in srgb, var(--gold) 18%, transparent);
}

.pm-body {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
  gap: var(--s5);
  align-items: start;
}

.pm-radar {
  width: 100%;
  max-width: 280px;
}

.pm-attrs {
  display: grid;
  gap: var(--s2);
}

.pm-attrs .kb {
  grid-template-columns: 5rem 1fr 2.8rem;
}

.pm-attrs .kb b {
  white-space: nowrap;
}

.pm-attrs .kb-boosted .kb-fill {
  box-shadow: 0 0 14px color-mix(in srgb, var(--good) 32%, transparent);
}

.pm-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--s4);
}

.modal-backdrop {
  backdrop-filter: var(--blur);
}

@media (max-width: 980px) {
  .squad-head,
  .squad-head:has(.squad-panel-alert) {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 860px) {
  .pm-body {
    grid-template-columns: 1fr;
  }

  .pm-radar {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .bigstats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pm-head {
    flex-wrap: wrap;
  }

  .pm-doll {
    grid-template-columns: 1fr;
  }
  .doll-figure { order: -1; }
}

/* ===================== Diablo-style paper-doll ===================== */
.pm-doll {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: var(--s4);
  align-items: center;
  margin-bottom: var(--s4);
  padding-bottom: var(--s4);
  border-bottom: 1px solid var(--line);
}

.doll-col {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
}

.doll-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s2);
}
.doll-caption { font-size: 0.7rem; }

/* a gear slot on the body */
.doll-slot {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface-2) 88%, transparent);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease;
}
.doll-slot:hover {
  transform: translateY(-1px);
  border-color: var(--line-strong);
  background: color-mix(in srgb, var(--surface-2) 98%, transparent);
}

/* The captain's-armband slot (shown only for the elected captain) wears the
   captain accent so the empty slot invites a band; a filled band keeps its
   rarity colour (higher-specificity .filled.rar-* rules win). */
.doll-slot[data-slot="CAPTAIN"] {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 9%, var(--surface-2));
}
.doll-slot .ds-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  font-size: 1.1rem;
  line-height: 1;
}
.doll-slot .ds-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.2;
}
.doll-slot .ds-name,
.doll-slot .ds-slot {
  font-weight: 600;
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doll-slot .ds-aff,
.doll-slot .ds-empty {
  font-size: 0.66rem;
  color: var(--text-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.doll-slot.empty {
  border-style: dashed;
  opacity: 0.85;
}
.doll-slot.empty .ds-icon { opacity: 0.5; }

.doll-slot.filled.rar-common { border-color: color-mix(in srgb, var(--rar-common) 45%, var(--line)); }
.doll-slot.filled.rar-magic { border-color: color-mix(in srgb, var(--rar-magic) 50%, var(--line)); }
.doll-slot.filled.rar-magic .ds-name { color: var(--rar-magic); }
.doll-slot.filled.rar-rare { border-color: color-mix(in srgb, var(--rar-rare) 55%, var(--line)); }
.doll-slot.filled.rar-rare .ds-name { color: var(--rar-rare); }
.doll-slot.filled.rar-epic {
  border-color: color-mix(in srgb, var(--rar-epic) 60%, var(--line));
  box-shadow: 0 0 10px color-mix(in srgb, var(--rar-epic) 18%, transparent);
}
.doll-slot.filled.rar-epic .ds-name { color: var(--rar-epic); }
.doll-slot.filled.rar-legendary {
  border-color: color-mix(in srgb, var(--rar-legendary) 65%, var(--line));
  box-shadow: 0 0 12px color-mix(in srgb, var(--rar-legendary) 26%, transparent);
}
.doll-slot.filled.rar-legendary .ds-name { color: var(--rar-legendary); }

/* slot pop-over: pick a compatible item */
.slot-pop {
  position: fixed;
  z-index: 1200;
  width: 16rem;
  max-height: 60vh;
  overflow-y: auto;
  padding: var(--s2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--surface) 96%, transparent);
  box-shadow: var(--shadow-2);
  backdrop-filter: var(--blur);
}
.slot-pop .sp-head {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-3);
  padding: 0.2rem 0.4rem 0.4rem;
}
.sp-item {
  display: flex;
  align-items: center;
  gap: var(--s2);
  width: 100%;
  padding: 0.4rem 0.45rem;
  border: 1px solid transparent;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}
.sp-item:hover { background: color-mix(in srgb, var(--surface-2) 90%, transparent); }
.sp-item .sp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
  flex: none;
  border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  font-size: 0.95rem;
}
.sp-item .sp-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.sp-item .sp-name { font-weight: 600; font-size: var(--fs-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-item .sp-aff { font-size: 0.66rem; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-item.rar-magic .sp-name { color: var(--rar-magic); }
.sp-item.rar-rare .sp-name { color: var(--rar-rare); }
.sp-item.rar-epic .sp-name { color: var(--rar-epic); }
.sp-item.rar-legendary .sp-name { color: var(--rar-legendary); }
.sp-item.sp-current {
  border-color: color-mix(in srgb, var(--bad) 40%, var(--line));
  margin-bottom: var(--s1);
}
.sp-item.sp-current .sp-name { color: var(--bad); }
.sp-empty { padding: 0.5rem 0.45rem; font-size: var(--fs-sm); }

/* ===================== club stash tray (drag source/target) ===================== */
.stash-panel { margin-top: var(--s4); }
.stash-hint { font-size: var(--fs-sm); }

.stash-tray {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  min-height: 3.2rem;
  padding: var(--s2);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--bg) 60%, var(--surface));
  transition: border-color 140ms ease, background 140ms ease;
}

.gear-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  max-width: 13rem;
  padding: 0.3rem 0.55rem 0.3rem 0.35rem;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--surface-2) 92%, transparent);
  cursor: grab;
  user-select: none;
}
.gear-chip:active { cursor: grabbing; }
.gear-chip .gc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--bg) 70%, var(--surface));
  font-size: 0.9rem;
}
.gear-chip .gc-name {
  font-size: var(--fs-sm);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gear-chip.rar-magic { border-color: color-mix(in srgb, var(--rar-magic) 50%, var(--line)); }
.gear-chip.rar-magic .gc-name { color: var(--rar-magic); }
.gear-chip.rar-rare { border-color: color-mix(in srgb, var(--rar-rare) 55%, var(--line)); }
.gear-chip.rar-rare .gc-name { color: var(--rar-rare); }
.gear-chip.rar-epic { border-color: color-mix(in srgb, var(--rar-epic) 60%, var(--line)); }
.gear-chip.rar-epic .gc-name { color: var(--rar-epic); }
.gear-chip.rar-legendary { border-color: color-mix(in srgb, var(--rar-legendary) 65%, var(--line)); }
.gear-chip.rar-legendary .gc-name { color: var(--rar-legendary); }

/* drag affordances */
.eq-chip[draggable="true"] { cursor: grab; }
.eq-chip[draggable="true"]:active { cursor: grabbing; }
body.gear-dragging .squad-row { outline: 1px dashed transparent; }
.squad-row.drop-target {
  outline: 2px solid var(--good);
  outline-offset: -2px;
  background: color-mix(in srgb, var(--good) 8%, transparent);
}
.stash-tray.drop-target {
  border-color: var(--good);
  border-style: solid;
  background: color-mix(in srgb, var(--good) 8%, var(--surface));
}