/* Gameweek Explained SquadPitch — SP3B-7 common-scale packed mobile refinement. */
[data-gwe-squad-pitch] {
  --squad-pitch-ink: #f8fbff;
  --squad-pitch-muted: rgba(248, 251, 255, 0.78);
  --squad-pitch-metric: #9fe9ff;
  --squad-pitch-stage: #07101d;
  position: relative;
  display: block;
  width: min(100%, 34rem);
  aspect-ratio: 9 / 16;
  min-width: 0;
  overflow: hidden;
  background: var(--squad-pitch-stage);
  color: var(--squad-pitch-ink);
  font-family: "GWE Inter", Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  container-type: inline-size;
}

[data-gwe-squad-pitch],
[data-gwe-squad-pitch] *,
[data-gwe-squad-pitch] *::before,
[data-gwe-squad-pitch] *::after {
  box-sizing: border-box;
}

.squad-pitch__geometry,
.squad-pitch__overlay,
.squad-pitch__unit {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.squad-pitch__geometry {
  display: block;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}

.squad-pitch__overlay {
  z-index: 1;
}

.squad-pitch__unit {
  /*
   * One common visual scale is a hard mobile-layout constraint.
   * Formation staggering must create the room; player content is not shrunk
   * merely because a unit contains four or five players.
   */
  --given-size: clamp(0.58rem, 3.15cqw, 0.85rem);
  --surname-size: clamp(0.70rem, 3.95cqw, 1.05rem);
  --metric-size: clamp(0.58rem, 3.15cqw, 0.85rem);
  --badge-size: clamp(2.55rem, 13cqw, 3.5rem);
  pointer-events: none;
}

.squad-pitch__slot {
  position: absolute;
  top: var(--slot-y);
  left: var(--slot-x);
  display: grid;
  justify-items: center;
  width: var(--visual-slot-width, var(--slot-width));
  min-width: 0;
  transform: translate(-50%, var(--slot-translate-y, -50%));
  pointer-events: auto;
}

/*
 * SP3B-5 visual footprints deliberately exceed the old equal-row cell widths
 * where vertical staggering creates safe room. This is the mechanism that
 * converts unused pitch space into larger readable player content.
 */
.squad-pitch__unit[data-template="FWD-1"] .squad-pitch__slot {
  --visual-slot-width: 38%;
  --slot-translate-y: -100%;
}

.squad-pitch__unit[data-template="FWD-2"] .squad-pitch__slot {
  --visual-slot-width: 32%;
  --slot-translate-y: -100%;
}

.squad-pitch__unit[data-template="FWD-3"] .squad-pitch__slot {
  --visual-slot-width: 30%;
  --slot-translate-y: -100%;
}

.squad-pitch__unit[data-template="FWD-3"] .squad-pitch__slot[data-slot="CF"] {
  --visual-slot-width: 32%;
}

[data-gwe-squad-pitch][data-formation="3-4-3"] .squad-pitch__unit[data-template="FWD-3"] .squad-pitch__slot[data-slot="LF"],
[data-gwe-squad-pitch][data-formation="3-4-3"] .squad-pitch__unit[data-template="FWD-3"] .squad-pitch__slot[data-slot="RF"] {
  --visual-slot-width: 36%;
}

[data-gwe-squad-pitch][data-formation="4-3-3"] .squad-pitch__unit[data-template="FWD-3"] .squad-pitch__slot[data-slot="LF"],
[data-gwe-squad-pitch][data-formation="4-3-3"] .squad-pitch__unit[data-template="FWD-3"] .squad-pitch__slot[data-slot="RF"] {
  --visual-slot-width: 36%;
}

[data-gwe-squad-pitch][data-formation="5-2-3"] .squad-pitch__unit[data-template="FWD-3"] .squad-pitch__slot[data-slot="LF"],
[data-gwe-squad-pitch][data-formation="5-2-3"] .squad-pitch__unit[data-template="FWD-3"] .squad-pitch__slot[data-slot="RF"] {
  --visual-slot-width: 36%;
}

.squad-pitch__unit[data-template="MID-2-CENTRAL"] .squad-pitch__slot {
  --visual-slot-width: 36%;
}

.squad-pitch__unit[data-template="MID-3-CENTRAL-V"] .squad-pitch__slot[data-slot="LCM"],
.squad-pitch__unit[data-template="MID-3-CENTRAL-V"] .squad-pitch__slot[data-slot="RCM"] {
  --visual-slot-width: 30%;
}

.squad-pitch__unit[data-template="MID-3-CENTRAL-V"] .squad-pitch__slot[data-slot="DM"] {
  --visual-slot-width: 32%;
}

.squad-pitch__unit[data-template="DEF-4"] .squad-pitch__slot[data-slot="LB"],
.squad-pitch__unit[data-template="DEF-4"] .squad-pitch__slot[data-slot="RB"] {
  --visual-slot-width: 28%;
}

.squad-pitch__unit[data-template="DEF-4"] .squad-pitch__slot[data-slot="LCB"],
.squad-pitch__unit[data-template="DEF-4"] .squad-pitch__slot[data-slot="RCB"] {
  --visual-slot-width: 24%;
}

.squad-pitch__unit[data-template="DEF-3"] .squad-pitch__slot {
  --visual-slot-width: 30%;
}


.squad-pitch__unit[data-template="GKP-1"] .squad-pitch__slot {
  --visual-slot-width: 38%;
  --slot-translate-y: 0%;
}

.squad-pitch__unit[data-template="MID-5-WIDE-STACK"] .squad-pitch__slot[data-slot="LM"],
.squad-pitch__unit[data-template="MID-5-WIDE-STACK"] .squad-pitch__slot[data-slot="RM"] {
  --visual-slot-width: 32%;
}

[data-gwe-squad-pitch][data-formation="3-5-2"] .squad-pitch__unit[data-template="MID-5-WIDE-STACK"] .squad-pitch__slot[data-slot="LM"],
[data-gwe-squad-pitch][data-formation="3-5-2"] .squad-pitch__unit[data-template="MID-5-WIDE-STACK"] .squad-pitch__slot[data-slot="RM"],
[data-gwe-squad-pitch][data-formation="4-5-1"] .squad-pitch__unit[data-template="MID-5-WIDE-STACK"] .squad-pitch__slot[data-slot="LM"],
[data-gwe-squad-pitch][data-formation="4-5-1"] .squad-pitch__unit[data-template="MID-5-WIDE-STACK"] .squad-pitch__slot[data-slot="RM"] {
  --visual-slot-width: 36%;
}

.squad-pitch__unit[data-template="MID-5-WIDE-STACK"] .squad-pitch__slot[data-slot="LCM"],
.squad-pitch__unit[data-template="MID-5-WIDE-STACK"] .squad-pitch__slot[data-slot="RCM"] {
  --visual-slot-width: 30%;
}

.squad-pitch__unit[data-template="MID-5-WIDE-STACK"] .squad-pitch__slot[data-slot="AM"] {
  --visual-slot-width: 32%;
}

.squad-pitch__unit[data-template="MID-4-CENTRAL-STACK-RIGHT"] .squad-pitch__slot[data-slot="LCM"],
.squad-pitch__unit[data-template="MID-4-CENTRAL-STACK-RIGHT"] .squad-pitch__slot[data-slot="RM"] {
  --visual-slot-width: 29%;
}

.squad-pitch__unit[data-template="MID-4-CENTRAL-STACK-RIGHT"] .squad-pitch__slot[data-slot="AM"],
.squad-pitch__unit[data-template="MID-4-CENTRAL-STACK-RIGHT"] .squad-pitch__slot[data-slot="DM"] {
  --visual-slot-width: 32%;
}

.squad-pitch__unit[data-template="MID-4"] .squad-pitch__slot[data-slot="LM"],
.squad-pitch__unit[data-template="MID-4"] .squad-pitch__slot[data-slot="RM"] {
  --visual-slot-width: 24%;
}

.squad-pitch__unit[data-template="MID-4"] .squad-pitch__slot[data-slot="LCM"],
.squad-pitch__unit[data-template="MID-4"] .squad-pitch__slot[data-slot="RCM"] {
  --visual-slot-width: 19%;
}


/*
 * SP3C-7B 4-4-2 interleaved packing.
 * SP3C-7C keeps widened long-surname territories while restoring the
 * standard badge-first content order for every 4-4-2 player. Geometry alone
 * now separates the wide and central text bands.
 */
[data-gwe-squad-pitch][data-formation="4-4-2"] .squad-pitch__unit[data-template="MID-4"] .squad-pitch__slot[data-slot="LM"],
[data-gwe-squad-pitch][data-formation="4-4-2"] .squad-pitch__unit[data-template="MID-4"] .squad-pitch__slot[data-slot="RM"] {
  --visual-slot-width: 36%;
}

[data-gwe-squad-pitch][data-formation="4-4-2"] .squad-pitch__unit[data-template="MID-4"] .squad-pitch__slot[data-slot="LCM"],
[data-gwe-squad-pitch][data-formation="4-4-2"] .squad-pitch__unit[data-template="MID-4"] .squad-pitch__slot[data-slot="RCM"] {
  --visual-slot-width: 32%;
}

[data-gwe-squad-pitch][data-formation="4-4-2"] .squad-pitch__unit[data-template="DEF-4"] .squad-pitch__slot[data-slot="LB"],
[data-gwe-squad-pitch][data-formation="4-4-2"] .squad-pitch__unit[data-template="DEF-4"] .squad-pitch__slot[data-slot="RB"] {
  --visual-slot-width: 36%;
}

[data-gwe-squad-pitch][data-formation="4-4-2"] .squad-pitch__unit[data-template="DEF-4"] .squad-pitch__slot[data-slot="LCB"],
[data-gwe-squad-pitch][data-formation="4-4-2"] .squad-pitch__unit[data-template="DEF-4"] .squad-pitch__slot[data-slot="RCB"] {
  --visual-slot-width: 32%;
}


.squad-pitch__unit[data-template="DEF-5"] .squad-pitch__slot[data-slot="LWB"],
.squad-pitch__unit[data-template="DEF-5"] .squad-pitch__slot[data-slot="RWB"] {
  --visual-slot-width: 28%;
}

.squad-pitch__unit[data-template="DEF-5"] .squad-pitch__slot[data-slot="LCB"],
.squad-pitch__unit[data-template="DEF-5"] .squad-pitch__slot[data-slot="RCB"] {
  --visual-slot-width: 25%;
}

.squad-pitch__unit[data-template="DEF-5"] .squad-pitch__slot[data-slot="CB"] {
  --visual-slot-width: 24%;
}

.squad-pitch__player {
  display: grid;
  justify-items: center;
  align-content: start;
  width: 100%;
  min-width: 0;
  max-width: 9.5rem;
  gap: 0.08rem;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.98), 0 0 7px rgba(0, 0, 0, 0.7);
}

