/* V62 Penaltı Ligi — dinamik takım renkli 3D karakter ve saha sunumu.
   Konumlar, seçim bölgeleri, olaylar ve oyun zamanlaması değiştirilmez. */

/* V61'deki tek tip foto-kesit oyuncuları kapat; oyunun kendi oyuncu verisini aç. */
.person > * {
  opacity: 1 !important;
  pointer-events: none !important;
}

.person::before,
.shooter::before,
.keeper::before,
.shooter.run::before,
.shooter.kick::before,
.shooter.follow::before,
.shooter.celebrate::before,
.keeper[class*="dive-"]::before {
  content: none !important;
  display: none !important;
  background-image: none !important;
}

.person {
  --kit-a: #55dfff;
  --kit-b: #1d58c5;
  --kit-accent: #ffffff;
  image-rendering: auto !important;
  filter:
    drop-shadow(0 22px 17px rgba(0, 8, 13, .44))
    drop-shadow(0 3px 2px rgba(0, 0, 0, .28)) !important;
  transform-style: preserve-3d !important;
  will-change: left, top, transform !important;
}

.person.human {
  --kit-a: var(--humanKitA, #55dfff);
  --kit-b: var(--humanKitB, #1d58c5);
  --kit-accent: var(--humanAccent, #fff);
}

.person.ai {
  --kit-a: var(--aiKitA, #ffd66b);
  --kit-b: var(--aiKitB, #d86627);
  --kit-accent: var(--aiAccent, #fff);
}

.person .shadow {
  left: 50% !important;
  bottom: -4.5% !important;
  width: 70% !important;
  height: 10% !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(0, 7, 10, .62), rgba(0, 12, 14, .22) 48%, transparent 73%) !important;
  filter: blur(3px) !important;
  z-index: 0 !important;
}

/* Baş ve saç: mevcut skin/hair/face-1…5 verileri doğrudan kullanılır. */
.person .head {
  left: 50% !important;
  top: 2.8% !important;
  width: 24.5% !important;
  height: 17.2% !important;
  transform: translateX(-50%) translateZ(8px) !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, .24) !important;
  border-radius: 46% 46% 44% 44% / 40% 40% 57% 57% !important;
  background:
    radial-gradient(circle at 35% 28%, rgba(255, 255, 255, .44), transparent 24%),
    linear-gradient(118deg, var(--skin1) 0 46%, var(--skin2) 100%) !important;
  box-shadow:
    inset -5px -6px 9px rgba(72, 34, 21, .18),
    inset 3px 2px 5px rgba(255, 255, 255, .15),
    0 5px 8px rgba(0, 0, 0, .18) !important;
  z-index: 8 !important;
}

.person .head::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: -7% !important;
  top: 39% !important;
  width: 12% !important;
  height: 24% !important;
  border-radius: 60% !important;
  background: linear-gradient(90deg, var(--skin2), var(--skin1)) !important;
  box-shadow: 31px 0 0 var(--skin2) !important;
  opacity: .92 !important;
}

.person .head::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 4% 7% 5% !important;
  border-radius: inherit !important;
  border-right: 1px solid rgba(77, 39, 25, .14) !important;
  border-bottom: 1px solid rgba(77, 39, 25, .16) !important;
  pointer-events: none !important;
}

.person .hair {
  left: 50% !important;
  top: .5% !important;
  width: 28.5% !important;
  height: 8.2% !important;
  transform: translateX(-50%) translateZ(10px) !important;
  overflow: visible !important;
  border-radius: 52% 52% 30% 30% / 68% 68% 26% 26% !important;
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, .16), transparent 22%),
    linear-gradient(150deg, color-mix(in srgb, var(--hairColor) 76%, #fff), var(--hairColor) 48%, #050606) !important;
  box-shadow: inset -3px -4px 5px rgba(0, 0, 0, .34), 0 3px 3px rgba(0, 0, 0, .16) !important;
  z-index: 10 !important;
}

.person .hair::after {
  content: "" !important;
  position: absolute !important;
  left: 5% !important;
  right: 5% !important;
  bottom: -20% !important;
  height: 48% !important;
  border-radius: 0 0 45% 45% !important;
  background: linear-gradient(90deg, #070808, var(--hairColor), #070808) !important;
  opacity: .82 !important;
}

.face-1 .hair { height: 6.8% !important; border-radius: 50% 50% 24% 24% !important; }
.face-2 .hair { transform: translateX(-52%) rotate(-4deg) translateZ(10px) !important; border-radius: 58% 42% 28% 32% !important; }
.face-3 .hair {
  height: 9.4% !important;
  background:
    radial-gradient(circle at 15% 55%, color-mix(in srgb, var(--hairColor) 76%, #fff) 0 12%, transparent 13%),
    radial-gradient(circle at 38% 26%, color-mix(in srgb, var(--hairColor) 82%, #fff) 0 13%, transparent 14%),
    radial-gradient(circle at 62% 30%, var(--hairColor) 0 14%, transparent 15%),
    radial-gradient(circle at 84% 55%, var(--hairColor) 0 13%, transparent 14%),
    var(--hairColor) !important;
  border-radius: 48% !important;
}
.face-4 .hair { height: 5.4% !important; top: 1.8% !important; opacity: .90 !important; }
.face-5 .hair { width: 30% !important; height: 9.8% !important; border-radius: 48% 48% 36% 36% !important; }

.person .head .eye {
  top: 36% !important;
  width: 9% !important;
  height: 8% !important;
  border: 1px solid rgba(255, 255, 255, .38) !important;
  background: radial-gradient(circle at 55% 45%, #0b1012 0 48%, #543c2e 51% 72%, #fff 75%) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .28) !important;
}
.person .head .eye.left { left: 25% !important; }
.person .head .eye.right { right: 25% !important; }
.person .head .brow {
  top: 25% !important;
  width: 23% !important;
  height: 4% !important;
  background: color-mix(in srgb, var(--hairColor) 82%, #4e2d20) !important;
}
.person .head .brow.left { left: 17% !important; }
.person .head .brow.right { right: 17% !important; }
.person .head .nose {
  top: 43% !important;
  width: 11% !important;
  height: 22% !important;
  border-left: 2px solid rgba(105, 57, 38, .38) !important;
  border-bottom: 2px solid rgba(105, 57, 38, .34) !important;
}
.person .head .mouth {
  bottom: 15% !important;
  width: 30% !important;
  height: 10% !important;
  border-bottom: 2px solid rgba(91, 39, 32, .88) !important;
}
.person .head .beard {
  left: 50% !important;
  bottom: 3% !important;
  width: 48% !important;
  height: 25% !important;
  transform: translateX(-50%) !important;
  border-radius: 0 0 47% 47% !important;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--hairColor) 78%, transparent)) !important;
}
.face-1 .head .mouth { width: 38% !important; }
.face-2 .head .eye { height: 8% !important; }
.face-3 .head .beard { opacity: .78 !important; height: 33% !important; }
.face-4 .head .mouth { width: 28% !important; }
.face-5 .head .beard { opacity: .70 !important; }

.person .neck {
  left: 50% !important;
  top: 16.7% !important;
  width: 11.5% !important;
  height: 7.8% !important;
  transform: translateX(-50%) !important;
  border-radius: 0 0 35% 35% !important;
  background: linear-gradient(90deg, var(--skin2), var(--skin1) 44%, var(--skin2)) !important;
  box-shadow: inset -2px 0 3px rgba(0, 0, 0, .12) !important;
  z-index: 5 !important;
}

/* Forma: human/ai değişkenleri her seçili takımın primary/secondary/accent rengidir. */
.person .torso {
  left: 50% !important;
  top: 19.8% !important;
  width: 50% !important;
  height: 40.5% !important;
  transform: translateX(-50%) translateZ(5px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .30) !important;
  border-radius: 34% 34% 18% 18% / 15% 15% 12% 12% !important;
  clip-path: polygon(13% 0, 87% 0, 100% 20%, 90% 100%, 10% 100%, 0 20%) !important;
  background:
    radial-gradient(ellipse at 32% 8%, rgba(255, 255, 255, .38), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, .24), transparent 18% 78%, rgba(0, 0, 0, .30)),
    repeating-linear-gradient(90deg, var(--kit-a) 0 18%, var(--kit-b) 18% 36%) !important;
  box-shadow:
    inset 0 13px 14px rgba(255, 255, 255, .15),
    inset 0 -18px 20px rgba(0, 0, 0, .22),
    0 7px 12px rgba(0, 0, 0, .18) !important;
  z-index: 4 !important;
}

.person .torso::before {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: -1% !important;
  width: 31% !important;
  height: 14% !important;
  transform: translateX(-50%) !important;
  border: 4px solid color-mix(in srgb, var(--kit-accent) 78%, var(--kit-b)) !important;
  border-top: 0 !important;
  border-radius: 0 0 50% 50% !important;
  background: rgba(1, 17, 24, .20) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18) !important;
}

.person .torso::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background:
    linear-gradient(112deg, transparent 0 42%, rgba(255, 255, 255, .15) 48%, transparent 55%),
    repeating-linear-gradient(0deg, transparent 0 8px, rgba(255, 255, 255, .028) 9px 10px) !important;
  mix-blend-mode: screen !important;
}

.person .badge {
  left: 60% !important;
  top: 25.5% !important;
  width: 10% !important;
  height: 6.5% !important;
  border: 1px solid rgba(255, 255, 255, .72) !important;
  border-radius: 42% 42% 50% 50% !important;
  background:
    radial-gradient(circle at 35% 30%, #fff, transparent 30%),
    var(--kit-accent) !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .28) !important;
  z-index: 8 !important;
}

.person .num {
  top: 30.5% !important;
  color: var(--kit-accent) !important;
  font-size: clamp(14px, 1.35vw, 21px) !important;
  font-family: "Arial Narrow", "Bahnschrift Condensed", system-ui, sans-serif !important;
  font-weight: 1000 !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, .52), 0 0 1px #000 !important;
  z-index: 9 !important;
}

.person .shorts {
  left: 50% !important;
  top: 56% !important;
  width: 45% !important;
  height: 14.5% !important;
  transform: translateX(-50%) translateZ(3px) !important;
  overflow: hidden !important;
  border: 1px solid rgba(255, 255, 255, .17) !important;
  border-radius: 15% 15% 26% 26% !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .30), transparent 22% 76%, rgba(0, 0, 0, .34)),
    linear-gradient(145deg, var(--kit-b), color-mix(in srgb, var(--kit-b) 72%, #07131b)) !important;
  box-shadow: inset 0 6px 8px rgba(255, 255, 255, .09), inset 0 -7px 8px rgba(0, 0, 0, .20) !important;
  z-index: 5 !important;
}

.person .shorts::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: 28% !important;
  width: 1px !important;
  height: 72% !important;
  background: rgba(255, 255, 255, .22) !important;
}

.person .leg {
  top: 68% !important;
  width: 12.5% !important;
  height: 29.5% !important;
  overflow: visible !important;
  border: 1px solid rgba(255, 255, 255, .14) !important;
  border-radius: 48% !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .18), transparent 45%, rgba(255, 255, 255, .12)),
    linear-gradient(180deg,
      var(--skin1) 0 37%,
      var(--kit-b) 38% 72%,
      color-mix(in srgb, var(--kit-accent) 82%, var(--kit-b)) 73% 100%) !important;
  box-shadow: inset -3px -2px 5px rgba(0, 0, 0, .16) !important;
}
.person .leg.left { left: 34% !important; }
.person .leg.right { right: 34% !important; }

