/* ==========================================================================
   COMBINE — combine-lineup.css
   Starting Five screen: half-court graphic (baseline through the 3-point
   line) with 5 draggable position slots, plus the bench tray beneath it.
   Sibling of css/combine-team.css.
   ========================================================================== */

#cb-screen-lineup .container {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  padding-top: var(--s-4);
  padding-bottom: var(--s-8);
}

.cb-lineup {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

/* ------ A) Head ------ */
.cb-lineup__head {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  align-items: center;
  justify-content: space-between;
}
.cb-lineup__title-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  min-width: 0;
}
.cb-lineup__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h1);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--c-text);
}
.cb-lineup__tagline {
  font-size: var(--fs-small);
  color: var(--c-text-2);
  max-width: 52ch;
}
.cb-lineup__ovr {
  --cb-ovr-hue: var(--cb-accent);
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: var(--bw) solid var(--cb-ovr-hue);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, color-mix(in srgb, var(--cb-ovr-hue) 12%, transparent), transparent);
}
.cb-lineup__ovr-num {
  font-family: var(--cb-font-num);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1;
  color: var(--cb-ovr-hue);
  font-variant-numeric: tabular-nums;
}
.cb-lineup__ovr-label {
  font-family: var(--font-display);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  color: var(--c-text-3);
}

/* ------ selecting banner (shown while placing a bench player) ------ */
.cb-lineup__selecting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-4);
  background: color-mix(in srgb, var(--cb-accent) 14%, var(--c-panel));
  border: var(--bw) solid var(--cb-accent);
  border-radius: var(--r-md);
  box-shadow: var(--glow-sm);
}
.cb-lineup__selecting.is-hidden {
  display: none;
}
.cb-lineup__selecting-text {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--c-text);
}

.cb-lineup__season-cta {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-4);
  background: var(--c-panel);
  border: var(--bw) solid var(--cb-accent);
  border-radius: var(--r-md);
  box-shadow: var(--glow-sm);
}
.cb-lineup__season-hint {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.08em;
  color: var(--c-text-2);
}

/* ------ A2) Content — main column (court + bench) + side (synergies) ------ */
.cb-lineup__content {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  align-items: flex-start;
}
.cb-lineup__main {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  min-width: 0;
  width: 100%;
}
.cb-lineup__aside {
  width: 100%;
}

@media (min-width: 980px) {
  .cb-lineup__content {
    flex-direction: row;
  }
  .cb-lineup__main {
    flex: 1 1 auto;
    width: auto;
  }
  .cb-lineup__aside {
    flex: 0 0 320px;
    width: 320px;
    position: sticky;
    top: var(--s-5);
    max-height: calc(100vh - var(--s-8));
    overflow-y: auto;
  }
}

/* ------ B) Court ------ */
.cb-court {
  position: relative;
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
  aspect-ratio: 500 / 420;
}
.cb-court__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
}
.cb-court__floor {
  fill: var(--cb-hardwood);
}
.cb-court__line {
  fill: none;
  stroke: var(--cb-line-white-dim);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.cb-court__hoop-backboard {
  fill: var(--cb-line-white-dim);
}
.cb-court__hoop-rim {
  stroke: var(--cb-accent);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.cb-court__slot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 19%;
  min-width: 76px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--s-2);
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-md);
  background: rgba(6, 4, 3, 0.35);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.cb-court__slot:hover,
.cb-court__slot:focus-visible {
  border-color: var(--c-line-strong);
}
.cb-court__slot:focus-visible {
  outline: 2px solid var(--cb-accent-bright);
  outline-offset: 2px;
}
.cb-court__slot.is-target {
  border-color: var(--cb-accent);
  border-style: solid;
  background: color-mix(in srgb, var(--cb-accent) 14%, rgba(6, 4, 3, 0.35));
}
.cb-court__slot.is-drag-over {
  border-color: var(--cb-accent-bright);
  border-style: solid;
  box-shadow: var(--glow-sm);
  transform: translate(-50%, -50%) scale(1.04);
}
.cb-court__slot.is-filled {
  border-style: solid;
  border-color: var(--c-line-strong);
  background: var(--c-panel);
  cursor: default;
  padding: 0;
}
.cb-court__slot.is-filled.is-target {
  box-shadow: 0 0 0 2px var(--cb-accent), var(--glow-sm);
  cursor: pointer;
}

.cb-court__slot[data-slot="pg"] { left: 50%; top: 14%; }
.cb-court__slot[data-slot="sg"] { left: 84%; top: 40%; }
.cb-court__slot[data-slot="sf"] { left: 16%; top: 40%; }
.cb-court__slot[data-slot="pf"] { left: 66%; top: 76%; }
.cb-court__slot[data-slot="c"]  { left: 50%; top: 91%; }

.cb-court__slot-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  letter-spacing: 0.08em;
  color: var(--c-text-3);
}
.cb-court__slot-hint {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.14em;
  color: var(--c-text-3);
}

