/* V65 Penaltı — uncluttered selection, full-body motion, fail-safe presentation. */

/* The six labels belong to selection only. During a shot, retain a faint goal
   segmentation so the destination is readable without text colliding with bodies. */
.stage.v65-shot-active .zone {
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  text-indent: -9999px !important;
  text-shadow: none !important;
  border-color: rgba(240,252,255,.075) !important;
  background: rgba(4,25,31,.025) !important;
  transition: color .14s ease, border-color .2s ease, background .2s ease, box-shadow .2s ease !important;
}

.stage.v65-shot-active .zone::after {
  opacity: 0 !important;
  visibility: hidden !important;
}

.stage.v65-shot-active .zone.hitGoal {
  background: radial-gradient(circle,rgba(48,241,170,.26),rgba(48,241,170,.055) 58%,transparent 72%) !important;
  border-color: rgba(48,241,170,.30) !important;
}

.stage.v65-shot-active .zone.hitSave,
.stage.v65-shot-active .zone.keeperLand {
  background: radial-gradient(circle,rgba(101,231,255,.24),rgba(101,231,255,.05) 58%,transparent 72%) !important;
  border-color: rgba(101,231,255,.28) !important;
}

.stage.v65-shot-active .zone.hitTrap {
  background: radial-gradient(circle,rgba(255,191,91,.23),rgba(255,191,91,.045) 58%,transparent 72%) !important;
  border-color: rgba(255,191,91,.28) !important;
}

/* Hide every explanatory target overlay once the kick starts. Direction is shown
   exclusively by the ball and by the goalkeeper's complete body movement. */