.person .leg::before {
  content: "" !important;
  position: absolute !important;
  left: -10% !important;
  right: -10% !important;
  top: 69% !important;
  height: 7% !important;
  border-radius: 999px !important;
  background: var(--kit-accent) !important;
  box-shadow: 0 2px 2px rgba(0, 0, 0, .18) !important;
}

.person .boot {
  left: 50% !important;
  bottom: -10% !important;
  width: 175% !important;
  height: 19% !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  border-radius: 55% 38% 26% 30% !important;
  background:
    radial-gradient(circle at 24% 20%, rgba(255, 255, 255, .38), transparent 22%),
    linear-gradient(145deg, #28313a, #06090d 66%) !important;
  box-shadow: 0 4px 4px rgba(0, 0, 0, .30) !important;
}

/* Saha oyuncusu kolları ve dinamik kısa kol forma. */
.shooter .arm {
  top: 23.8% !important;
  width: 30% !important;
  height: 6.5% !important;
  border: 1px solid rgba(255, 255, 255, .16) !important;
  background:
    linear-gradient(90deg, var(--kit-b) 0 38%, var(--kit-a) 39% 55%, var(--skin1) 56% 100%) !important;
  box-shadow: inset 0 3px 4px rgba(255, 255, 255, .11), inset 0 -3px 4px rgba(0, 0, 0, .12) !important;
}
.shooter .arm.left { right: 62% !important; transform: rotate(-58deg) !important; }
.shooter .arm.right { left: 62% !important; transform: rotate(58deg) !important; }
.shooter .forearm {
  top: 7% !important;
  width: 78% !important;
  height: 86% !important;
  background: linear-gradient(90deg, var(--skin1), var(--skin2)) !important;
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .12) !important;
}
.shooter .arm.left .forearm { left: -63% !important; transform: rotate(-5deg) !important; }
.shooter .arm.right .forearm { right: -63% !important; transform: rotate(5deg) !important; }
.shooter .glove { display: none !important; }

