/* The squad builder (/squad-builder), first sheet: the page, the stage with the squad's numbers, the pitch in
   perspective and the cards standing on it. The tray of substitutes and reserves, the side panel and everything
   under the stage are in squad-side.css. */
html[data-page="squad"] main {
  max-width: none;
  padding: 0;
}
.sq {
  /* The site's own colours: chemistry is the one cool colour, coins are gold, actions are the site's green. */
  --sq-chem: #5fd3f3;
  --sq-coin: var(--gold, #ffd166);
  --sq-glass: rgba(10, 16, 15, 0.86);
  --sq-edge: var(--line-strong, rgba(214, 255, 232, 0.17));
  --sq-ground: #101716;
  max-width: 1960px;
  margin: 0 auto;
  padding: 14px clamp(10px, 1.5vw, 28px) 56px;
}
.sq-loading {
  margin: 40px 0;
  text-align: center;
  color: var(--mut);
  font: 600 16px var(--sans);
}
h1.sq-loading {
  margin: 60px 0 0;
  color: var(--ink);
  font: 800 44px/1 var(--display);
}
.sq-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(340px, 23vw, 430px);
  gap: 16px;
  align-items: stretch;
}

/* The stage: a plain dark ground, so the pitch is the one bright thing on it. */
.sq-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line, rgba(214, 255, 232, 0.08));
  border-radius: 14px;
  background: var(--sq-ground);
}

