/* Squad page: FUT-style player cards on a floodlit pitch. Everything is scoped to .fut-* */

/* ---------- Card (sized by --w; every inner measure is in em) ---------- */
.fut {
  --w: 140px;
  width: var(--w);
  font-size: calc(var(--w) / 10);          /* 1em = a tenth of the card width */
  aspect-ratio: 10 / 14;
  position: relative; display: block; color: #1c1a12; text-decoration: none;
  filter: drop-shadow(0 .5em .6em rgba(0,0,0,.55));
  transition: transform .18s ease, filter .18s ease;
}
.fut:hover { text-decoration: none; }
.fut-shape, .fut-shape::before {
  position: absolute; inset: 0;
  clip-path: polygon(10% 0, 90% 0, 100% 5%, 100% 78%, 50% 100%, 0 78%, 0 5%);
}
.fut-shape { background: linear-gradient(150deg, #fff3b0, #d9a520 45%, #8a6410); }        /* gold edge */
.fut-shape::before {
  content: ""; inset: .22em;
  background:
    radial-gradient(circle at 85% 12%, rgba(252,220,4,.55), transparent 48%),
    radial-gradient(circle at 5% 70%, rgba(217,0,0,.16), transparent 45%),
    linear-gradient(160deg, #ffffff 0%, #f3f0e4 45%, #d8d0b6 100%);
}
.fut.gk .fut-shape::before {
  background:
    radial-gradient(circle at 85% 12%, rgba(120,150,255,.45), transparent 48%),
    linear-gradient(160deg, #ffffff 0%, #e7ecf7 45%, #b9c3dc 100%);
}
.fut > * { position: absolute; }

.fut-ovr  { left: 1.1em; top: 1.3em; width: 2.6em; text-align: center; font-family: var(--font-display); font-weight: 800; font-size: 2.3em; line-height: 1; }
.fut-pos  { left: 1.1em; top: 4.55em; width: 3.4em; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 1.05em; letter-spacing: .08em; border-bottom: .12em solid rgba(0,0,0,.35); padding-bottom: .25em; }
.fut-flag {
  left: 1.55em; top: 6.8em; width: 2.3em; height: 1.5em; border-radius: .15em; box-shadow: 0 0 0 .08em rgba(0,0,0,.35);
  background: linear-gradient(180deg, #000 0 33%, #fcdc04 33% 66%, #d90000 66%);   /* Uganda tri-band */
}
.fut-photo {
  left: 3.6em; right: .7em; top: 1.1em; height: 7.4em; overflow: hidden;
  display: flex; align-items: flex-end; justify-content: center;
}
.fut-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%;
  -webkit-mask-image: linear-gradient(#000 78%, transparent); mask-image: linear-gradient(#000 78%, transparent); }
.fut-photo svg { width: 92%; height: auto; fill: rgba(28,26,18,.16); }
.fut-name {
  left: 1.3em; right: 1.3em; top: 8.9em; text-align: center; text-transform: uppercase;
  font-family: var(--font-display); font-weight: 800; font-size: 1.1em; letter-spacing: .05em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  border-top: .1em solid rgba(0,0,0,.28); padding-top: .25em;
}

/* ---------- Stadium + pitch ---------- */
.fut-stage {
  container-type: inline-size;
  position: relative; max-width: 760px; margin: 14px auto 0; padding-top: 0;
  border-radius: 18px; overflow: hidden;
  background: linear-gradient(#070a14 0%, #0d1428 55%, #0a2a14 100%);
  box-shadow: 0 14px 44px #000c;
}
/* stands: a crowd of tiny lit dots + floodlight glow behind the far touchline */
.fut-stand {
  position: absolute; left: 0; right: 0; top: 0; height: 26cqw;
  background:
    radial-gradient(ellipse at 18% 0, rgba(255,255,230,.55), transparent 40%),
    radial-gradient(ellipse at 82% 0, rgba(255,255,230,.55), transparent 40%),
    radial-gradient(circle, rgba(252,220,4,.55) 0 1px, transparent 1.6px) 0 0 / 9px 7px,
    radial-gradient(circle, rgba(255,255,255,.45) 0 1px, transparent 1.6px) 4px 3px / 9px 7px,
    linear-gradient(#05070f, #131b36);
  -webkit-mask-image: linear-gradient(#000 55%, transparent); mask-image: linear-gradient(#000 55%, transparent);
}
.fut-adboard {
  position: absolute; left: 6%; right: 6%; top: 9cqw; height: 3.2cqw; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(90deg, #000 0 33%, #fcdc04 33% 66%, #d90000 66%); opacity: .9;
  font-family: var(--font-display); font-weight: 800; font-size: 2cqw; letter-spacing: .5em; color: #fff; text-shadow: 0 0 4px #000;
  transform: perspective(500px) rotateX(35deg); transform-origin: 50% 100%;
}
.fut-persp { position: relative; perspective: 1700px; perspective-origin: 50% 100%; margin-top: -3cqw; margin-bottom: 3cqw; }
.fut-field { position: relative; aspect-ratio: 100 / 150; transform: rotateX(18deg); transform-origin: 50% 100%; transform-style: preserve-3d; }
.fut-turf {
  position: absolute; inset: 0; overflow: hidden; border-radius: 6px;
  background:
    radial-gradient(ellipse at 50% 38%, rgba(255,255,255,.18), transparent 60%),
    repeating-linear-gradient(180deg, #2e9a3e 0 7.14%, #3bb34d 7.14% 14.28%);
  box-shadow: inset 0 0 6cqw rgba(0,0,0,.45);
}
.fut-turf svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* cards stand upright on the tilted pitch (billboards) */
.fut-slot { position: absolute; transform: translate(-50%, -62%) rotateX(-18deg); transform-origin: 50% 90%; z-index: 2; }
.fut-slot .fut { --w: 15cqw; }
.fut-slot:hover { z-index: 5; }
.fut-slot:hover .fut { transform: scale(1.12); filter: drop-shadow(0 .6em .8em rgba(0,0,0,.7)) drop-shadow(0 0 .8em rgba(252,220,4,.6)); }

/* ---------- Substitutes ---------- */
.fut-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 12px; justify-items: center; }
.fut-grid .fut { --w: 140px; }
.fut-grid .fut:hover { transform: translateY(-6px) scale(1.04); }

@media (max-width: 480px) { .fut-grid { grid-template-columns: repeat(2, 1fr); } }
/* Real pitch photo as the turf (assets/img/pitch.jpg, 1024 x 1536).
   Load this AFTER squad-cards.css. */

/* Match the picture's 2:3 shape so the white lines are never stretched */
.fut-stage .fut-field {
  aspect-ratio: 2 / 3;
}

.fut-turf {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}

.fut-turf svg {           
  display: none;
}

.fut-pitch-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}