/* Kaleci: aynı takım paleti, uzun kol, katmanlı eldiven ve dengeli erişim. */
.keeper .torso {
  width: 55% !important;
  height: 41% !important;
  top: 19.5% !important;
  background:
    radial-gradient(ellipse at 30% 8%, rgba(255, 255, 255, .40), transparent 28%),
    linear-gradient(90deg, rgba(0, 0, 0, .28), transparent 20% 77%, rgba(0, 0, 0, .32)),
    repeating-linear-gradient(135deg, var(--kit-a) 0 14%, var(--kit-b) 14% 28%) !important;
}
.keeper .shorts { width: 48% !important; top: 57% !important; }
.keeper .leg { top: 68.5% !important; height: 30% !important; width: 13% !important; }
.keeper .leg.left { left: 33% !important; }
.keeper .leg.right { right: 33% !important; }
.keeper .arm {
  top: 22.8% !important;
  width: 12.5% !important;
  height: 33% !important;
  border: 1px solid rgba(255, 255, 255, .22) !important;
  border-radius: 46% !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .22), transparent 42%, rgba(255, 255, 255, .15)),
    linear-gradient(180deg, var(--kit-a), var(--kit-b)) !important;
  box-shadow: inset 0 4px 5px rgba(255, 255, 255, .13), inset 0 -5px 6px rgba(0, 0, 0, .17) !important;
  transform-origin: 50% 8% !important;
}
.keeper .arm.left { left: 17% !important; right: auto !important; transform: rotate(-54deg) !important; }
.keeper .arm.right { right: 17% !important; left: auto !important; transform: rotate(54deg) !important; }
.keeper .forearm {
  top: 48% !important;
  width: 82% !important;
  height: 61% !important;
  border-radius: 48% !important;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .20), transparent 45%, rgba(255, 255, 255, .14)),
    linear-gradient(180deg, var(--kit-b), color-mix(in srgb, var(--kit-b) 72%, #07131b)) !important;
}
.keeper .arm.left .forearm { left: 7% !important; right: auto !important; transform: rotate(-8deg) !important; }
.keeper .arm.right .forearm { right: 7% !important; left: auto !important; transform: rotate(8deg) !important; }
.keeper .glove {
  top: 84% !important;
  width: 138% !important;
  height: 30% !important;
  border: 1px solid rgba(2, 29, 39, .25) !important;
  border-radius: 52% 52% 42% 42% !important;
  background:
    radial-gradient(circle at 34% 22%, #fff, transparent 28%),
    repeating-linear-gradient(90deg, #f8fdff 0 22%, #bfe5ec 23% 35%) !important;
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, .24),
    0 0 18px rgba(93, 225, 240, .34),
    inset 0 -4px 5px rgba(4, 46, 55, .16) !important;
}
.keeper .arm.left .glove { left: -21% !important; right: auto !important; }
.keeper .arm.right .glove { right: -21% !important; left: auto !important; }

.keeper::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 50% !important;
  top: 20.5% !important;
  bottom: auto !important;
  width: 51% !important;
  height: 39% !important;
  transform: translateX(-50%) translateZ(8px) !important;
  border-radius: 29% 29% 20% 20% !important;
  background: linear-gradient(118deg, rgba(255, 255, 255, .20), transparent 35% 74%, rgba(0, 0, 0, .15)) !important;
  box-shadow: none !important;
  filter: none !important;
  pointer-events: none !important;
  z-index: 7 !important;
}

.keeper[class*="dive-"] .arm.left { transform: rotate(-96deg) !important; }
.keeper[class*="dive-"] .arm.right { transform: rotate(96deg) !important; }
.keeper.save-left-high .arm.left { transform: rotate(-112deg) !important; }
.keeper.save-left-low .arm.left { transform: rotate(-94deg) !important; }
.keeper.save-center-high .arm.left { transform: rotate(-106deg) !important; }
.keeper.save-center-high .arm.right { transform: rotate(106deg) !important; }
.keeper.save-center-low .arm.left { transform: rotate(-76deg) !important; }
.keeper.save-center-low .arm.right { transform: rotate(76deg) !important; }
.keeper.save-right-high .arm.right { transform: rotate(112deg) !important; }
.keeper.save-right-low .arm.right { transform: rotate(94deg) !important; }

.keeper.saveContact .glove {
  transform: scale(1.26) !important;
  filter: brightness(1.15) !important;
  box-shadow:
    0 0 0 4px rgba(255, 255, 255, .32),
    0 0 26px rgba(91, 231, 246, .70),
    0 0 46px rgba(91, 231, 246, .28) !important;
}

.shooter.run .torso { transform: translateX(-50%) translateZ(5px) rotate(2deg) !important; }
.shooter.run .arm.left { transform: rotate(-34deg) !important; }
.shooter.run .arm.right { transform: rotate(40deg) !important; }
.shooter.kick .arm.left { transform: rotate(-42deg) !important; }
.shooter.kick .arm.right { transform: rotate(52deg) !important; }
.shooter.kick .torso,
.shooter.follow .torso { transform: translateX(-50%) translateZ(5px) rotate(5deg) skewY(-1deg) !important; }
.shooter.kick .head,
.shooter.follow .head { transform: translateX(-50%) translateZ(8px) rotate(3deg) !important; }

/* Kale, file ve saha: daha okunaklı derinlik, temas noktasından yaylanan file. */
.pitch3d {
  opacity: .56 !important;
  border-color: rgba(245, 255, 249, .72) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .045), transparent 42% 58%, rgba(255, 255, 255, .045)),
    repeating-linear-gradient(90deg, rgba(10, 94, 61, .18) 0 92px, rgba(70, 157, 105, .13) 92px 184px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .055) 0 1px, transparent 1px 68px) !important;
  box-shadow:
    inset 0 0 110px rgba(0, 28, 19, .28),
    0 0 30px rgba(213, 255, 232, .08) !important;
}

