/*
  V64 Penaltı Ligi presentation layer.
  Match rules, target selection and scoring stay in the existing engine. This file
  only stabilises the character skeleton and simplifies the shot presentation.
*/
:root { --v64-shot-ease: cubic-bezier(.18,.82,.22,1); }

/* Technical markers remain available in the result text, but no longer obscure
   the save/goal animation itself. The six selectable goal cells stay visible. */
.marker,
.targetHalo,
.keeperSvg,
.shotSvg {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* One rigid skeleton: head, hair, neck, number and badge never animate separately. */
.person > .head,
.person > .hair,
.person > .neck,
.person > .num,
.person > .badge {
  animation: none !important;
  transition: none !important;
  backface-visibility: hidden !important;
  transform-origin: 50% 50% !important;
  will-change: auto !important;
}

.shooter { --v64-person-scale: 1; }

.person > .neck {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  left: 50% !important;
  top: 9.6% !important;
  width: 12.5% !important;
  height: 10.5% !important;
  transform: translateX(-50%) !important;
  border: 0 !important;
  border-radius: 42% 42% 36% 36% !important;
  background: linear-gradient(100deg, var(--skin2), var(--skin1) 44%, var(--skin2)) !important;
  box-shadow: inset -2px 0 3px rgba(78,42,26,.16) !important;
  z-index: 3 !important;
}

.person > .head,
.face-1 > .head,
.face-2 > .head,
.face-3 > .head,
.face-4 > .head,
.face-5 > .head {
  left: 50% !important;
  top: -11.6% !important;
  width: 31.5% !important;
  height: 24.5% !important;
  transform: translateX(-50%) translateZ(8px) !important;
  z-index: 8 !important;
}

.person > .hair,
.face-1 > .hair,
.face-2 > .hair,
.face-3 > .hair,
.face-4 > .hair,
.face-5 > .hair {
  left: 50% !important;
  top: -10.2% !important;
  width: 32.5% !important;
  height: 8.8% !important;
  transform: translateX(-50%) translateZ(10px) !important;
  border-radius: 55% 55% 28% 28% / 85% 85% 28% 28% !important;
  opacity: 1 !important;
  z-index: 10 !important;
}

.shooter > .head,
.shooter.run > .head,
.shooter.kick > .head,
.shooter.follow > .head,
.shooter.celebrate > .head,
.shooter.frustrated > .head {
  top: -11.6% !important;
  left: 50% !important;
  transform: translateX(-50%) translateZ(8px) !important;
}

.shooter > .hair,
.shooter.run > .hair,
.shooter.kick > .hair,
.shooter.follow > .hair,
.shooter.celebrate > .hair,
.shooter.frustrated > .hair {
  top: -10.2% !important;
  left: 50% !important;
  transform: translateX(-50%) translateZ(10px) !important;
}

.shooter > .num,
.shooter.run > .num,
.shooter.kick > .num,
.shooter.follow > .num,
.shooter.celebrate > .num,
.shooter.frustrated > .num {
  left: 50.8% !important;
  top: 30.3% !important;
  transform: translateX(-50%) !important;
}

.shooter > .badge,
.shooter.run > .badge,
.shooter.kick > .badge,
.shooter.follow > .badge,
.shooter.celebrate > .badge,
.shooter.frustrated > .badge {
  left: 61% !important;
  top: 27.8% !important;
  transform: none !important;
}

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

.keeper:not([class*="dive-"]) > .hair,
.keeper.dive-center-high > .hair,
.keeper.dive-center-low > .hair {
  left: 50% !important;
  top: -10.4% !important;
  transform: translateX(-50%) translateZ(10px) !important;
}

/* Side-dive render uses a horizontal body; the face is locked to its collar. */
.keeper.dive-right-high > .head,
.keeper.dive-right-low > .head {
  left: 78.4% !important;
  top: 5.8% !important;
  transform: translateX(-50%) rotate(13deg) translateZ(8px) !important;
}

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

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

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

.keeper[class*="dive-left-"] > .neck,
.keeper[class*="dive-right-"] > .neck {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Whole-body motion only. */
.shooter.celebrate { animation: v64ShooterCelebrate 1.05s var(--v64-shot-ease) infinite !important; }
.shooter.frustrated { animation: v64ShooterSettle .62s var(--v64-shot-ease) both !important; }

@keyframes v64ShooterCelebrate {
  0%,100% { transform: translate(-50%,-50%) scale(var(--v64-person-scale,1)) rotate(2deg); }
  46% { transform: translate(-50%,-56%) scale(var(--v64-person-scale,1)) rotate(-1deg); }
}

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

.keeper[class*="dive-"].celebrate { animation: none !important; }

/* Broadcast-quality result focus: localized contact, whole-net recoil and recovery. */
.goalNet { transform-origin: var(--netX,50%) var(--netY,50%) !important; }
.goalNet.bulge {
  animation: v64NetImpact 1.42s cubic-bezier(.12,.78,.18,1) both !important;
}

.goalNet.bulge::before {
  content: "" !important;
  position: absolute !important;
  left: var(--netX,50%) !important;
  top: var(--netY,50%) !important;
  width: 26% !important;
  aspect-ratio: 1 !important;
  border: 2px solid rgba(255,255,255,.72) !important;
  border-radius: 50% !important;
  transform: translate(-50%,-50%) scale(.2) !important;
  opacity: 0 !important;
  animation: v64NetWave 1.05s ease-out both !important;
  pointer-events: none !important;
}

@keyframes v64NetImpact {
  0% { transform: perspective(500px) translateZ(0) scale(1); filter: brightness(1); }
  11% { transform: perspective(500px) translateZ(28px) scale(1.035,.91); filter: brightness(1.48); }
  25% { transform: perspective(500px) translateZ(-14px) scale(.985,1.07); }
  43% { transform: perspective(500px) translateZ(9px) scale(1.012,.975); }
  64% { transform: perspective(500px) translateZ(-4px) scale(.996,1.018); }
  82% { transform: perspective(500px) translateZ(2px) scale(1.003,.993); }
  100% { transform: perspective(500px) translateZ(0) scale(1); filter: brightness(1); }
}

@keyframes v64NetWave {
  0% { opacity: .86; transform: translate(-50%,-50%) scale(.18); }
  58% { opacity: .32; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.5); }
}

.stage.v64-shot-live .goalScene { animation: v64CameraTrack .96s var(--v64-shot-ease) both; }
.stage.v64-goal-scene .lights { filter: brightness(1.16) saturate(1.08) !important; }
.stage.v64-save-scene .keeper.saveContact { animation: v64SaveContact .72s var(--v64-shot-ease) both !important; }
.stage.v64-trap-scene .goalFrame { filter: drop-shadow(0 0 15px rgba(255,191,91,.20)); }

@keyframes v64CameraTrack {
  0%,100% { filter: none; }
  48% { filter: brightness(1.045) contrast(1.025); }
}

@keyframes v64SaveContact {
  0% { filter: drop-shadow(0 16px 13px rgba(0,7,12,.38)); }
  30% { filter: drop-shadow(0 20px 15px rgba(0,7,12,.45)) drop-shadow(0 0 22px rgba(102,231,246,.72)) brightness(1.10); }
  100% { filter: drop-shadow(0 18px 14px rgba(0,7,12,.42)) drop-shadow(0 0 10px rgba(102,231,246,.22)); }
}

.outcomeRibbon {
  top: auto !important;
  bottom: 13.5% !important;
  width: min(520px, calc(100% - 28px)) !important;
  min-width: 0 !important;
  max-width: none !important;
  padding: 11px 15px !important;
  border-radius: 15px !important;
  font-size: 11px !important;
  line-height: 1.42 !important;
  letter-spacing: .01em !important;
  background: linear-gradient(180deg,rgba(4,20,31,.94),rgba(4,14,23,.91)) !important;
  border-color: rgba(255,255,255,.23) !important;
}

.outcomeRibbon.goal { border-left: 4px solid #30f1aa !important; }
.outcomeRibbon.save { border-left: 4px solid #65e7ff !important; }
.outcomeRibbon.trap { border-left: 4px solid #ffbf5b !important; }

@keyframes v64RibbonIn {
  0% { opacity: 0; transform: translate(-50%,12px) scale(.96); }
  12%,82% { opacity: 1; transform: translate(-50%,0) scale(1); }
  100% { opacity: 0; transform: translate(-50%,-7px) scale(1); }
}

.outcomeRibbon.show { animation: v64RibbonIn 2.15s ease forwards !important; }

/* Avoid breaking a club name in the middle of a word on narrow team cards. */
.teamName {
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

@media (max-width: 760px) and (orientation: portrait) {
  .topbar .teamMain { padding-right: 30px !important; }
  .teamName {
    font-size: clamp(10.5px, 3.05vw, 12.5px) !important;
    letter-spacing: -.02em !important;
    line-height: 1.08 !important;
  }

  .shots {
    right: 5px !important;
    top: 6px !important;
    transform: scale(.60) !important;
  }

  .person > .head,
  .face-1 > .head,
  .face-2 > .head,
  .face-3 > .head,
  .face-4 > .head,
  .face-5 > .head {
    top: -14% !important;
    width: 46% !important;
    height: 35% !important;
  }

  .person > .hair,
  .face-1 > .hair,
  .face-2 > .hair,
  .face-3 > .hair,
  .face-4 > .hair,
  .face-5 > .hair {
    top: -15% !important;
    width: 38% !important;
    height: 9% !important;
  }

  .person > .neck {
    top: 8.8% !important;
    width: 15% !important;
    height: 12% !important;
  }

  .shooter > .head,
  .shooter.run > .head,
  .shooter.kick > .head,
  .shooter.follow > .head,
  .shooter.celebrate > .head,
  .shooter.frustrated > .head { top: -14% !important; }

  .shooter > .hair,
  .shooter.run > .hair,
  .shooter.kick > .hair,
  .shooter.follow > .hair,
  .shooter.celebrate > .hair,
  .shooter.frustrated > .hair { top: -15% !important; }

  .keeper:not([class*="dive-"]) > .head,
  .keeper.dive-center-high > .head,
  .keeper.dive-center-low > .head { top: -14.3% !important; }

  .keeper:not([class*="dive-"]) > .hair,
  .keeper.dive-center-high > .hair,
  .keeper.dive-center-low > .hair { top: -15.3% !important; }

  .keeper.dive-right-high > .head,
  .keeper.dive-right-low > .head,
  .keeper.dive-left-high > .head,
  .keeper.dive-left-low > .head {
    top: 3.8% !important;
    width: 40% !important;
    height: 30% !important;
  }

  .keeper.dive-right-high > .hair,
  .keeper.dive-right-low > .hair,
  .keeper.dive-left-high > .hair,
  .keeper.dive-left-low > .hair {
    top: 2.5% !important;
    width: 34% !important;
    height: 8% !important;
  }

  .keeper { transform: translate(-50%,-50%) scale(.62) !important; }
  .keeper.v63-positioned.dive-left-high,
  .keeper.v63-positioned.dive-right-high,
  .keeper.v63-positioned.dive-center-high,
  .keeper.v63-positioned.dive-center-low {
    transform: translate(-50%,-50%) scale(.58) !important;
  }
  .keeper.v63-positioned.dive-left-low {
    transform: translate(-50%,-50%) rotate(-8deg) scale(.58) !important;
  }
  .keeper.v63-positioned.dive-right-low {
    transform: translate(-50%,-50%) rotate(8deg) scale(.58) !important;
  }
  .shooter { --v64-person-scale: .64; transform: translate(-50%,-50%) scale(.64) !important; }
  .shooter.run { transform: translate(-50%,-50%) scale(.64) rotate(2deg) !important; }
  .shooter.kick,
  .shooter.follow { transform: translate(-50%,-50%) scale(.64) rotate(2deg) !important; }

  .outcomeRibbon {
    bottom: 16% !important;
    width: calc(100% - 22px) !important;
    padding: 9px 10px !important;
    font-size: 9.5px !important;
    line-height: 1.36 !important;
  }
}

@media (max-width: 390px) and (orientation: portrait) {
  .topbar .teamMain { padding-right: 24px !important; }
  .teamName { font-size: 10.5px !important; }
  .keeper { transform: translate(-50%,-50%) scale(.59) !important; }
  .shooter { --v64-person-scale: .61; }
  .shooter,
  .shooter.run,
  .shooter.kick,
  .shooter.follow { transform: translate(-50%,-50%) scale(.61) rotate(1.5deg) !important; }
}

@media (prefers-reduced-motion: reduce) {
  .stage.v64-shot-live .goalScene,
  .stage.v64-save-scene .keeper.saveContact,
  .goalNet.bulge,
  .goalNet.bulge::before { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}