.squad-pitch__club {
  display: grid;
  place-items: center;
  width: var(--badge-size);
  height: var(--badge-size);
  margin-bottom: 0.06rem;
}

.squad-pitch__club-badge {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.65));
}

.squad-pitch__club--fallback {
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 50%;
  background: rgba(7, 16, 29, 0.9);
  color: var(--squad-pitch-ink);
  font-size: 0.58rem;
  font-weight: 800;
  line-height: 1;
}

.squad-pitch__given-name,
.squad-pitch__surname,
.squad-pitch__metric {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: clip;
  line-height: 1.05;
}

.squad-pitch__given-name {
  color: var(--squad-pitch-muted);
  font-size: var(--given-size);
  font-weight: 560;
}

.squad-pitch__surname {
  color: var(--squad-pitch-ink);
  font-size: var(--surname-size);
  font-weight: 850;
  letter-spacing: 0;
}

.squad-pitch__metric {
  margin-top: 0.04rem;
  color: var(--squad-pitch-metric);
  font-size: var(--metric-size);
  font-variant-numeric: tabular-nums;
  font-weight: 720;
}

[data-gwe-squad-pitch][data-guides="true"] .squad-pitch__slot {
  outline: 1px dashed rgba(159, 233, 255, 0.55);
}

[data-gwe-squad-pitch][data-guides="true"] .squad-pitch__slot::before {
  content: attr(data-guide-label);
  position: absolute;
  left: 0;
  bottom: 100%;
  color: rgba(159, 233, 255, 0.88);
  font-size: 0.52rem;
  line-height: 1;
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}

[data-gwe-squad-pitch][data-guides="true"]::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: 0;
  bottom: 0;
  left: 50%;
  border-left: 1px dashed rgba(159, 233, 255, 0.32);
  pointer-events: none;
}

/* Names retain their established two-line hierarchy. The staggered slots allow
 * the intrinsic text width without altering slot coordinates or type scale. */
.squad-pitch__given-name,
.squad-pitch__surname {
  width: max-content;
  overflow: visible;
}