.boxLine,
.penaltyArc {
  border-color: rgba(248, 255, 250, .84) !important;
  filter: drop-shadow(0 2px 1px rgba(0, 27, 18, .38)) drop-shadow(0 0 3px rgba(255, 255, 255, .20)) !important;
}

.goalScene {
  perspective: 900px !important;
  filter: drop-shadow(0 25px 28px rgba(0, 10, 16, .38)) !important;
}

.goalDepth {
  opacity: .72 !important;
  background:
    linear-gradient(180deg, rgba(219, 245, 250, .10), rgba(0, 23, 30, .28)),
    radial-gradient(ellipse at 50% 100%, rgba(30, 112, 78, .28), transparent 62%) !important;
  box-shadow:
    inset 0 -78px 100px rgba(0, 11, 18, .32),
    inset 34px 0 42px rgba(0, 17, 23, .12),
    inset -34px 0 42px rgba(0, 17, 23, .12) !important;
}

.goalFrame::before {
  filter:
    drop-shadow(0 18px 16px rgba(0, 9, 15, .50))
    drop-shadow(0 0 8px rgba(238, 252, 255, .44))
    contrast(1.05) brightness(1.04) !important;
}

.goalNet {
  opacity: .72 !important;
  transform-style: preserve-3d !important;
  transform-origin: var(--netX, 50%) var(--netY, 50%) !important;
  background:
    linear-gradient(60deg, rgba(241, 252, 255, .48) 1px, transparent 1px) 0 0 / 25px 22px,
    linear-gradient(120deg, rgba(241, 252, 255, .44) 1px, transparent 1px) 0 0 / 25px 22px,
    radial-gradient(circle at var(--netX, 50%) var(--netY, 50%), rgba(255, 255, 255, .64), transparent 22%),
    linear-gradient(180deg, rgba(226, 249, 251, .025), rgba(0, 30, 33, .025)) !important;
  box-shadow:
    inset 0 0 68px rgba(235, 252, 255, .12),
    inset 0 -35px 52px rgba(0, 24, 28, .20) !important;
  filter: drop-shadow(0 5px 2px rgba(0, 18, 22, .22)) !important;
}

