/* V63 Penaltı Ligi — mobilde de kale ölçüsüne bağlı, sabit anatomili sunum katmanı.
   Oyun kuralları ve seçim bölgeleri aynı kalır; yalnızca görsel pozlar iyileştirilir. */

:root {
  --v63-motion: cubic-bezier(.2, .82, .22, 1);
}

/* Koşu bittiğinde gövdenin geriye sıçramasını engelle. Vuruş ve takip pozu,
   koşunun bittiği aynı ankorda kalır. */
.shooter {
  transition:
    left .48s var(--v63-motion),
    top .48s var(--v63-motion),
    transform .18s var(--v63-motion) !important;
  backface-visibility: hidden !important;
}

.shooter.kick,
.shooter.follow,
.shooter.celebrate,
.shooter.frustrated {
  left: calc(var(--field-center, 50%) - 50px) !important;
  top: 80.8% !important;
}

.shooter.kick,
.shooter.follow {
  transform: translate(-50%, -50%) scale(1) rotate(2deg) !important;
}

.shooter::before,
.shooter::after,
.shooter > .torso,
.shooter.run::before,
.shooter.run::after,
.shooter.run > .torso,
.shooter.kick::before,
.shooter.kick::after,
.shooter.kick > .torso,
.shooter.follow::before,
.shooter.follow::after,
.shooter.follow > .torso {
  animation: none !important;
  transition: none !important;
  transform: none !important;
  background-position: 50% 50% !important;
  -webkit-mask-position: 50% 50% !important;
  mask-position: 50% 50% !important;
}

/* PBR gövdelerin kendi boynu vardır. Eski geometrik boyun ikinci bir katman
   oluşturup başı göğse gömüyordu. */
.person > .neck {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

.person > .head,
.person > .hair,
.person > .badge,
.person > .num {
  animation: none !important;
  transition: none !important;
  backface-visibility: hidden !important;
}

/* Hazır/koşu pozu: yüzün alt çizgisi forma yakasına oturur. */
.shooter > .head,
.shooter.run > .head {
  top: -5.8% !important;
  transform: translateX(-50%) translateZ(8px) rotate(0deg) !important;
}

.shooter > .hair,
.shooter.run > .hair {
  top: -4.7% !important;
}

/* Vuruş render'ının yakası hazır poztan biraz aşağıdadır. */
.shooter.kick > .head,
.shooter.follow > .head,
.shooter.celebrate > .head,
.shooter.frustrated > .head {
  top: -4.5% !important;
  transform: translateX(-50%) translateZ(8px) rotate(2deg) !important;
}

.shooter.kick > .hair,
.shooter.follow > .hair,
.shooter.celebrate > .hair,
.shooter.frustrated > .hair {
  top: -3.4% !important;
  transform: translateX(-50%) translateZ(10px) rotate(2deg) !important;
}

.shooter.kick > .num,
.shooter.follow > .num,
.shooter.celebrate > .num,
.shooter.frustrated > .num {
  top: 30.2% !important;
  left: 51.5% !important;
  transform: translateX(-50%) rotate(3deg) !important;
}

.shooter.kick > .badge,
.shooter.follow > .badge,
.shooter.celebrate > .badge,
.shooter.frustrated > .badge {
  top: 27.6% !important;
  left: 61.5% !important;
  transform: rotate(3deg) !important;
}

/* Kutlama da tüm karakteri birlikte hareket ettirir; baş/forma ayrı ayrı zıplamaz. */
.shooter.celebrate {
  animation: v63ShooterCelebrate 1.18s var(--v63-motion) infinite !important;
}

.shooter.frustrated {
  animation: v63ShooterRecover .68s var(--v63-motion) both !important;
}

@keyframes v63ShooterCelebrate {
  0%, 100% { transform: translate(-50%, -50%) scale(1) rotate(2deg); }
  42% { transform: translate(-50%, -55%) scale(1.012) rotate(-1deg); }
}

@keyframes v63ShooterRecover {
  0% { transform: translate(-50%, -50%) scale(1) rotate(2deg); }
  100% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); }
}

/* Kaleci dalışı JavaScript tarafından doğrudan goalScene ölçüsüne yerleştirilir. */
.keeper {
  transition: none !important;
  backface-visibility: hidden !important;
}

.keeper.v63-positioned[class*="dive-"] {
  left: var(--v63-keeper-x) !important;
  top: var(--v63-keeper-y) !important;
  z-index: 21 !important;
}

.keeper:not([class*="dive-"]) > .head {
  top: -6.2% !important;
  transform: translateX(-50%) translateZ(8px) !important;
}

.keeper:not([class*="dive-"]) > .hair {
  top: -5.1% !important;
}

