:root {
  --kit-primary: #1677d2;
  --kit-secondary: #ffffff;
  --kit-accent: #f7c833;
  --kit-shorts: #102748;
  --kit-socks: #ffffff;
  --skin: #8a5a43;
}

.penalty-3d {
  min-height: 560px;
  perspective: 1120px;
  perspective-origin: 50% 12%;
  background:
    radial-gradient(circle at 50% 5%, rgba(255,255,255,.86), rgba(255,255,255,0) 12%),
    linear-gradient(180deg, #14293d 0 16%, #2d7cae 16% 34%, #094431 34% 100%);
}

.penalty-3d::before {
  left: -22%;
  right: -22%;
  bottom: -218px;
  height: 660px;
  transform: rotateX(66deg);
  background:
    linear-gradient(rgba(255,255,255,.24) 1px, transparent 1px) 0 0 / 56px 38px,
    linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px) 0 0 / 70px 38px,
    repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 64px, transparent 64px 128px),
    radial-gradient(ellipse at 50% 18%, rgba(116, 255, 190, .28), transparent 36%),
    linear-gradient(90deg, #0a6b3d, #13a15c 48%, #087246);
  box-shadow:
    inset 0 34px 54px rgba(255,255,255,.18),
    inset 0 -80px 110px rgba(0,0,0,.22),
    0 -24px 34px rgba(0,0,0,.28);
}

.penalty-3d::after {
  left: 13%;
  right: 13%;
  bottom: 204px;
  height: 86px;
  transform: rotateX(66deg);
  border-width: 4px;
  box-shadow: 0 14px 24px rgba(255,255,255,.12);
}

.penalty-3d .arena-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 18% 18%, rgba(255,255,255,.26), transparent 16%),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.22), transparent 16%),
    linear-gradient(90deg, rgba(255,255,255,.1), transparent 26% 74%, rgba(255,255,255,.1));
  mix-blend-mode: screen;
}

.penalty-3d .field-depth {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 48px;
  height: 285px;
  z-index: 2;
  transform: rotateX(64deg);
  transform-origin: bottom center;
  border: 2px solid rgba(255,255,255,.28);
  border-bottom: 0;
  border-radius: 34px 34px 0 0;
  background:
    linear-gradient(90deg, transparent 0 12%, rgba(255,255,255,.18) 12% 12.4%, transparent 12.4% 87.6%, rgba(255,255,255,.18) 87.6% 88%, transparent 88%),
    radial-gradient(ellipse at 50% 94%, transparent 0 21%, rgba(255,255,255,.22) 21.4% 22.2%, transparent 22.6%);
  opacity: .9;
}

.penalty-3d .stands {
  height: 136px;
  background:
    linear-gradient(180deg, rgba(0,0,0,.2), rgba(0,0,0,0) 34%),
    repeating-linear-gradient(90deg, #f9fbff 0 14px, #da3c47 14px 28px, #1e6ed2 28px 42px, #f4c53f 42px 56px);
  filter: drop-shadow(0 18px 22px rgba(0,0,0,.36));
}

.penalty-3d .stadium-title {
  position: absolute;
  left: 50%;
  top: 16px;
  z-index: 3;
  transform: translateX(-50%);
  width: min(560px, calc(100% - 42px));
  min-height: 42px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.72);
  border-radius: 10px;
  color: #ffffff;
  background:
    linear-gradient(135deg, rgba(5, 24, 38, .86), rgba(9, 78, 68, .78)),
    linear-gradient(90deg, rgba(255,255,255,.16), transparent 28% 72%, rgba(255,255,255,.16));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -4px 0 rgba(0,0,0,.18),
    0 14px 26px rgba(0,0,0,.28);
  font-size: clamp(18px, 3vw, 34px);
  font-weight: 1000;
  letter-spacing: 0;
  text-align: center;
  text-shadow: 0 2px 0 rgba(0,0,0,.34), 0 10px 22px rgba(0,0,0,.38);
}

.penalty-3d .goal {
  top: 82px;
  width: min(560px, calc(100% - 98px));
  height: 188px;
  z-index: 4;
  transform: translateX(-50%) rotateX(8deg) translateZ(26px);
  border-width: 7px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.26) 1px, transparent 1px) 0 0 / 38px 32px,
    linear-gradient(rgba(255,255,255,.24) 1px, transparent 1px) 0 0 / 38px 32px,
    linear-gradient(180deg, rgba(62, 154, 199, .22), rgba(10, 33, 42, .12));
  box-shadow:
    0 30px 42px rgba(0,0,0,.32),
    inset 0 0 0 1px rgba(255,255,255,.2),
    inset 0 -28px 42px rgba(0,0,0,.16);
}