.goalNet::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    linear-gradient(90deg, transparent 0 4%, rgba(255, 255, 255, .28) 4.2% 4.5%, transparent 4.7% 95.3%, rgba(255, 255, 255, .28) 95.5% 95.8%, transparent 96%),
    linear-gradient(180deg, rgba(255, 255, 255, .25), transparent 11% 88%, rgba(255, 255, 255, .17)) !important;
  opacity: .75 !important;
}

.goalNet::after {
  content: "" !important;
  position: absolute !important;
  inset: -6% !important;
  pointer-events: none !important;
  opacity: 0 !important;
  border-radius: 10px !important;
  background:
    radial-gradient(circle at var(--netX, 50%) var(--netY, 50%), rgba(255, 255, 255, .86) 0 3%, rgba(103, 231, 245, .32) 7%, transparent 24%) !important;
  mix-blend-mode: screen !important;
}

.goalNet.bulge {
  animation: v62NetSnap 1.48s cubic-bezier(.16, 1, .24, 1) !important;
}

.goalNet.bulge::after {
  animation: v62NetContact 1.1s ease-out both !important;
}

@keyframes v62NetSnap {
  0% { transform: perspective(720px) translateZ(0) scale3d(1, 1, 1); filter: brightness(1); }
  11% { transform: perspective(720px) translateZ(28px) scale3d(1.045, .88, 1); filter: brightness(1.42); }
  24% { transform: perspective(720px) translateZ(-17px) scale3d(.975, 1.105, 1) skewX(-.8deg); filter: brightness(1.10); }
  39% { transform: perspective(720px) translateZ(10px) scale3d(1.018, .965, 1) skewX(.5deg); }
  57% { transform: perspective(720px) translateZ(-6px) scale3d(.99, 1.035, 1); }
  76% { transform: perspective(720px) translateZ(3px) scale3d(1.006, .99, 1); }
  100% { transform: perspective(720px) translateZ(0) scale3d(1, 1, 1); filter: brightness(1); }
}

@keyframes v62NetContact {
  0% { opacity: 0; transform: scale(.55); }
  12% { opacity: 1; transform: scale(1); }
  46% { opacity: .55; transform: scale(1.14); }
  100% { opacity: 0; transform: scale(1.28); }
}

/* Top, hedef ve şut izi: daha temiz ama seçim bölgelerini kapatmaz. */
.ball {
  filter: saturate(1.08) contrast(1.10) drop-shadow(0 6px 5px rgba(0, 6, 10, .36)) !important;
  box-shadow:
    0 13px 22px rgba(0, 7, 11, .42),
    0 0 0 1px rgba(255, 255, 255, .30),
    0 0 9px rgba(255, 255, 255, .18) !important;
}

.ball::after {
  inset: 2% !important;
  background:
    radial-gradient(circle at 29% 20%, rgba(255, 255, 255, .56), transparent 24%),
    radial-gradient(circle at 68% 76%, rgba(0, 0, 0, .22), transparent 33%) !important;
}

.ballShadow {
  opacity: .70 !important;
  filter: blur(3.8px) !important;
}

.zone {
  color: rgba(244, 252, 255, .58) !important;
  border-color: rgba(226, 248, 255, .16) !important;
  background: linear-gradient(180deg, rgba(5, 37, 43, .025), rgba(2, 29, 34, .075)) !important;
}

.zone:hover,
.zone.selected {
  border-color: rgba(127, 239, 239, .56) !important;
  background: rgba(46, 201, 204, .16) !important;
  box-shadow: inset 0 0 22px rgba(72, 222, 219, .10) !important;
}

.targetHalo .targetCore {
  border-width: 2px !important;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .20), transparent 46%),
    repeating-radial-gradient(circle, transparent 0 12px, rgba(255, 255, 255, .16) 13px 14px) !important;
}

.marker .markerIcon {
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 0 0 5px rgba(0, 11, 18, .24), 0 0 20px rgba(255, 255, 255, .18) !important;
}

.marker .markerText {
  background: linear-gradient(180deg, rgba(4, 28, 42, .94), rgba(2, 18, 30, .92)) !important;
  border-color: rgba(237, 210, 138, .32) !important;
  box-shadow: 0 7px 17px rgba(0, 8, 15, .24) !important;
}

.trail {
  height: 7px !important;
  background:
    radial-gradient(circle at 98% 50%, #fff 0 5%, transparent 19%),
    linear-gradient(90deg, transparent, rgba(103, 223, 255, .15) 18%, rgba(224, 249, 255, .78) 76%, #fff) !important;
  box-shadow: 0 0 8px rgba(255, 255, 255, .70), 0 0 20px rgba(88, 221, 255, .48) !important;
}

.shotPath {
  stroke-width: 5.5 !important;
  stroke-dasharray: 10 12 !important;
  filter: drop-shadow(0 0 4px #fff) drop-shadow(0 0 10px currentColor) !important;
}

.keeperPath {
  stroke-width: 7 !important;
  stroke-dasharray: 14 12 !important;
  filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 12px rgba(101, 231, 255, .74)) !important;
}

.impact {
  border-width: 2px !important;
  box-shadow:
    0 0 22px rgba(255, 255, 255, .58),
    0 0 52px rgba(96, 226, 255, .38),
    inset 0 0 24px rgba(255, 255, 255, .24) !important;
}

/* Hakem takım bazlı değildir; mevcut yüksek kaliteli render korunur ve ışığa oturtulur. */
.referee {
  filter:
    drop-shadow(0 19px 13px rgba(0, 7, 12, .44))
    drop-shadow(0 2px 1px rgba(0, 0, 0, .30))
    saturate(1.03) contrast(1.03) !important;
}

.referee::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  bottom: -3% !important;
  width: 92% !important;
  height: 11% !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(0, 7, 10, .52), transparent 72%) !important;
  filter: blur(3px) !important;
  pointer-events: none !important;
}

