/* ==========================================================================
   COMBINE-FC — pitch-lineup.css
   Starting XI screen: vertical pitch graphic (own goal at the bottom,
   attacking goal at the top) with 11 draggable 4-3-3 position slots, plus
   the bench tray beneath it. Structural pattern mirrors combine's
   combine-lineup.css (aspect-ratio pitch, absolute-positioned slots), FC's
   own token/visual language.
   ========================================================================== */

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

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

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

/* ------ B) Pitch ------ */
.fc-pitch {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 500 / 700;
}
.fc-pitch__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: var(--r-md);
  overflow: hidden;
}
.fc-pitch__turf {
  fill: var(--c-turf);
}
.fc-pitch__line {
  fill: none;
  stroke: var(--c-chalk-a35);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.fc-pitch__spot {
  fill: var(--c-chalk-a35);
}
.fc-pitch__goal {
  fill: var(--c-chalk-dim);
}

.fc-pitch__slot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 19%;
  min-width: 74px;
  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, 12, 9, 0.4);
  cursor: pointer;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fc-pitch__slot:hover,
.fc-pitch__slot:focus-visible {
  border-color: var(--c-line-strong);
}
.fc-pitch__slot:focus-visible {
  outline: 2px solid var(--c-lime-bright);
  outline-offset: 2px;
}
.fc-pitch__slot.is-target {
  border-color: var(--c-lime);
  border-style: solid;
  background: color-mix(in srgb, var(--c-lime) 14%, rgba(6, 12, 9, 0.4));
}
.fc-pitch__slot.is-drag-over {
  border-color: var(--c-lime-bright);
  border-style: solid;
  box-shadow: var(--glow-sm);
  transform: translate(-50%, -50%) scale(1.04);
}
.fc-pitch__slot.is-filled {
  border-style: solid;
  border-color: var(--c-line-strong);
  background: var(--c-panel);
  cursor: default;
  padding: 0;
}

.fc-pitch__slot[data-slot="gk"]  { left: 50%; top: 92%; }
.fc-pitch__slot[data-slot="lb"]  { left: 14%; top: 76%; }
.fc-pitch__slot[data-slot="cb1"] { left: 38%; top: 80%; }
.fc-pitch__slot[data-slot="cb2"] { left: 62%; top: 80%; }
.fc-pitch__slot[data-slot="rb"]  { left: 86%; top: 76%; }
.fc-pitch__slot[data-slot="cdm"] { left: 50%; top: 60%; }
.fc-pitch__slot[data-slot="cml"] { left: 28%; top: 46%; }
.fc-pitch__slot[data-slot="cmr"] { left: 72%; top: 46%; }
.fc-pitch__slot[data-slot="lw"]  { left: 15%; top: 22%; }
.fc-pitch__slot[data-slot="st"]  { left: 50%; top: 12%; }
.fc-pitch__slot[data-slot="rw"]  { left: 85%; top: 22%; }

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

/* ------ C) Filled-slot chip ------ */
.fc-slot-chip {
  --fc-chip-hue: var(--c-lime);
  position: relative;
  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(--fc-chip-hue);
  cursor: grab;
}
.fc-slot-chip:active {
  cursor: grabbing;
}
.fc-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;
}
.fc-slot-chip__remove svg {
  width: 11px;
  height: 11px;
}
.fc-slot-chip__remove:hover {
  filter: brightness(1.15);
}
.fc-slot-chip__ovr {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--fc-chip-hue);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.fc-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;
}
.fc-slot-chip__pos {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.1em;
  color: var(--c-text-3);
}

/* ------ D) Bench tray ------ */
.fc-lineup__bench {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding-top: var(--s-4);
  border-top: var(--bw) solid var(--c-line);
}
.fc-lineup__bench-head {
  font-family: var(--font-display);
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  color: var(--c-text-2);
}
.fc-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);
}
.fc-lineup__bench-list.is-drag-over {
  border-color: var(--c-lime-bright);
  border-style: solid;
  background: var(--c-lime-a10);
}
.fc-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);
}

.fc-bench-chip {
  --fc-chip-hue: var(--c-lime);
  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(--fc-chip-hue);
  border-radius: var(--r-sm);
  cursor: grab;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.fc-bench-chip:active {
  cursor: grabbing;
}
.fc-bench-chip:hover {
  background: var(--c-panel-2);
}
.fc-bench-chip:focus-visible {
  outline: 2px solid var(--c-lime-bright);
  outline-offset: 2px;
}
.fc-bench-chip.is-selected {
  border-color: var(--c-lime);
  background: color-mix(in srgb, var(--c-lime) 14%, var(--c-panel));
  box-shadow: var(--glow-sm);
}
.fc-bench-chip__ovr {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--fc-chip-hue);
  font-variant-numeric: tabular-nums;
}
.fc-bench-chip__name {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--c-text);
}
.fc-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) {
  .fc-lineup__head {
    flex-direction: column;
    align-items: flex-start;
  }
  .fc-pitch__slot {
    width: 24%;
    min-width: 58px;
    padding: var(--s-1);
  }
  .fc-pitch__slot-label {
    font-size: var(--fs-body);
  }
}

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