/* V61 Penalty League — yalnızca görsel katman.
   Oyun alanlarının ölçüsü, konumu, olayları ve zamanlaması değiştirilmez. */

.stage {
  isolation: isolate !important;
  background-color: #083a28 !important;
  background-image:
    linear-gradient(180deg, rgba(2, 12, 25, .10) 0%, rgba(3, 16, 29, .08) 25%, rgba(4, 30, 24, .10) 62%, rgba(2, 18, 17, .24) 100%),
    url("./penalty/stadium.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  box-shadow:
    0 28px 72px rgba(0, 8, 20, .42),
    inset 0 0 0 1px rgba(255, 255, 255, .14),
    inset 0 -90px 110px rgba(0, 18, 15, .16) !important;
}

.stage::before,
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.stage::before {
  z-index: 2;
  opacity: .68;
  background:
    radial-gradient(ellipse at 13% -3%, rgba(255, 255, 255, .44), transparent 25%),
    radial-gradient(ellipse at 50% -7%, rgba(224, 244, 255, .28), transparent 27%),
    radial-gradient(ellipse at 87% -3%, rgba(255, 255, 255, .44), transparent 25%),
    linear-gradient(180deg, rgba(4, 17, 35, .02), transparent 52%, rgba(1, 16, 16, .12));
  mix-blend-mode: screen;
}

.stage::after {
  z-index: 34;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(2, 10, 22, .20), transparent 17% 79%, rgba(2, 10, 22, .26)),
    radial-gradient(ellipse at center, transparent 54%, rgba(1, 9, 18, .25) 100%);
  box-shadow: inset 0 0 72px rgba(0, 8, 18, .23);
}

.stadiumCrowd {
  opacity: .18 !important;
  filter: saturate(.7) blur(.15px) !important;
  mix-blend-mode: screen !important;
}

.lights {
  opacity: .92 !important;
  filter: saturate(.78) contrast(1.06) !important;
}

.pitch3d {
  opacity: .38 !important;
  border-color: rgba(243, 250, 246, .58) !important;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .035), transparent 45%, rgba(255, 255, 255, .035)),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0 1px, transparent 1px 74px) !important;
  box-shadow:
    inset 0 0 90px rgba(0, 26, 18, .22),
    0 0 28px rgba(207, 255, 231, .05) !important;
}

.boxLine,
.penaltyArc {
  border-color: rgba(245, 253, 248, .74) !important;
  filter: drop-shadow(0 2px 1px rgba(0, 22, 16, .30)) !important;
}

/* PBR kale görseli; mevcut goalFrame sarsılma sınıfını aynen takip eder. */
.goalScene {
  filter: drop-shadow(0 22px 25px rgba(0, 12, 20, .32)) !important;
}

.goalShadow {
  background: radial-gradient(ellipse at center, rgba(0, 7, 14, .54), transparent 72%) !important;
  filter: blur(11px) !important;
}

.goalDepth {
  opacity: .55 !important;
  background:
    linear-gradient(180deg, rgba(216, 239, 248, .08), rgba(0, 16, 23, .22)),
    radial-gradient(ellipse at 50% 100%, rgba(23, 80, 64, .24), transparent 58%) !important;
  box-shadow: inset 0 -62px 90px rgba(0, 10, 18, .30) !important;
}

.goalFrame::before {
  inset: -4% -2% -9% !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("./penalty/goal.webp") center / 100% 100% no-repeat !important;
  filter:
    drop-shadow(0 16px 15px rgba(0, 9, 17, .46))
    drop-shadow(0 0 10px rgba(232, 249, 255, .22)) !important;
}

.goalFrame::after {
  content: "" !important;
  position: absolute !important;
  inset: 2% 1% -3% !important;
  z-index: -1 !important;
  border-radius: 9px 9px 22px 22px !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, .06), rgba(0, 15, 25, .16)) !important;
  box-shadow: inset 0 -32px 55px rgba(0, 12, 18, .22) !important;
}

.goalNet {
  opacity: .50 !important;
  background:
    linear-gradient(60deg, rgba(236, 249, 253, .38) 1px, transparent 1px) 0 0 / 28px 24px,
    linear-gradient(120deg, rgba(236, 249, 253, .34) 1px, transparent 1px) 0 0 / 28px 24px,
    radial-gradient(circle at var(--netX, 50%) var(--netY, 50%), rgba(255, 255, 255, .56), transparent 23%),
    rgba(224, 246, 250, .018) !important;
  box-shadow:
    inset 0 0 55px rgba(227, 250, 255, .08),
    inset 0 -28px 42px rgba(2, 25, 29, .16) !important;
  filter: drop-shadow(0 4px 2px rgba(0, 17, 22, .18)) !important;
}

.zoneGrid {
  background: linear-gradient(180deg, rgba(3, 24, 32, .025), rgba(1, 22, 24, .09)) !important;
  box-shadow: inset 0 0 38px rgba(0, 17, 22, .10) !important;
}