/* ------ C) Filled-slot chip ------ */
.cb-slot-chip {
  --cb-chip-hue: var(--cb-accent);
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: var(--s-2) var(--s-1);
  border-radius: inherit;
  border-left: 3px solid var(--cb-chip-hue);
  cursor: grab;
}
.cb-slot-chip[data-grade="A"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 45%;
  background: linear-gradient(115deg, transparent 15%, color-mix(in srgb, var(--cb-grade-a) 65%, white 25%) 50%, transparent 85%);
  animation: cb-legendary-sweep 3s ease-in-out infinite;
  pointer-events: none;
}
/* Epic (grade B) — a quiet radiating pulse, not the legendary sweep. */
.cb-slot-chip[data-grade="B"] {
  animation: cb-epic-pulse 3.2s ease-in-out infinite;
}
.cb-slot-chip:active {
  cursor: grabbing;
}
.cb-slot-chip__remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  padding: 0;
  color: var(--c-text-inv);
  background: var(--c-bad);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
}
.cb-slot-chip__remove svg {
  width: 11px;
  height: 11px;
}
.cb-slot-chip__remove:hover {
  filter: brightness(1.15);
}
.cb-slot-chip__ovrwrap {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.cb-slot-chip__ovr {
  font-family: var(--cb-font-num);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--cb-chip-hue);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.cb-slot-chip__eff {
  font-family: var(--cb-font-num);
  font-size: 0.6875rem;
  color: var(--c-warn);
  font-variant-numeric: tabular-nums;
}
.cb-slot-chip__fit {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  border: 1px solid currentColor;
}
.cb-slot-chip__fit.is-good {
  color: var(--c-ok);
}
.cb-slot-chip__fit.is-warn {
  color: var(--c-warn);
}
.cb-slot-chip__fit.is-bad {
  color: var(--c-bad);
}
.cb-slot-chip__synergy {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.06em;
  padding: 1px 5px;
  border-radius: var(--r-xs);
  border: 1px solid currentColor;
}
.cb-slot-chip__synergy.is-good {
  color: var(--cb-accent-bright);
}
.cb-slot-chip__synergy.is-bad {
  color: var(--c-bad);
}
.cb-slot-chip__silhouette {
  width: 22px;
  height: 22px;
  color: var(--c-text-3);
}
.cb-slot-chip__name {
  font-family: var(--font-display);
  font-size: 0.625rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--c-text);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
}
.cb-slot-chip__pos {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--c-text-3);
}

/* ------ C2) Active synergies panel ------ */
.cb-lineup__synergy {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.cb-lineup__synergy.is-empty {
  display: none;
}
.cb-lineup__synergy-title {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  color: var(--c-text-2);
}
.cb-lineup__synergy-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.cb-synergy {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-2) var(--s-3);
  border: var(--bw) solid var(--cb-accent-bright);
  border-left: 3px solid var(--cb-accent-bright);
  border-radius: var(--r-xs);
  background: var(--c-gold-a10);
}
.cb-synergy.is-negative {
  border-color: var(--c-bad);
  border-left-color: var(--c-bad);
  background: transparent;
}
.cb-synergy__amt {
  flex: 0 0 auto;
  font-family: var(--cb-font-num);
  font-weight: 700;
  font-size: 1rem;
  color: var(--cb-accent-bright);
  font-variant-numeric: tabular-nums;
}
.cb-synergy.is-negative .cb-synergy__amt {
  color: var(--c-bad);
}
.cb-synergy__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.cb-synergy__label {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--c-text);
}
.cb-synergy__blurb {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  color: var(--c-text-2);
}

/* ------ D) Bench tray ------ */
.cb-lineup__bench {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: var(--bw) solid var(--c-line);
}
.cb-lineup__bench-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}
.cb-lineup__bench-count {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  color: var(--c-text-2);
}
.cb-lineup__bench-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
  min-height: 56px;
  padding: var(--s-3);
  border: 1px dashed var(--c-line-2);
  border-radius: var(--r-md);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cb-lineup__bench-list.is-drag-over {
  border-color: var(--cb-accent-bright);
  border-style: solid;
  background: var(--c-gold-a10);
}
.cb-lineup__bench-empty {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.1em;
  color: var(--c-text-3);
  padding: var(--s-2);
}

.cb-bench-chip {
  --cb-chip-hue: var(--cb-accent);
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--c-panel);
  border: var(--bw) solid var(--c-line);
  border-left: 3px solid var(--cb-chip-hue);
  border-radius: var(--r-sm);
  cursor: grab;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.cb-bench-chip[data-grade="A"]::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 45%;
  background: linear-gradient(115deg, transparent 15%, color-mix(in srgb, var(--cb-grade-a) 65%, white 25%) 50%, transparent 85%);
  animation: cb-legendary-sweep 3s ease-in-out infinite;
  pointer-events: none;
}
/* Epic (grade B) — a quiet radiating pulse, not the legendary sweep. */
.cb-bench-chip[data-grade="B"] {
  animation: cb-epic-pulse 3.2s ease-in-out infinite;
}
.cb-bench-chip:active {
  cursor: grabbing;
}
.cb-bench-chip:hover {
  background: var(--c-panel-2);
}
.cb-bench-chip:focus-visible {
  outline: 2px solid var(--cb-accent-bright);
  outline-offset: 2px;
}
.cb-bench-chip.is-selected {
  border-color: var(--cb-accent);
  background: color-mix(in srgb, var(--cb-accent) 14%, var(--c-panel));
  box-shadow: var(--glow-sm);
}
.cb-bench-chip__ovr {
  font-family: var(--cb-font-num);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--cb-chip-hue);
  font-variant-numeric: tabular-nums;
}
.cb-bench-chip__name {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-text);
}
.cb-bench-chip__pos {
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.08em;
  color: var(--c-text-3);
}

/* ------ E) Responsive ------ */
@media (max-width: 620px) {
  .cb-lineup__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .cb-court__slot {
    width: 24%;
    min-width: 60px;
    padding: var(--s-1);
  }
  .cb-court__slot-label {
    font-size: var(--fs-body);
  }
  .cb-slot-chip__silhouette {
    display: none;
  }
}

/* ------ F) Reduced motion ------ */
@media (prefers-reduced-motion: reduce) {
  .cb-court__slot {
    transition: none;
  }
}