.stage.v65-shot-active .marker,
.stage.v65-shot-active .targetHalo,
.stage.v65-shot-active .keeperSvg,
.stage.v65-shot-active .shotSvg,
.stage.v65-shot-active .turnBanner,
.stage.v65-shot-active .fieldTools {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Anatomical lock: the photo body, kit tint, skin tint and face remain one visible
   stack for ready, run, kick, follow-through, dive and result poses. */
.stage.v65-shot-active .person,
.stage.v65-shot-active .person::before,
.stage.v65-shot-active .person::after,
.stage.v65-shot-active .person > .torso,
.stage.v65-shot-active .person > .head,
.stage.v65-shot-active .person > .hair,
.stage.v65-shot-active .person > .neck,
.stage.v65-shot-active .person > .num,
.stage.v65-shot-active .person > .badge {
  visibility: visible !important;
}

/* V62'nin eski geometrik karakteri kapatan seçicileri, koşu ve dalış sınıfı
   geldiğinde ::before/::after içeriğini de kapatıyordu. Sonuç olarak motor
   çalışmaya devam ederken ekranda yalnızca yüz/numara kalabiliyordu. Bu katman
   her pozda gerçek tam-vücut renderını ve renk maskelerini yeniden üretir. */
.stage.v65-shot-active .person::before,
.stage.v65-shot-active .person::after,
.stage.v65-shot-active .shooter.run::before,
.stage.v65-shot-active .shooter.run::after,
.stage.v65-shot-active .shooter.kick::before,
.stage.v65-shot-active .shooter.kick::after,
.stage.v65-shot-active .shooter.follow::before,
.stage.v65-shot-active .shooter.follow::after,
.stage.v65-shot-active .keeper[class*="dive-"]::before,
.stage.v65-shot-active .keeper[class*="dive-"]::after {
  content: "" !important;
  display: block !important;
}

.stage.v65-shot-active .shooter.run::before {
  background-image: url("../v62-ui/penalty-3d/player-ready.png") !important;
}

.stage.v65-shot-active .shooter.kick::before,
.stage.v65-shot-active .shooter.follow::before,
.stage.v65-shot-active .shooter.celebrate::before,
.stage.v65-shot-active .shooter.frustrated::before {
  background-image: url("../v62-ui/penalty-3d/player-kick.png") !important;
}

.stage.v65-shot-active .keeper.dive-center-high::before,
.stage.v65-shot-active .keeper.dive-center-low::before {
  background-image: url("../v62-ui/penalty-3d/keeper-ready.png") !important;
}

.stage.v65-shot-active .keeper.dive-center-high::after,
.stage.v65-shot-active .keeper.dive-center-low::after {
  -webkit-mask-image: url("../v62-ui/penalty-3d/keeper-ready-kit-mask.png") !important;
  mask-image: url("../v62-ui/penalty-3d/keeper-ready-kit-mask.png") !important;
}

.stage.v65-shot-active .keeper.dive-center-high > .torso,
.stage.v65-shot-active .keeper.dive-center-low > .torso {
  -webkit-mask-image: url("../v62-ui/penalty-3d/keeper-ready-skin-mask.png") !important;
  mask-image: url("../v62-ui/penalty-3d/keeper-ready-skin-mask.png") !important;
}

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

/* Frame-safe fallback: even if a legacy render toggles the stage phase one
   frame before it clears the pose class, the photographic body cannot vanish. */
.shooter.run::before,
.shooter.run::after,
.shooter.kick::before,
.shooter.kick::after,
.shooter.follow::before,
.shooter.follow::after,
.keeper[class*="dive-"]::before,
.keeper[class*="dive-"]::after {
  content: "" !important;
  display: block !important;
  visibility: visible !important;
}

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

.shooter.kick::before,
.shooter.follow::before,
.shooter.celebrate::before,
.shooter.frustrated::before {
  content: "" !important;
  display: block !important;
  background-image: url("../v62-ui/penalty-3d/player-kick.png") !important;
}

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

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

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

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

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

.stage.v65-shot-active .person,
.stage.v65-shot-active .person::before,
.stage.v65-shot-active .person > .head,
.stage.v65-shot-active .person > .hair,
.stage.v65-shot-active .person > .neck,
.stage.v65-shot-active .person > .num,
.stage.v65-shot-active .person > .badge {
  opacity: 1 !important;
}

.stage.v65-shot-active .person::before {
  display: block !important;
  filter: saturate(1.06) contrast(1.035) brightness(1.015) drop-shadow(0 10px 9px rgba(0,7,11,.22)) !important;
}

.stage.v65-shot-active .person::after { display: block !important; opacity: .78 !important; }
.stage.v65-shot-active .person > .torso { display: block !important; opacity: .60 !important; }

.person.v65-body-locked > .head,
.person.v65-body-locked > .hair,
.person.v65-body-locked > .neck,
.person.v65-body-locked > .num,
.person.v65-body-locked > .badge {
  animation: none !important;
  transition: none !important;
}

/* The game engine replaces the pose className between run, kick and result.
   Lock the anatomical overlays by shot phase as well, so a class rewrite can
   never let the head or shirt animate independently for a single frame. */
.stage.v65-shot-active .person > .head,
.stage.v65-shot-active .person > .hair,
.stage.v65-shot-active .person > .neck,
.stage.v65-shot-active .person > .torso,
.stage.v65-shot-active .person > .num,
.stage.v65-shot-active .person > .badge {
  animation: none !important;
  transition: none !important;
}

/* Side-dive artwork already contains the horizontal collar/chest. Suppress the
   upright-only neck and shirt labels there so no detached number can remain at
   the goalkeeper's former centre point. */
.stage.v65-shot-active .keeper[class*="dive-left-"] > .neck,
.stage.v65-shot-active .keeper[class*="dive-left-"] > .num,
.stage.v65-shot-active .keeper[class*="dive-left-"] > .badge,
.stage.v65-shot-active .keeper[class*="dive-right-"] > .neck,
.stage.v65-shot-active .keeper[class*="dive-right-"] > .num,
.stage.v65-shot-active .keeper[class*="dive-right-"] > .badge {
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Yüz, boyun boşluğuna oturacak kadar küçük tutulur. Önceki mobil kural yüzü
   gövdenin neredeyse yarısı kadar büyütüp göğse gömüyordu. */
@media (max-width: 760px) and (orientation: portrait) {
  .person > .head,
  .face-1 > .head,
  .face-2 > .head,
  .face-3 > .head,
  .face-4 > .head,
  .face-5 > .head,
  .shooter > .head,
  .shooter.run > .head,
  .shooter.kick > .head,
  .shooter.follow > .head,
  .shooter.celebrate > .head,
  .shooter.frustrated > .head,
  .keeper:not([class*="dive-"]) > .head,
  .keeper.dive-center-high > .head,
  .keeper.dive-center-low > .head {
    top: -10.3% !important;
    width: 28% !important;
    height: 22% !important;
  }

  .person > .hair,
  .face-1 > .hair,
  .face-2 > .hair,
  .face-3 > .hair,
  .face-4 > .hair,
  .face-5 > .hair,
  .shooter > .hair,
  .shooter.run > .hair,
  .shooter.kick > .hair,
  .shooter.follow > .hair,
  .shooter.celebrate > .hair,
  .shooter.frustrated > .hair,
  .keeper:not([class*="dive-"]) > .hair,
  .keeper.dive-center-high > .hair,
  .keeper.dive-center-low > .hair {
    top: -9.5% !important;
    width: 28.5% !important;
    height: 7.2% !important;
  }

  .keeper.dive-right-high > .head,
  .keeper.dive-right-low > .head,
  .keeper.dive-left-high > .head,
  .keeper.dive-left-low > .head {
    width: 27% !important;
    height: 21% !important;
  }

  .keeper.dive-right-high > .hair,
  .keeper.dive-right-low > .hair,
  .keeper.dive-left-high > .hair,
  .keeper.dive-left-low > .hair {
    width: 27.5% !important;
    height: 7% !important;
  }
}

/* Whole-character motion only; no head/kit/limb layer animates independently. */
.shooter.run {
  animation: v65RunApproach .31s ease-in-out 2 alternate !important;
}

.shooter.kick,
.shooter.kick.follow {
  animation: v65KickThrough .40s cubic-bezier(.16,.82,.2,1) both !important;
}

@keyframes v65RunApproach {
  from { transform: translate(-50%,-50%) scale(var(--v64-person-scale,1)) rotate(-1.2deg); }
  to { transform: translate(-50%,-52%) scale(var(--v64-person-scale,1)) rotate(2deg); }
}

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

/* Smoothly move the entire goalkeeper between the six engine coordinates. */
.keeper {
  transition:
    left .48s cubic-bezier(.16,.78,.2,1),
    top .48s cubic-bezier(.16,.78,.2,1),
    transform .48s cubic-bezier(.16,.78,.2,1),
    filter .18s ease !important;
}

.keeper.v63-positioned[class*="dive-"] {
  will-change: left, top, transform !important;
}

.stage.v65-save-scene .keeper.saveContact {
  filter:
    drop-shadow(0 18px 13px rgba(0,8,14,.46))
    drop-shadow(0 0 19px rgba(101,231,255,.56))
    brightness(1.07) !important;
}

/* A restrained camera pull leads into localized net contact, followed by a
   whole-net oscillation. The transform origin is the actual selected zone. */
.stage.v65-shot-active .goalScene {
  transition: filter .2s ease !important;
}

.stage.v65-goal-scene .goalScene {
  animation: v65GoalCamera 1.05s cubic-bezier(.18,.76,.22,1) both !important;
}

.goalNet.bulge {
  transform-origin: var(--netX,50%) var(--netY,50%) !important;
  animation: v65FullNetRecoil 1.58s cubic-bezier(.12,.76,.18,1) both !important;
}

.goalNet.bulge::before {
  width: 22% !important;
  border-width: 2px !important;
  animation: v65NetContactRing 1.08s ease-out both !important;
}

.goalNet.bulge::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background:
    radial-gradient(circle at var(--netX,50%) var(--netY,50%),rgba(255,255,255,.54),rgba(255,255,255,.13) 7%,transparent 22%),
    repeating-linear-gradient(90deg,transparent 0 33px,rgba(255,255,255,.10) 33px 35px),
    repeating-linear-gradient(0deg,transparent 0 26px,rgba(255,255,255,.08) 26px 28px) !important;
  mix-blend-mode: screen !important;
  opacity: 0 !important;
  animation: v65NetLight 1.25s ease-out both !important;
}

@keyframes v65GoalCamera {
  0%,100% { filter: brightness(1) saturate(1); }
  26% { filter: brightness(1.10) saturate(1.08); }
  58% { filter: brightness(1.035) saturate(1.04); }
}

@keyframes v65FullNetRecoil {
  0% { transform: perspective(520px) translateZ(0) scale(1); filter: brightness(1); }
  9% { transform: perspective(520px) translateZ(34px) scale(1.042,.89); filter: brightness(1.52); }
  22% { transform: perspective(520px) translateZ(-18px) scale(.978,1.082); }
  38% { transform: perspective(520px) translateZ(11px) scale(1.016,.966); }
  55% { transform: perspective(520px) translateZ(-7px) scale(.992,1.028); }
  70% { transform: perspective(520px) translateZ(4px) scale(1.007,.987); }
  84% { transform: perspective(520px) translateZ(-2px) scale(.997,1.008); }
  100% { transform: perspective(520px) translateZ(0) scale(1); filter: brightness(1); }
}

@keyframes v65NetContactRing {
  0% { opacity: .92; transform: translate(-50%,-50%) scale(.16); }
  62% { opacity: .30; }
  100% { opacity: 0; transform: translate(-50%,-50%) scale(2.8); }
}

@keyframes v65NetLight {
  0% { opacity: .86; filter: brightness(1.35); }
  30% { opacity: .34; }
  100% { opacity: 0; filter: brightness(1); }
}

.stage.v65-trap-scene .goalFrame {
  filter: drop-shadow(0 0 13px rgba(255,191,91,.26)) !important;
}

.stage.v65-shot-active .trail {
  opacity: .62 !important;
  filter: blur(.25px) drop-shadow(0 0 8px rgba(255,255,255,.32)) !important;
}

/* Team cards: do not split Madrid/Sunderland-style names in the middle. */
.topbar .teamMain { min-width: 0 !important; }
.topbar .teamName {
  word-break: keep-all !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

.topbar .teamName[data-v65-short]::after {
  content: attr(data-v65-short);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 29px;
  min-height: 17px;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(1,20,31,.45);
  color: rgba(244,252,255,.92);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1;
  vertical-align: 2px;
}

.teamLogo.fallback[data-v65-short] span:last-child,
.clubLogo.fallback[data-v65-short] span:last-child {
  display: grid !important;
  place-items: center !important;
  font-size: 10px !important;
  letter-spacing: .045em !important;
  color: #fff !important;
}

.teamLogo.v65-national-team,
.clubLogo.v65-national-team { border-radius: 50% !important; }

.teamLogo.v65-national-team img,
.clubLogo.v65-national-team img {
  width: 100% !important;
  height: 100% !important;
  border-radius: 50% !important;
  object-fit: cover !important;
}

@media (max-width: 760px) and (orientation: portrait) {
  /* Several legacy mobile layers assigned the three header cards to the same
     grid cell and later capped the container at 52px. Give the scoreboard its
     own row and the two teams a second row so nothing can be cropped. */
  .topbar {
    height: auto !important;
    min-height: 153px !important;
    max-height: none !important;
    overflow: visible !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
    grid-template-rows: 54px 94px !important;
    gap: 5px !important;
    align-items: stretch !important;
  }

  .topbar .scorebox {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    order: 0 !important;
    height: 54px !important;
    min-height: 54px !important;
    max-height: 54px !important;
    padding: 4px 8px !important;
  }

  .topbar #playerCard,
  .topbar #aiCard {
    grid-row: 2 !important;
    height: 94px !important;
    min-height: 94px !important;
    max-height: 94px !important;
    padding: 7px 8px !important;
  }

  .topbar #playerCard { grid-column: 1 !important; }
  .topbar #aiCard { grid-column: 2 !important; }

  .stage.v65-shot-active .zone { border-color: rgba(240,252,255,.06) !important; }
  .stage.v65-shot-active .trail { opacity: .48 !important; }
  .keeper { transition-duration: .44s !important; }
  .goalNet.bulge { animation-duration: 1.42s !important; }
  .topbar .teamName[data-v65-short]::after {
    min-width: 24px;
    min-height: 15px;
    margin-left: 4px;
    padding: 1px 4px;
    font-size: 7px;
  }
}

@media (max-width: 360px) and (orientation: portrait) {
  .topbar {
    min-height: 145px !important;
    grid-template-rows: 52px 88px !important;
  }

  .topbar .scorebox {
    height: 52px !important;
    min-height: 52px !important;
    max-height: 52px !important;
  }

  .topbar #playerCard,
  .topbar #aiCard {
    height: 88px !important;
    min-height: 88px !important;
    max-height: 88px !important;
  }
}