.zone {
  color: rgba(240, 251, 255, .50) !important;
  border-color: rgba(226, 248, 255, .12) !important;
  background: rgba(2, 25, 30, .018) !important;
  text-shadow: 0 2px 6px rgba(0, 10, 16, .52) !important;
}

.zone:hover,
.zone.selected {
  background: rgba(63, 212, 225, .15) !important;
  backdrop-filter: blur(2px) !important;
}

/* Foto-gerçekçi oyuncu katmanı. Parent elemanlar oyun kodunun mevcut
   konum/transform sınıflarını kullanmayı sürdürür. */
.person {
  image-rendering: auto !important;
  filter:
    drop-shadow(0 21px 16px rgba(0, 7, 13, .42))
    drop-shadow(0 3px 2px rgba(0, 0, 0, .28)) !important;
}

.person > * {
  opacity: 0 !important;
  pointer-events: none !important;
}

.person::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -7%;
  z-index: 4;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  image-rendering: auto;
  transform-origin: 50% 62%;
  transition: filter .28s ease, opacity .22s ease;
}

.shooter::before {
  width: 174%;
  height: 128%;
  transform: translateX(-50%);
  background-image: url("./penalty/shooter-ready.webp");
}

.shooter.run::before {
  filter: brightness(1.04) saturate(1.08) drop-shadow(-7px 1px 7px rgba(188, 227, 255, .16));
}

.shooter.kick::before,
.shooter.follow::before,
.shooter.celebrate::before {
  width: 215%;
  height: 132%;
  background-image: url("./penalty/shooter-kick.webp");
  filter: saturate(1.08) contrast(1.03);
}

.shooter.frustrated::before {
  filter: saturate(.68) brightness(.88) contrast(1.04);
}

.keeper::before {
  width: 242%;
  height: 126%;
  transform: translateX(-50%);
  background-image: url("./penalty/keeper-ready.webp");
  filter: saturate(1.08) contrast(1.03);
}

.keeper[class*="dive-left"]::before,
.keeper[class*="dive-right"]::before {
  width: 342%;
  height: 134%;
  bottom: -13%;
  background-image: url("./penalty/keeper-dive.webp");
  filter: saturate(1.08) contrast(1.04) drop-shadow(0 8px 7px rgba(0, 9, 17, .22));
}

.keeper.dive-left-high::before { transform: translateX(-50%) rotate(63deg); }
.keeper.dive-left-low::before { transform: translateX(-50%) rotate(76deg); }
.keeper.dive-right-high::before { transform: translateX(-50%) rotate(-63deg) scaleX(-1); }
.keeper.dive-right-low::before { transform: translateX(-50%) rotate(-76deg) scaleX(-1); }

.keeper.saveContact::before {
  filter:
    brightness(1.13)
    saturate(1.15)
    drop-shadow(0 0 11px rgba(107, 237, 255, .58))
    drop-shadow(0 12px 10px rgba(0, 7, 13, .34)) !important;
}

.keeper::after {
  content: "" !important;
  position: absolute !important;
  left: 50% !important;
  top: auto !important;
  bottom: -4% !important;
  width: 126% !important;
  height: 14% !important;
  z-index: 1 !important;
  transform: translateX(-50%) !important;
  border-radius: 50% !important;
  background: radial-gradient(ellipse, rgba(0, 7, 12, .48), transparent 70%) !important;
  box-shadow: none !important;
  filter: blur(3px) !important;
  pointer-events: none !important;
}

.referee {
  filter:
    drop-shadow(0 17px 12px rgba(0, 7, 13, .40))
    drop-shadow(0 2px 1px rgba(0, 0, 0, .28)) !important;
}

.referee > :not(.whistleFx) {
  opacity: 0 !important;
  pointer-events: none !important;
}

.referee::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6%;
  width: 128%;
  height: 128%;
  z-index: 3;
  transform: translateX(-50%);
  transform-origin: 50% 80%;
  background: url("./penalty/referee.webp") center bottom / contain no-repeat;
  pointer-events: none;
}

.referee.whistle::before {
  animation: v61RefWhistle .62s cubic-bezier(.2, .9, .3, 1) both;
}

@keyframes v61RefWhistle {
  0% { transform: translateX(-50%) rotate(0); }
  38% { transform: translateX(-50%) rotate(-2.3deg) translateY(-2px); filter: brightness(1.15); }
  100% { transform: translateX(-50%) rotate(0); }
}

.ball {
  border: 0 !important;
  border-radius: 50% !important;
  background: url("./penalty/ball.webp") center / contain no-repeat !important;
  box-shadow:
    0 12px 20px rgba(0, 7, 12, .46),
    0 0 8px rgba(255, 255, 255, .18) !important;
  filter: saturate(1.04) contrast(1.07) !important;
}