.keeper.dive-center-high,
.keeper.dive-center-low {
  transform: translate(-50%, -50%) scale(.96) !important;
}

.keeper.dive-center-high > .head,
.keeper.dive-center-low > .head {
  top: -6.2% !important;
  transform: translateX(-50%) translateZ(8px) !important;
}

.keeper.dive-center-high > .hair,
.keeper.dive-center-low > .hair {
  top: -5.1% !important;
}

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

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

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

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

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

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

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

.keeper[class*="dive-"] > .shadow {
  display: block !important;
  opacity: .78 !important;
  visibility: visible !important;
  width: 92% !important;
  height: 13% !important;
  bottom: -1% !important;
  background:
    radial-gradient(ellipse, rgba(7, 16, 20, .66) 0 34%, transparent 70%),
    radial-gradient(ellipse, rgba(100, 228, 247, .42), transparent 63%) !important;
  filter: blur(3px) !important;
}

.keeper.saveContact {
  filter:
    drop-shadow(0 18px 14px rgba(0, 7, 12, .42))
    drop-shadow(0 0 16px rgba(102, 231, 246, .32))
    brightness(1.045) !important;
}

/* Altı bölge her durumda okunur; sonuç rengi yalnızca ilgili hücrede parlar. */
.zone {
  color: rgba(248, 253, 255, .72) !important;
  border-color: rgba(231, 250, 255, .23) !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .035), transparent 62%),
    linear-gradient(180deg, rgba(4, 40, 47, .035), rgba(1, 24, 31, .11)) !important;
  text-shadow: 0 2px 5px rgba(0, 10, 16, .72) !important;
}

.zone::after {
  opacity: .84 !important;
  background: rgba(0, 18, 25, .38) !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
}

.zone.keeperLand {
  animation: v63KeeperLand .88s var(--v63-motion) both !important;
}

@keyframes v63KeeperLand {
  0% { box-shadow: inset 0 0 0 0 rgba(102, 231, 246, 0); }
  24% { box-shadow: inset 0 0 0 2px rgba(184, 248, 255, .86), inset 0 0 34px rgba(102, 231, 246, .30); }
  100% { box-shadow: inset 0 0 0 1px rgba(102, 231, 246, .18), inset 0 0 14px rgba(102, 231, 246, .08); }
}

/* Top uçuşu sırasında optik netlik; konum animasyonu JS tarafında bezier örneklenir. */
.ball.v63-flight {
  filter:
    saturate(1.10)
    contrast(1.12)
    drop-shadow(0 5px 4px rgba(0, 6, 10, .38))
    drop-shadow(0 0 9px rgba(228, 251, 255, .28)) !important;
  will-change: left, top, transform !important;
}

.shotPath {
  stroke-width: 5 !important;
  stroke-dasharray: 11 12 !important;
  stroke-linecap: round !important;
}

.shotSvg.show .shotPath {
  animation: v63ShotPath .86s linear both !important;
}

@keyframes v63ShotPath {
  from { stroke-dashoffset: 58; opacity: 0; }
  18% { opacity: .94; }
  to { stroke-dashoffset: 0; opacity: .94; }
}

/* Tüm file tepki verir; temas noktasındaki ikinci mesh daha fazla esner. */
.goalNet {
  transform-origin: var(--netX, 50%) var(--netY, 50%) !important;
  will-change: transform, filter, background-position !important;
}

.goalNet::before {
  transform-origin: var(--netX, 50%) var(--netY, 50%) !important;
}