.penalty-3d .goal::before,
.penalty-3d .goal::after {
  width: 48px;
  height: calc(100% + 28px);
  background:
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px) 0 0 / 18px 24px,
    linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px) 0 0 / 18px 24px,
    rgba(255,255,255,.08);
}

.penalty-3d .keeper {
  top: 164px;
  z-index: 6;
  transform: translateX(-50%) translateZ(38px) scale(1.06);
  filter: drop-shadow(0 22px 14px rgba(0,0,0,.4));
}

.penalty-3d .keeper.left {
  transform: translateX(-220px) translateZ(38px) rotate(-17deg) scale(.98);
}

.penalty-3d .keeper.right {
  transform: translateX(142px) translateZ(38px) rotate(17deg) scale(.98);
}

.penalty-3d .keeper .head {
  background:
    radial-gradient(circle at 38% 24%, rgba(255,255,255,.28), transparent 18%),
    #76503d;
}

.penalty-3d .keeper .body,
.penalty-3d .keeper .body::before,
.penalty-3d .keeper .body::after {
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 32%),
    #102b4b;
}

.penalty-3d .striker {
  --striker-scale: .72;
  position: absolute;
  left: 46%;
  bottom: 16px;
  width: 150px;
  height: 238px;
  z-index: 7;
  transform: translateX(-50%) scale(var(--striker-scale));
  transform-origin: 50% 96%;
  pointer-events: none;
  filter: drop-shadow(0 28px 22px rgba(0,0,0,.36));
}

.penalty-3d .player-shadow {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 2px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,.48), rgba(0,0,0,0) 70%);
  transform: rotateX(70deg);
}