/* Phone landscape: keep the full goal and both full bodies in the stage instead
   of applying portrait coordinates to a shallow viewport. */
@media (max-width: 932px) and (orientation: landscape) and (max-height: 520px) {
  .app {
    min-width: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 0 !important;
    padding: 4px !important;
    gap: 5px !important;
  }

  .stage {
    --v65-landscape-field-center: calc((100% - 230px) / 2);
    min-width: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    align-self: stretch !important;
    overflow: hidden !important;
  }

  .topbar {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 220px minmax(0,1fr) !important;
    grid-template-rows: 52px !important;
    height: 52px !important;
    min-height: 52px !important;
    overflow: hidden !important;
  }

  .topbar #playerCard {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .topbar .scorebox {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: initial !important;
  }

  .topbar #aiCard {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }

  /* Reserve a real 230 px information rail on the right. The old rule placed
     the untransformed goal at 43%, underneath that rail. */
  .goalScene {
    left: var(--v65-landscape-field-center) !important;
    top: 5% !important;
    width: min(calc(100% - 258px),620px) !important;
    height: 61% !important;
    min-height: 150px !important;
    max-height: 190px !important;
    transform: translateX(-50%) !important;
    transform-origin: center !important;
  }

  .keeper:not(.v63-positioned) {
    left: var(--v65-landscape-field-center) !important;
    top: 53% !important;
  }

  .shooter {
    /* Keep the rendered footprint identical before, during and after the kick.
       Older keyframes animate scale(1), so the base box itself is sized here. */
    --v64-person-scale: 1;
    width: 82px !important;
    height: 132px !important;
    left: calc(var(--v65-landscape-field-center) - 130px) !important;
    top: 64% !important;
    transform: translate(-50%,-50%) scale(1) !important;
  }

  .shooter.run {
    left: calc(var(--v65-landscape-field-center) - 70px) !important;
    top: 66% !important;
  }

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

  .spot,
  .ball,
  .ballShadow {
    left: var(--v65-landscape-field-center) !important;
  }

  .turnBanner {
    display: none !important;
  }

  /* The top score already states whose turn it is. Keep the functional home,
     fullscreen and information controls in a dedicated strip above the right
     rail instead of covering the six goal cells. */
  #portalHomeButton {
    left: auto !important;
    right: 87px !important;
    top: 6px !important;
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
    font-size: 0 !important;
  }

  .fieldTools {
    left: auto !important;
    right: 5px !important;
    top: 5px !important;
    transform: none !important;
    width: 78px !important;
    justify-content: flex-end !important;
  }

  .fieldTools .soundBox { display: none !important; }
  .fieldTools button {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
    padding: 0 !important;
  }

  .sidePanel {
    position: absolute !important;
    left: auto !important;
    right: 5px !important;
    top: 47px !important;
    bottom: 5px !important;
    width: 220px !important;
    height: auto !important;
    margin: 0 !important;
  }

  .sidePanel .leagueLine {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto !important;
    gap: 3px !important;
    min-width: 0 !important;
    font-size: 9px !important;
  }

  .sidePanel .leagueLine b {
    min-width: 0 !important;
    font-size: 9px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .sidePanel .leagueLine span {
    font-size: 7px !important;
  }

  .referee { display: none !important; }
  .controls { min-width: 0 !important; }
  .controls .aimBtn { min-width: 0 !important; white-space: normal !important; }
}

@media (prefers-reduced-motion: reduce) {
  .shooter.run,
  .shooter.kick,
  .shooter.kick.follow,
  .stage.v65-goal-scene .goalScene,
  .goalNet.bulge,
  .goalNet.bulge::before,
  .goalNet.bulge::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}