.ball::after {
  content: "";
  position: absolute;
  inset: 4%;
  border-radius: 50%;
  background: radial-gradient(circle at 31% 22%, rgba(255, 255, 255, .30), transparent 27%);
  mix-blend-mode: screen;
  pointer-events: none;
}

.ballShadow {
  opacity: .62 !important;
  background: radial-gradient(ellipse, rgba(0, 4, 7, .62), transparent 70%) !important;
  filter: blur(3.3px) !important;
}

.spot {
  background: radial-gradient(circle, rgba(250, 255, 248, .92), rgba(232, 247, 236, .54) 38%, transparent 72%) !important;
  box-shadow: 0 0 10px rgba(236, 255, 244, .24) !important;
}

.trail {
  height: 8px !important;
  background:
    radial-gradient(circle at 96% 50%, rgba(255, 255, 255, 1) 0 5%, transparent 19%),
    linear-gradient(90deg, transparent, rgba(116, 223, 255, .16) 20%, rgba(224, 249, 255, .72) 73%, rgba(255, 255, 255, .98)) !important;
  border-radius: 999px !important;
  box-shadow:
    0 0 7px rgba(255, 255, 255, .68),
    0 0 18px rgba(92, 220, 255, .44),
    0 0 34px rgba(72, 169, 255, .22) !important;
  filter: blur(.2px) !important;
}

.impact {
  border: 2px solid rgba(232, 252, 255, .92) !important;
  background:
    radial-gradient(circle, rgba(255, 255, 255, .42), transparent 21%),
    conic-gradient(from 12deg, transparent 0 7%, rgba(135, 233, 255, .74) 8% 9%, transparent 10% 20%, rgba(255, 223, 138, .72) 21% 22%, transparent 23% 38%, rgba(255, 255, 255, .62) 39% 40%, transparent 41% 100%) !important;
  box-shadow:
    0 0 18px rgba(255, 255, 255, .44),
    0 0 42px rgba(95, 222, 255, .32),
    inset 0 0 19px rgba(255, 255, 255, .22) !important;
}

.cameraFlash {
  background:
    radial-gradient(circle at var(--flashX, 50%) var(--flashY, 50%), rgba(255, 255, 255, .72), rgba(183, 237, 255, .22) 18%, transparent 47%) !important;
  mix-blend-mode: screen !important;
}

.shotPath {
  stroke-width: 5 !important;
  stroke-dasharray: 8 13 !important;
  filter:
    drop-shadow(0 0 4px rgba(255, 255, 255, .68))
    drop-shadow(0 0 11px currentColor) !important;
}

.keeperLabel,
.shooterLabel {
  background: linear-gradient(180deg, rgba(4, 24, 38, .90), rgba(3, 15, 27, .82)) !important;
  border-color: rgba(231, 204, 133, .34) !important;
  box-shadow: 0 10px 22px rgba(0, 8, 17, .28), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(10px) !important;
}

.turnBanner,
.fieldTools {
  border-color: rgba(232, 204, 132, .36) !important;
  background: linear-gradient(135deg, rgba(4, 24, 42, .90), rgba(9, 50, 61, .83)) !important;
  box-shadow: 0 16px 42px rgba(0, 8, 19, .34), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.controls {
  border-color: rgba(233, 205, 133, .30) !important;
  background: linear-gradient(180deg, rgba(6, 31, 49, .94), rgba(4, 24, 40, .93)) !important;
  box-shadow: 0 18px 44px rgba(0, 8, 19, .30), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.controls button {
  background: linear-gradient(180deg, rgba(21, 67, 91, .96), rgba(7, 35, 58, .97)) !important;
  border-color: rgba(226, 197, 124, .30) !important;
  box-shadow: 0 8px 18px rgba(0, 7, 16, .21), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
}

.controls button:hover:not(:disabled),
.controls button.selected {
  border-color: rgba(239, 207, 127, .76) !important;
  background: linear-gradient(180deg, #1e5e7c, #0a3859) !important;
  box-shadow: 0 10px 23px rgba(0, 9, 19, .28), 0 0 0 2px rgba(223, 182, 82, .17) !important;
}

@media (max-width: 760px) {
  .stage {
    background-position: 50% center !important;
  }

  .stage::after {
    background: radial-gradient(ellipse at center, transparent 62%, rgba(1, 9, 18, .20) 100%) !important;
  }

  .goalFrame::before {
    inset: -3% -1% -7% !important;
  }

  .shooter::before {
    width: 160%;
    height: 122%;
  }

  .shooter.kick::before,
  .shooter.follow::before,
  .shooter.celebrate::before {
    width: 198%;
    height: 126%;
  }

  .keeper::before {
    width: 220%;
    height: 121%;
  }

  .keeper[class*="dive-left"]::before,
  .keeper[class*="dive-right"]::before {
    width: 312%;
    height: 128%;
  }

  .referee::before {
    width: 118%;
    height: 122%;
  }
}

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