.penalty-3d .player-back {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.penalty-3d .player-head {
  position: absolute;
  left: 57px;
  top: 3px;
  width: 36px;
  height: 42px;
  border-radius: 48% 48% 43% 43%;
  background:
    radial-gradient(circle at 36% 20%, rgba(255,255,255,.3), transparent 18%),
    linear-gradient(180deg, #9a694e, var(--skin));
  box-shadow: inset -8px -7px 10px rgba(0,0,0,.18), 0 5px 0 rgba(36,22,17,.2);
}

.penalty-3d .player-neck {
  position: absolute;
  left: 65px;
  top: 40px;
  width: 20px;
  height: 18px;
  border-radius: 8px;
  background: var(--skin);
}

.penalty-3d .player-torso {
  position: absolute;
  left: 42px;
  top: 54px;
  width: 66px;
  height: 80px;
  border-radius: 18px 18px 15px 15px;
  background:
    linear-gradient(90deg, transparent 0 18%, var(--kit-secondary) 18% 26%, transparent 26% 74%, var(--kit-secondary) 74% 82%, transparent 82%),
    linear-gradient(135deg, rgba(255,255,255,.3), transparent 34%),
    linear-gradient(180deg, var(--kit-primary), color-mix(in srgb, var(--kit-primary) 72%, #000));
  border: 3px solid color-mix(in srgb, var(--kit-secondary) 70%, #ffffff);
  box-shadow:
    inset -10px -12px 16px rgba(0,0,0,.22),
    inset 8px 8px 12px rgba(255,255,255,.16),
    0 12px 16px rgba(0,0,0,.18);
}

.penalty-3d .kit-number {
  position: absolute;
  left: 0;
  right: 0;
  top: 20px;
  text-align: center;
  color: var(--kit-accent);
  font-weight: 1000;
  font-size: 24px;
  text-shadow: 0 2px 0 rgba(0,0,0,.22);
}

.penalty-3d .player-arm {
  position: absolute;
  top: 64px;
  width: 21px;
  height: 78px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, var(--kit-secondary) 0 18%, var(--kit-primary) 18% 70%, var(--skin) 70% 100%);
  box-shadow: inset -6px -7px 10px rgba(0,0,0,.22);
}

.penalty-3d .arm-left {
  left: 27px;
  transform: rotate(22deg);
}

.penalty-3d .arm-right {
  right: 27px;
  transform: rotate(-22deg);
}

.penalty-3d .player-shorts {
  position: absolute;
  left: 51px;
  top: 130px;
  width: 48px;
  height: 38px;
  border-radius: 8px 8px 14px 14px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), transparent 36%),
    var(--kit-shorts);
  box-shadow: inset -8px -8px 12px rgba(0,0,0,.24);
}

.penalty-3d .player-leg {
  position: absolute;
  top: 164px;
  width: 20px;
  height: 62px;
  border-radius: 999px 999px 12px 12px;
  background:
    linear-gradient(180deg, var(--skin) 0 26%, var(--kit-socks) 26% 78%, #101820 78% 100%);
  box-shadow: inset -5px -8px 10px rgba(0,0,0,.24);
}

.penalty-3d .leg-left {
  left: 52px;
  transform: rotate(4deg);
}

.penalty-3d .leg-right {
  right: 52px;
  transform: rotate(-4deg);
}

.penalty-3d .ball {
  top: auto;
  left: 55%;
  bottom: 26px;
  width: 50px;
  height: 50px;
  z-index: 10;
  background:
    radial-gradient(circle at 30% 22%, rgba(255,255,255,.95) 0 9%, transparent 10%),
    radial-gradient(circle at 48% 50%, #111 0 10%, transparent 11%),
    conic-gradient(from 22deg, #fff 0 12%, #101010 12% 20%, #fff 20% 36%, #101010 36% 45%, #fff 45% 64%, #101010 64% 72%, #fff 72% 100%);
  box-shadow:
    0 0 0 3px rgba(255,255,255,.88),
    inset -11px -13px 15px rgba(0,0,0,.2),
    inset 8px 7px 12px rgba(255,255,255,.55),
    0 28px 24px rgba(0,0,0,.34),
    0 0 22px rgba(255,255,255,.26);
}

.penalty-3d .ball.left {
  left: calc(50% - 182px);
  top: 180px;
  bottom: auto;
  transform: translateX(-50%) scale(.64) rotate(560deg);
}

.penalty-3d .ball.center {
  left: 50%;
  top: 170px;
  bottom: auto;
  transform: translateX(-50%) scale(.64) rotate(560deg);
}

.penalty-3d .ball.right {
  left: calc(50% + 182px);
  top: 180px;
  bottom: auto;
  transform: translateX(-50%) scale(.64) rotate(560deg);
}

.penalty-3d .ball.blocked {
  top: 274px;
  transform: translateX(-50%) scale(.9) rotate(330deg);
}

.penalty-3d .spot {
  top: auto;
  left: 55%;
  bottom: 45px;
  z-index: 6;
  opacity: .8;
}

.penalty-3d:has(.ball.left) .striker,
.penalty-3d:has(.ball.center) .striker,
.penalty-3d:has(.ball.right) .striker {
  animation: strikerKick .62s cubic-bezier(.18,.82,.26,1) both;
}

@keyframes strikerKick {
  0% { transform: translateX(-50%) scale(var(--striker-scale)) rotate(0); }
  28% { transform: translateX(-50%) translateY(3px) scale(var(--striker-scale)) rotate(-1deg); }
  62% { transform: translateX(-50%) translateY(-5px) scale(var(--striker-scale)) rotate(2deg); }
  100% { transform: translateX(-50%) scale(var(--striker-scale)) rotate(0); }
}

.penalty-3d:has(.ball.left) .leg-right,
.penalty-3d:has(.ball.center) .leg-right,
.penalty-3d:has(.ball.right) .leg-right {
  animation: kickLeg .58s ease both;
}

@keyframes kickLeg {
  0% { transform: rotate(-4deg); }
  36% { transform: rotate(24deg) translateY(-6px); }
  100% { transform: rotate(-4deg); }
}

@media (max-width: 620px) {
  .penalty-3d {
    min-height: 500px;
  }

  .penalty-3d .goal {
    top: 88px;
    width: calc(100% - 70px);
    height: 158px;
  }

  .penalty-3d .keeper {
    top: 156px;
    transform: translateX(-50%) scale(.76);
  }

  .penalty-3d .keeper.left {
    transform: translateX(-142px) rotate(-16deg) scale(.76);
  }

  .penalty-3d .keeper.right {
    transform: translateX(78px) rotate(16deg) scale(.76);
  }

  .penalty-3d .striker {
    left: 45%;
    bottom: 12px;
    --striker-scale: .6;
  }

  .penalty-3d .ball {
    left: 56%;
    bottom: 24px;
    width: 44px;
    height: 44px;
  }

  .penalty-3d .spot {
    left: 56%;
    bottom: 40px;
  }

  .penalty-3d .ball.left {
    left: calc(50% - 112px);
    top: 184px;
  }

  .penalty-3d .ball.center {
    top: 174px;
  }

  .penalty-3d .ball.right {
    left: calc(50% + 112px);
    top: 184px;
  }
}