/* Above the pitch: the squad's name and its numbers. */
.sq-hud {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 10px;
  padding: 14px clamp(14px, 1.4vw, 24px) 12px;
  border-bottom: 1px solid var(--line, rgba(214, 255, 232, 0.08));
}
/* First row: the squad's name, then the market and Share at the right. */
.sq-hud-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-width: 0;
}
.sq-name {
  flex: 1 1 auto;
  min-width: 0;
}
.sq-hud-actions {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
}
/* Second row: the formation, then the squad's three numbers, each read as a number and what it is. */
.sq-figures {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px clamp(18px, 2.2vw, 48px);
}
.sq-page {
  margin: 0 0 2px;
  color: var(--mut, #9aa8a0);
  font: 500 13px/1.3 var(--sans);
  letter-spacing: normal;
}
.sq-name-button {
  display: flex;
  align-items: baseline;
  gap: 10px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: 800 clamp(28px, 2.2vw, 38px)/1 var(--display);
  cursor: pointer;
}
.sq-name-button span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sq-name-button i {
  color: var(--mut);
  font: 400 20px var(--sans);
  opacity: 0.7;
}
.sq-name-button:hover i {
  opacity: 1;
  color: var(--ink);
}
.sq-rename {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
.sq-rename input {
  width: min(320px, 46vw);
  padding: 7px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  background: var(--bg, #0c1010);
  color: var(--ink);
  font: 700 18px var(--sans);
}
.sq-fact {
  display: grid;
  justify-items: start;
  gap: 6px;
  white-space: nowrap;
}
.sq-fact p {
  margin: 0;
  line-height: 0.9;
}
.sq-fact b {
  color: var(--ink);
  font: 800 clamp(30px, 2.3vw, 40px)/0.9 var(--display);
  font-variant-numeric: tabular-nums;
}
.sq-fact small {
  margin-left: 2px;
  color: var(--ink-2, #cbd2cc);
  font: 500 14px/1.2 var(--sans);
}
.sq-fact .sq-placed {
  color: var(--mut, #9aa8a0);
  font: 500 12.5px var(--sans);
  font-style: normal;
}
.sq-fact.is-price b {
  color: var(--sq-coin);
}
.sq-fact.is-chem b {
  color: var(--sq-chem);
}
/* Chemistry, place by place: eleven groups of three marks, in the formation's order. */
.sq-strip {
  display: flex;
  gap: 5px;
}
.sq-strip span {
  display: flex;
  gap: 1.5px;
}
.sq-strip i {
  width: 5px;
  height: 11px;
  border-radius: 1px;
  background: rgba(255, 255, 255, 0.16);
}
.sq-strip i.on {
  background: var(--sq-chem);
}
.sq-strip .is-empty i {
  background: rgba(255, 255, 255, 0.06);
}
.sq-strip .is-out i {
  background: rgba(255, 120, 100, 0.45);
}
.sq-stars {
  display: inline-flex;
  gap: 2px;
  align-self: center;
}
.sq-stars i {
  width: 14px;
  height: 14px;
  background: rgba(255, 255, 255, 0.16);
  clip-path: polygon(50% 2%, 62% 36%, 98% 37%, 69% 59%, 80% 94%, 50% 73%, 20% 94%, 31% 59%, 2% 37%, 38% 36%);
}
.sq-stars i.on {
  background: var(--sq-coin);
}
.sq-stars i.half {
  background: linear-gradient(90deg, var(--sq-coin) 50%, rgba(255, 255, 255, 0.16) 50%);
}
/* The formation is written like the other figures, with arrows either side to step through EA's list. */
.sq-formation {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: -3px;
}
.sq-formation select {
  field-sizing: content;
  appearance: none;
  padding: 0 4px;
  border: 0;
  border-bottom: 2px solid var(--line-strong);
  border-radius: 0;
  background: none;
  color: var(--ink);
  font: 800 clamp(30px, 2.3vw, 40px)/1.05 var(--display);
  cursor: pointer;
}
.sq-formation select option {
  background: var(--panel, #131919);
  font: 600 16px var(--sans);
}
.sq-step {
  width: 28px;
  height: 36px;
  border: 0;
  border-radius: 6px;
  background: none;
  color: var(--mut);
  font: 400 26px/1 var(--sans);
  cursor: pointer;
}
.sq-step:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
}
.sq-formation select:hover,
.sq-formation select:focus-visible {
  border-bottom-color: var(--ink);
}
.sq-share {
  padding: 10px 18px;
  border: 0;
  border-radius: 8px;
  background: var(--pitch, #22e889);
  color: #04140b;
  font: 700 15px var(--sans);
  white-space: nowrap;
  cursor: pointer;
}
.sq-share:hover {
  background: #4ff0a3;
}
.sq-share:disabled {
  opacity: 0.4;
  cursor: default;
}

/* The pitch. Its drawing is 1000 by 760 and is stretched to the box, so a place given in percent stands on it. It is
   as big as the screen's height allows, so the whole squad is in view. */
.sq-field {
  position: relative;
  align-self: center;
  width: min(100%, max(720px, calc((100vh - 290px) / 0.76)));
  aspect-ratio: 1000 / 760;
  margin: 6px 0 4px;
  container-type: inline-size;
}
.sq-field.is-tall {
  max-width: 600px;
  aspect-ratio: 1000 / 1420;
}
.sq-turf {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.55));
}
.sq-turf-edge {
  fill: #0f5a30;
}
.sq-turf-grass {
  fill: #1b8240;
}
.sq-turf-stripes {
  fill: rgba(255, 255, 255, 0.07);
}
.sq-turf-lines {
  fill: none;
  stroke: rgba(255, 255, 255, 0.78);
  stroke-width: 2;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.sq-turf-goal {
  fill: rgba(255, 255, 255, 0.16);
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}
/* Floodlights from above and darker corners: the pitch is lit in the middle. */
.sq-field::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 50% at 50% 45%, rgba(255, 255, 255, 0.11), transparent 72%);
}
.sq-spots {
  position: absolute;
  inset: 0;
  z-index: 2;
}

/* A place: the card (or the empty outline) and, under it, its position, chemistry and price. */
.sq-spot {
  --w: calc(var(--card, 9.6) * 1cqw);
  position: absolute;
  display: grid;
  justify-items: center;
  width: var(--w);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transform: translate(-50%, -50%) scale(var(--near, 1));
  transition: transform 0.18s ease;
}
.sq-item {
  position: relative;
  display: block;
  width: 100%;
}
/* The shadow a card throws on the grass. */
.sq-field .sq-item::after {
  content: "";
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -5%;
  height: 12%;
  z-index: -1;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  filter: blur(7px);
}
.sq-spot .fut {
  filter: drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}
.sq-spot:hover,
.sq-spot:focus-visible,
.sq-spot.is-selected {
  z-index: 2000 !important;
}
.sq-spot:hover .fut {
  transform: translateY(-5%) scale(1.05);
  filter: drop-shadow(0 22px 22px rgba(0, 0, 0, 0.6));
}
/* The chosen card is lifted and outlined in white, as a manager's magnet would be picked off the board. */
.sq-spot.is-selected .fut {
  transform: translateY(-5%) scale(1.06);
  filter: drop-shadow(0 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 -2px 0 #fff) drop-shadow(2px 0 0 #fff) drop-shadow(-2px 0 0 #fff) drop-shadow(0 18px 18px rgba(0, 0, 0, 0.6));
}
.sq-spot.is-over .fut,
.sq-spot.is-over .sq-empty,
.sq-spot.is-swap:hover .fut,
.sq-spot.is-swap:hover .sq-empty {
  filter: drop-shadow(0 2px 0 var(--pitch)) drop-shadow(0 -2px 0 var(--pitch)) drop-shadow(2px 0 0 var(--pitch)) drop-shadow(-2px 0 0 var(--pitch));
}
.sq-spot.is-out .fut {
  filter: saturate(0.55) brightness(0.85) drop-shadow(0 10px 14px rgba(0, 0, 0, 0.5));
}
/* EA's card designs leave a margin inside their box, so an empty place is drawn a little smaller to match a card. */
.sq-empty {
  position: relative;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 4%;
  width: 86%;
  margin: 0 auto;
  aspect-ratio: 0.7 / 1;
  color: rgba(255, 255, 255, 0.85);
  clip-path: polygon(50% 0, 93% 5%, 100% 13%, 100% 86%, 90% 93%, 50% 100%, 10% 93%, 0 86%, 0 13%, 7% 5%);
  background: rgba(255, 255, 255, 0.13);
  transition:
    background 0.18s ease,
    transform 0.18s ease;
}
.sq-empty i {
  font: 300 calc(var(--w) * 0.3) / 1 var(--sans);
  font-style: normal;
}
.sq-empty b {
  font: 800 calc(var(--w) * 0.15) / 1 var(--display);
  letter-spacing: 0.08em;
}
.sq-spot:hover .sq-empty,
.sq-spot.is-selected .sq-empty {
  transform: translateY(-4%);
  background: rgba(255, 255, 255, 0.26);
}
/* On the pitch an empty place is a chalk ring with its position, as on a manager's tactics board. */
.sq-field .sq-empty {
  width: 90%;
  aspect-ratio: 1;
  gap: 1%;
  border: 2px dashed rgba(255, 255, 255, 0.78);
  border-radius: 50%;
  clip-path: none;
  background: rgba(4, 30, 14, 0.58);
}
.sq-field .sq-empty i {
  font-size: calc(var(--w) * 0.3);
}
.sq-field .sq-empty b {
  font-size: calc(var(--w) * 0.16);
}
.sq-field .sq-spot:hover .sq-empty,
.sq-field .sq-spot.is-selected .sq-empty {
  transform: none;
  border-style: solid;
  border-color: #fff;
  background: rgba(4, 30, 14, 0.65);
}
.sq-field .sq-item:has(.sq-empty)::after {
  display: none;
}
/* The label sits on the card's lower edge, over its six small numbers (the panel shows them in full), and is not part
   of the place's size: a place stands where its card stands. */
.sq-under {
  position: absolute;
  left: 50%;
  top: 76%;
  z-index: 2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  gap: 6px;
  transform: translateX(-50%);
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 6px;
  background: rgba(10, 16, 15, 0.9);
  white-space: nowrap;
  font: 700 clamp(12px, calc(var(--w) * 0.112), 15px) / 1.2 var(--sans);
}
.sq-pos {
  color: #fff;
  font-family: var(--display);
  font-size: 1.15em;
  letter-spacing: 0.03em;
}
.sq-pips {
  display: inline-flex;
  gap: 3px;
}
.sq-pips i {
  width: 0.62em;
  height: 0.62em;
  transform: rotate(45deg);
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: transparent;
}
.sq-pips i.on {
  border-color: var(--sq-chem);
  background: var(--sq-chem);
}
.sq-off {
  color: #ff9d8c;
  font: 700 0.92em/1.2 var(--sans);
  font-style: normal;
}
.sq-under.is-out {
  border-color: rgba(255, 111, 90, 0.55);
}
/* On the pitch the label covers the card's six small numbers; the panel shows them in full. */
.sq-field .fut .st {
  display: none;
}
.sq-cost {
  color: var(--sq-coin);
  font-weight: 700;
}
.sq-cost.none {
  color: var(--mut);
  font-weight: 600;
}

@media (max-width: 1500px) {
  .sq-share {
    padding: 10px 16px;
  }
}
@media (max-width: 1100px) {
  .sq-wrap {
    grid-template-columns: 1fr;
  }
  .sq-field {
    width: 100%;
    min-width: 0;
  }
}
@media (max-width: 900px) {
  .sq {
    padding: 8px 8px 40px;
  }
  .sq-stage {
    border-radius: 12px;
  }
  .sq-hud {
    gap: 8px;
    padding: 10px 12px;
  }
  /* The name and Share on the first line; under it the formation, then the three figures two to a row. */
  .sq-hud-top {
    flex-wrap: wrap;
    gap: 8px 12px;
  }
  .sq-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
  }
  .sq-formation,
  .sq-fact.is-price {
    grid-column: 1 / -1;
  }
  .sq-fact {
    min-width: 0;
    white-space: normal;
  }
  .sq-fact .sq-placed {
    line-height: 1.3;
  }
  .sq-fact b,
  .sq-formation select {
    font-size: 28px;
  }
  /* The chemistry marks shrink with the column instead of pushing past the screen's edge. */
  .sq-strip {
    width: 100%;
    max-width: 180px;
    gap: 2px;
  }
  .sq-strip span {
    flex: 1;
    gap: 1px;
  }
  .sq-strip i {
    flex: 1;
    width: auto;
    min-width: 2px;
  }
  /* On a phone the label is two short lines (position and chemistry, then the price), so neighbours do not touch. */
  .sq-field .sq-under {
    top: 74%;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 4px;
    width: max-content;
    max-width: 62px;
    padding: 2px 5px;
    border-radius: 5px;
    font-size: 10px;
    line-height: 1.25;
  }
  .sq-field .sq-cost {
    flex: 1 1 100%;
    text-align: center;
  }
  .sq-pips {
    gap: 2px;
  }
}
/* On the narrowest phones the site's menu button would be cut off at the edge. */
@media (max-width: 420px) {
  header nav .ghost {
    padding: 7px 6px;
  }
}