.goalNet::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -4% !important;
  pointer-events: none !important;
  opacity: 0 !important;
  border-radius: 10px !important;
  background:
    linear-gradient(60deg, rgba(248, 254, 255, .90) 1px, transparent 1.4px) 0 0 / 21px 19px,
    linear-gradient(120deg, rgba(248, 254, 255, .84) 1px, transparent 1.4px) 0 0 / 21px 19px,
    radial-gradient(circle at var(--netX, 50%) var(--netY, 50%), rgba(255, 255, 255, .92), rgba(103, 231, 245, .22) 13%, transparent 30%) !important;
  -webkit-mask-image: radial-gradient(circle at var(--netX, 50%) var(--netY, 50%), #000 0 6%, rgba(0,0,0,.92) 15%, transparent 34%) !important;
  mask-image: radial-gradient(circle at var(--netX, 50%) var(--netY, 50%), #000 0 6%, rgba(0,0,0,.92) 15%, transparent 34%) !important;
  transform-origin: var(--netX, 50%) var(--netY, 50%) !important;
  mix-blend-mode: screen !important;
}

.goalNet.bulge {
  animation: v63WholeNet 1.34s var(--v63-motion) both !important;
}

.goalNet.bulge::before {
  animation: v63NetMesh 1.20s var(--v63-motion) both !important;
}

.goalNet.bulge::after,
.goalScene.v63-goal-contact .goalNet::after {
  animation: v63LocalNet 1.08s var(--v63-motion) both !important;
}

.goalScene.v63-goal-contact .goalFrame {
  animation: v63FrameSettle .72s ease-out both !important;
}

@keyframes v63WholeNet {
  0% { transform: perspective(760px) translateZ(0) scale3d(1,1,1); filter: brightness(1); background-position: 0 0, 0 0, 0 0, 0 0; }
  10% { transform: perspective(760px) translateZ(25px) scale3d(1.025,.91,1); filter: brightness(1.34); background-position: 5px 3px, -5px 3px, 0 0, 0 0; }
  23% { transform: perspective(760px) translateZ(-13px) scale3d(.986,1.074,1) skewX(-.45deg); background-position: -4px -2px, 4px -2px, 0 0, 0 0; }
  39% { transform: perspective(760px) translateZ(8px) scale3d(1.012,.972,1) skewX(.35deg); }
  58% { transform: perspective(760px) translateZ(-4px) scale3d(.995,1.026,1); }
  78% { transform: perspective(760px) translateZ(2px) scale3d(1.004,.994,1); }
  100% { transform: perspective(760px) translateZ(0) scale3d(1,1,1); filter: brightness(1); background-position: 0 0, 0 0, 0 0, 0 0; }
}

@keyframes v63NetMesh {
  0%, 100% { transform: translate(0,0) scale(1); opacity: .75; }
  14% { transform: translate(0,4px) scale(1.018,.95); opacity: 1; }
  31% { transform: translate(-2px,-2px) scale(.992,1.025); }
  54% { transform: translate(1px,1px) scale(1.006,.99); }
}

@keyframes v63LocalNet {
  0% { opacity: 0; transform: perspective(580px) translateZ(0) scale(.58); filter: blur(.8px); }
  9% { opacity: 1; transform: perspective(580px) translateZ(48px) scale(1.04); filter: blur(0); }
  25% { opacity: .86; transform: perspective(580px) translateZ(-23px) scale(.90,1.18); }
  48% { opacity: .60; transform: perspective(580px) translateZ(13px) scale(1.12,.96); }
  76% { opacity: .28; transform: perspective(580px) translateZ(-5px) scale(.98,1.05); }
  100% { opacity: 0; transform: perspective(580px) translateZ(0) scale(1); }
}

@keyframes v63FrameSettle {
  0%, 100% { filter: none; transform: translate(0,0); }
  18% { filter: drop-shadow(0 0 9px rgba(255,255,255,.36)); transform: translate(0,1px); }
  38% { transform: translate(0,-.5px); }
}

@media (max-width: 760px) {
  .shooter.kick,
  .shooter.follow,
  .shooter.celebrate,
  .shooter.frustrated {
    left: 45% !important;
    top: 420px !important;
  }

  .shooter > .head,
  .shooter.run > .head { top: -5.2% !important; }
  .shooter > .hair,
  .shooter.run > .hair { top: -4.1% !important; }
  .shooter.kick > .head,
  .shooter.follow > .head,
  .shooter.celebrate > .head,
  .shooter.frustrated > .head { top: -4.0% !important; }
  .shooter.kick > .hair,
  .shooter.follow > .hair,
  .shooter.celebrate > .hair,
  .shooter.frustrated > .hair { top: -3.0% !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: -56% !important;
    right: -56% !important;
  }

  .keeper.dive-right-high > .head,
  .keeper.dive-right-low > .head { left: 77% !important; top: 8% !important; }
  .keeper.dive-right-high > .hair,
  .keeper.dive-right-low > .hair { left: 77% !important; top: 6.9% !important; }
  .keeper.dive-left-high > .head,
  .keeper.dive-left-low > .head { left: 23% !important; top: 8% !important; }
  .keeper.dive-left-high > .hair,
  .keeper.dive-left-low > .hair { left: 23% !important; top: 6.9% !important; }

  .zone { font-size: 10.5px !important; }
  .zone::after { font-size: 7.5px !important; padding: 2px 4px !important; }
  .goalNet::after {
    background-size: 17px 15px, 17px 15px, auto !important;
  }
}

@media (min-width: 761px) {
  .referee {
    left: calc(var(--field-center, 50%) - 285px) !important;
    top: 79.4% !important;
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .shooter.kick,
  .shooter.follow,
  .shooter.celebrate,
  .shooter.frustrated {
    top: 397px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .shooter,
  .shooter.celebrate,
  .shooter.frustrated,
  .goalNet,
  .goalNet::before,
  .goalNet::after,
  .goalFrame,
  .shotPath {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}