@media (max-width: 760px) {
  .person {
    filter: drop-shadow(0 15px 11px rgba(0, 8, 13, .40)) !important;
  }
  .person .num { font-size: 14px !important; }
  .person .torso::before { border-width: 3px !important; }
  .keeper .glove { box-shadow: 0 0 0 2px rgba(255, 255, 255, .24), 0 0 12px rgba(93, 225, 240, .30) !important; }
  .goalNet { background-size: 21px 19px, 21px 19px, auto, auto !important; }
  .marker .markerText { font-size: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .goalNet,
  .goalNet::after,
  .person,
  .person .arm,
  .person .leg,
  .trail,
  .impact {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/*
   V62 HD oyuncu katmani
   --------------------
   Nötr PBR gövdeler yalnızca doku ve anatomiyi taşır. Forma paleti, ten,
   saç, yüz varyantı ve numara oyun motorunun seçtiği gerçek takım/oyuncu
   değişkenlerinden gelmeye devam eder. Böylece tek sabit kırmızı/mor render
   yerine her eşleşmede yeniden renklendirilen karakterler kullanılır.
*/
.person {
  isolation: isolate !important;
  overflow: visible !important;
}

.person::before,
.person::after,
.person > .torso {
  position: absolute !important;
  pointer-events: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  clip-path: none !important;
  box-shadow: none !important;
}

.person::before {
  content: "" !important;
  display: block !important;
  z-index: 2 !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: 50% 50% !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
  filter: saturate(1.03) contrast(1.025) !important;
}

.person::after {
  content: "" !important;
  display: block !important;
  z-index: 3 !important;
  background:
    linear-gradient(112deg, rgba(255, 255, 255, .13), transparent 24% 68%, rgba(0, 0, 0, .20)),
    repeating-linear-gradient(90deg,
      var(--kit-a) 0 36%,
      color-mix(in srgb, var(--kit-b) 78%, var(--kit-accent)) 36% 41%,
      var(--kit-a) 41% 59%,
      color-mix(in srgb, var(--kit-b) 78%, var(--kit-accent)) 59% 64%,
      var(--kit-a) 64% 100%) !important;
  background-blend-mode: soft-light, normal !important;
  mix-blend-mode: multiply !important;
  opacity: .76 !important;
  transform: none !important;
  transform-origin: 50% 50% !important;
  filter: none !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: 50% 50% !important;
  mask-position: 50% 50% !important;
}

/* Üretilmiş gövdedeki ten alanını mevcut APPEARANCE renkleriyle eşleştir. */
.person > .torso {
  z-index: 4 !important;
  overflow: visible !important;
  transform: none !important;
  background: linear-gradient(118deg, var(--skin1), var(--skin2)) !important;
  mix-blend-mode: multiply !important;
  opacity: .64 !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: 50% 50% !important;
  mask-position: 50% 50% !important;
}

.person > .torso::before,
.person > .torso::after {
  content: none !important;
  display: none !important;
}

/* Eski geometrik gövde uzuvlarını sakla; dinamik baş/yüz/numara korunur. */
.person > .arm,
.person > .shorts,
.person > .leg {
  opacity: 0 !important;
  visibility: hidden !important;
}

.person > .neck {
  z-index: 7 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.person > .head,
.person > .hair,
.person > .badge,
.person > .num,
.person > .shadow {
  opacity: 1 !important;
  visibility: visible !important;
}

.person > .head {
  filter: saturate(.96) contrast(1.04) !important;
}

.person > .badge {
  top: 28.5% !important;
  z-index: 9 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .32), 0 0 0 2px color-mix(in srgb, var(--kit-accent) 32%, transparent) !important;
}

.person > .num {
  top: 31.5% !important;
  z-index: 10 !important;
}

/* Saha oyuncusu: normal ve vuruş anı ayrı, takım-renklenebilir PBR pozlar. */
.shooter::before,
.shooter::after,
.shooter > .torso {
  inset: -4% -7% -3% !important;
  width: auto !important;
  height: auto !important;
  left: -7% !important;
  top: -4% !important;
  right: -7% !important;
  bottom: -3% !important;
  background-size: auto 112% !important;
  -webkit-mask-size: auto 112% !important;
  mask-size: auto 112% !important;
}

.shooter::before {
  background-image: url("./penalty-3d/player-ready.png") !important;
}

.shooter::after {
  -webkit-mask-image: url("./penalty-3d/player-ready-kit-mask.png") !important;
  mask-image: url("./penalty-3d/player-ready-kit-mask.png") !important;
}

.shooter > .torso {
  -webkit-mask-image: url("./penalty-3d/player-ready-skin-mask.png") !important;
  mask-image: url("./penalty-3d/player-ready-skin-mask.png") !important;
}

.shooter.run::before,
.shooter.run::after,
.shooter.run > .torso {
  animation: v62RunBody .30s ease-in-out infinite alternate !important;
}

.shooter.kick::before,
.shooter.follow::before,
.shooter.celebrate::before,
.shooter.frustrated::before {
  background-image: url("./penalty-3d/player-kick.png") !important;
  background-size: auto 113% !important;
}

.shooter.kick::after,
.shooter.follow::after,
.shooter.celebrate::after,
.shooter.frustrated::after {
  -webkit-mask-image: url("./penalty-3d/player-kick-kit-mask.png") !important;
  mask-image: url("./penalty-3d/player-kick-kit-mask.png") !important;
  -webkit-mask-size: auto 113% !important;
  mask-size: auto 113% !important;
}

.shooter.kick > .torso,
.shooter.follow > .torso,
.shooter.celebrate > .torso,
.shooter.frustrated > .torso {
  -webkit-mask-image: url("./penalty-3d/player-kick-skin-mask.png") !important;
  mask-image: url("./penalty-3d/player-kick-skin-mask.png") !important;
  -webkit-mask-size: auto 113% !important;
  mask-size: auto 113% !important;
}

.shooter.kick::before,
.shooter.kick::after,
.shooter.kick > .torso {
  animation: v62KickBody .23s cubic-bezier(.18, .8, .24, 1) both !important;
}

@keyframes v62RunBody {
  from { background-position: 50% 49%; -webkit-mask-position: 50% 49%; mask-position: 50% 49%; }
  to { background-position: 50% 51%; -webkit-mask-position: 50% 51%; mask-position: 50% 51%; }
}

@keyframes v62KickBody {
  from { opacity: .35; transform: translateX(-2%) rotate(-1deg); }
  to { opacity: 1; transform: translateX(0) rotate(0); }
}

/* Kaleci hazır pozu: daha geniş omuz ve gerçek eldiven açıklığı. */
.keeper::before,
.keeper::after,
.keeper > .torso {
  inset: -3% -20% -4% !important;
  width: auto !important;
  height: auto !important;
  left: -20% !important;
  top: -3% !important;
  right: -20% !important;
  bottom: -4% !important;
  background-size: auto 108% !important;
  -webkit-mask-size: auto 108% !important;
  mask-size: auto 108% !important;
}

.keeper::before {
  background-image: url("./penalty-3d/keeper-ready.png") !important;
}

.keeper::after {
  -webkit-mask-image: url("./penalty-3d/keeper-ready-kit-mask.png") !important;
  mask-image: url("./penalty-3d/keeper-ready-kit-mask.png") !important;
}

.keeper > .torso {
  -webkit-mask-image: url("./penalty-3d/keeper-ready-skin-mask.png") !important;
  mask-image: url("./penalty-3d/keeper-ready-skin-mask.png") !important;
}

/* Sağ/sol uçuşta gerçek yatay dalış pozu; sol yön aynı dokunun optik aynasıdır. */
.keeper.dive-left-high,
.keeper.dive-left-low,
.keeper.dive-right-high,
.keeper.dive-right-low {
  transform-origin: 50% 50% !important;
}

.keeper.dive-right-high,
.keeper.dive-left-high {
  transform: translate(-50%, -50%) scale(1.01) !important;
}

.keeper.dive-right-low {
  transform: translate(-50%, -50%) rotate(13deg) scale(1.01) !important;
}

.keeper.dive-left-low {
  transform: translate(-50%, -50%) rotate(-13deg) scale(1.01) !important;
}

.keeper.dive-left-high::before,
.keeper.dive-left-low::before,
.keeper.dive-right-high::before,
.keeper.dive-right-low::before,
.keeper.dive-left-high::after,
.keeper.dive-left-low::after,
.keeper.dive-right-high::after,
.keeper.dive-right-low::after,
.keeper.dive-left-high > .torso,
.keeper.dive-left-low > .torso,
.keeper.dive-right-high > .torso,
.keeper.dive-right-low > .torso {
  left: -73% !important;
  right: -73% !important;
  top: 4% !important;
  bottom: 2% !important;
  width: auto !important;
  height: auto !important;
  background-size: contain !important;
  background-position: 50% 50% !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  -webkit-mask-position: 50% 50% !important;
  mask-position: 50% 50% !important;
}

.keeper.dive-left-high::before,
.keeper.dive-left-low::before,
.keeper.dive-right-high::before,
.keeper.dive-right-low::before {
  background-image: url("./penalty-3d/keeper-dive-right.png") !important;
}

.keeper.dive-left-high::after,
.keeper.dive-left-low::after,
.keeper.dive-right-high::after,
.keeper.dive-right-low::after {
  -webkit-mask-image: url("./penalty-3d/keeper-dive-right-kit-mask.png") !important;
  mask-image: url("./penalty-3d/keeper-dive-right-kit-mask.png") !important;
}

.keeper.dive-left-high > .torso,
.keeper.dive-left-low > .torso,
.keeper.dive-right-high > .torso,
.keeper.dive-right-low > .torso {
  -webkit-mask-image: url("./penalty-3d/keeper-dive-right-skin-mask.png") !important;
  mask-image: url("./penalty-3d/keeper-dive-right-skin-mask.png") !important;
}

.keeper.dive-left-high::before,
.keeper.dive-left-low::before,
.keeper.dive-left-high::after,
.keeper.dive-left-low::after,
.keeper.dive-left-high > .torso,
.keeper.dive-left-low > .torso {
  transform: scaleX(-1) !important;
}

.keeper.dive-right-high > .head,
.keeper.dive-right-low > .head {
  left: 79% !important;
  top: 14% !important;
  transform: translateX(-50%) rotate(16deg) translateZ(8px) !important;
}

.keeper.dive-right-high > .hair,
.keeper.dive-right-low > .hair {
  left: 79% !important;
  top: 12% !important;
  transform: translateX(-50%) rotate(16deg) translateZ(10px) !important;
}

.keeper.dive-left-high > .head,
.keeper.dive-left-low > .head {
  left: 21% !important;
  top: 14% !important;
  transform: translateX(-50%) rotate(-16deg) translateZ(8px) !important;
}

.keeper.dive-left-high > .hair,
.keeper.dive-left-low > .hair {
  left: 21% !important;
  top: 12% !important;
  transform: translateX(-50%) rotate(-16deg) translateZ(10px) !important;
}

.keeper.dive-left-high > .neck,
.keeper.dive-left-low > .neck,
.keeper.dive-right-high > .neck,
.keeper.dive-right-low > .neck,
.keeper.dive-left-high > .badge,
.keeper.dive-left-low > .badge,
.keeper.dive-right-high > .badge,
.keeper.dive-right-low > .badge,
.keeper.dive-left-high > .num,
.keeper.dive-left-low > .num,
.keeper.dive-right-high > .num,
.keeper.dive-right-low > .num {
  opacity: 0 !important;
  visibility: hidden !important;
}

.keeper.saveContact::before {
  filter: saturate(1.08) contrast(1.04) brightness(1.06) drop-shadow(0 0 13px rgba(103, 230, 247, .24)) !important;
}

@media (max-width: 760px) {
  .person::before { filter: saturate(1.02) contrast(1.02) !important; }
  .person::after { opacity: .80 !important; }
  .keeper.dive-left-high::before,
  .keeper.dive-left-low::before,
  .keeper.dive-right-high::before,
  .keeper.dive-right-low::before,
  .keeper.dive-left-high::after,
  .keeper.dive-left-low::after,
  .keeper.dive-right-high::after,
  .keeper.dive-right-low::after,
  .keeper.dive-left-high > .torso,
  .keeper.dive-left-low > .torso,
  .keeper.dive-right-high > .torso,
  .keeper.dive-right-low > .torso {
    left: -61% !important;
    right: -61% !important;
  }
}

/* Foto-gerçekçi nötr yüz; skin/hair/face-N verisi bunun üzerinde canlı kalır. */
.person > .head {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  background-image: url("./penalty-3d/face-base.png") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  box-shadow: none !important;
  filter: drop-shadow(0 4px 4px rgba(0, 0, 0, .24)) saturate(.96) contrast(1.025) !important;
}

.person > .head::before {
  content: none !important;
  display: none !important;
}

.person > .head::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: linear-gradient(118deg, var(--skin1), var(--skin2)) !important;
  -webkit-mask-image: url("./penalty-3d/face-base.png") !important;
  mask-image: url("./penalty-3d/face-base.png") !important;
  -webkit-mask-repeat: no-repeat !important;
  mask-repeat: no-repeat !important;
  -webkit-mask-position: center !important;
  mask-position: center !important;
  -webkit-mask-size: contain !important;
  mask-size: contain !important;
  mix-blend-mode: multiply !important;
  opacity: .76 !important;
  pointer-events: none !important;
  z-index: 1 !important;
}

.person > .head > .eye,
.person > .head > .brow,
.person > .head > .nose,
.person > .head > .mouth {
  display: none !important;
}

.person > .head > .beard {
  z-index: 3 !important;
  bottom: 7% !important;
  height: 28% !important;
  opacity: .52 !important;
  mix-blend-mode: multiply !important;
  filter: blur(.35px) !important;
}

.person > .hair {
  top: 2.5% !important;
  width: 24% !important;
  height: 6.8% !important;
  border-radius: 54% 54% 24% 24% / 82% 82% 30% 30% !important;
  background:
    repeating-linear-gradient(103deg, transparent 0 2px, rgba(255, 255, 255, .11) 2px 3px),
    radial-gradient(ellipse at 50% 88%, color-mix(in srgb, var(--hairColor) 88%, #fff), var(--hairColor) 66%, #050606) !important;
  box-shadow: inset 0 -4px 5px rgba(0, 0, 0, .34), 0 2px 3px rgba(0, 0, 0, .18) !important;
  filter: saturate(.9) contrast(1.08) !important;
}

.person > .hair::after {
  bottom: -14% !important;
  height: 36% !important;
  opacity: .66 !important;
}

.face-1 > .head { width: 23.8% !important; height: 17.4% !important; }
.face-2 > .head { width: 22.8% !important; height: 17.8% !important; }
.face-3 > .head { width: 25.2% !important; height: 17.0% !important; }
.face-4 > .head { width: 22.5% !important; height: 17.9% !important; }
.face-5 > .head { width: 24.4% !important; height: 17.5% !important; }

.face-1 > .hair { width: 23% !important; height: 5.8% !important; }
.face-2 > .hair { width: 24.5% !important; height: 7.1% !important; transform: translateX(-51%) rotate(-3deg) translateZ(10px) !important; }
.face-3 > .hair { width: 26% !important; height: 7.8% !important; }
.face-4 > .hair { width: 22.5% !important; height: 4.6% !important; top: 3.2% !important; opacity: .88 !important; }
.face-5 > .hair { width: 25% !important; height: 6.5% !important; }

@supports not ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
  .person::after,
  .person > .torso,
  .person > .head::after {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shooter.run::before,
  .shooter.run::after,
  .shooter.run > .torso,
  .shooter.kick::before,
  .shooter.kick::after,
  .shooter.kick > .torso {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}