.football-event-field {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  contain: layout paint style;
}

.football-event {
  position: absolute;
  width: clamp(54px, 5vw, 82px);
  aspect-ratio: 1;
  opacity: 0;
  color: rgba(246, 241, 231, .88);
  filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .18));
  transform: translate(-50%, -50%) scale(.94);
  transform-origin: center;
  animation: football-event-life 1.85s cubic-bezier(.23, 1, .32, 1) forwards;
}

.football-event svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.event-person,
.event-keeper,
.event-goal,
.event-ball-lines {
  fill: none;
  stroke: currentColor;
}

.event-person-fill {
  fill: currentColor;
  stroke: none;
}

.event-accent {
  stroke: var(--pickles-gold, #d6a94f);
}

.event-ball {
  fill: var(--pickles-paper, #fcfaf5);
  stroke: var(--pickles-gold, #d6a94f);
}

.event-card {
  fill: var(--event-card-color, #e4b846);
  stroke: rgba(255, 255, 255, .85);
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: football-card-raise 1.85s cubic-bezier(.23, 1, .32, 1);
}

.football-event-red-card { --event-card-color: #d45142; }
.football-event-yellow-card { --event-card-color: #e4b846; }

.football-event-kick .event-ball {
  animation: football-ball-kick 1.85s cubic-bezier(.23, 1, .32, 1);
}

.football-event-save .event-keeper {
  transform-box: fill-box;
  transform-origin: center;
  animation: football-keeper-save 1.85s cubic-bezier(.23, 1, .32, 1);
}

.football-event-save .event-ball {
  animation: football-save-ball 1.85s cubic-bezier(.23, 1, .32, 1);
}

.football-event-goal .event-ball {
  animation: football-goal-ball 1.85s cubic-bezier(.23, 1, .32, 1);
}

.football-event-run .event-runner {
  transform-box: fill-box;
  transform-origin: center;
  animation: football-runner-stride 620ms cubic-bezier(.77, 0, .175, 1) 3;
}

.football-event-run .event-speed-lines {
  stroke-dasharray: 18;
  animation: football-speed-lines 620ms linear 3;
}

.football-event-header .event-header-player {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: football-header-jump 1.85s cubic-bezier(.23, 1, .32, 1);
}

.football-event-header .event-header-ball {
  animation: football-header-ball 1.85s cubic-bezier(.23, 1, .32, 1);
}

.football-event-header .event-impact {
  opacity: 0;
  animation: football-header-impact 1.85s linear;
}

.football-event-tactics {
  width: clamp(108px, 9vw, 152px);
}

.event-tactics-board rect {
  fill: rgba(11, 61, 46, .9);
  stroke: var(--pickles-gold, #d6a94f);
  stroke-width: 2.5;
}

.event-board-lines {
  stroke: rgba(246, 241, 231, .35);
  stroke-width: 1.2;
}

.event-tactics-board text {
  fill: var(--pickles-gold, #d6a94f);
  stroke: none;
  font: 700 6px Manrope, sans-serif;
  letter-spacing: .4px;
}

.event-formation circle {
  fill: var(--pickles-paper, #fcfaf5);
  stroke: var(--pickles-gold, #d6a94f);
  stroke-width: 1.3;
}

.event-tactical-arrows {
  fill: none;
  stroke: var(--pickles-gold, #d6a94f);
  stroke-width: 1.8;
  stroke-dasharray: 5 4;
  animation: football-tactical-routes 760ms linear 2;
}

.event-arrow-head {
  fill: var(--pickles-gold, #d6a94f);
  stroke: none;
}

.football-event-tactics .event-coach {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: football-coach-instruct 1.85s cubic-bezier(.23, 1, .32, 1);
}

.football-event-tactics .event-coach-arm {
  transform-box: fill-box;
  transform-origin: left center;
  animation: football-coach-point 620ms cubic-bezier(.77, 0, .175, 1) 2;
}

@keyframes football-event-life {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.94); }
  14%, 72% { opacity: .72; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.98); }
}

@keyframes football-ball-kick {
  0%, 28% { transform: translate(0, 0) rotate(0); }
  68%, 100% { transform: translate(28px, -20px) rotate(190deg); }
}

@keyframes football-card-raise {
  0%, 18% { transform: translateY(9px) rotate(8deg); opacity: 0; }
  42%, 84% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(-2px); opacity: .35; }
}

@keyframes football-keeper-save {
  0%, 22% { transform: translate(-8px, 8px) rotate(10deg); }
  58%, 100% { transform: translate(7px, -7px) rotate(-13deg); }
}

@keyframes football-save-ball {
  0%, 22% { transform: translate(8px, -5px); }
  62%, 100% { transform: translate(-20px, 17px); }
}

@keyframes football-goal-ball {
  0%, 18% { transform: translate(-40px, 22px) scale(.8); }
  54%, 100% { transform: translate(0, 0) scale(1); }
}

@keyframes football-runner-stride {
  0%, 100% { transform: translate(-5px, 2px) rotate(-5deg); }
  50% { transform: translate(7px, -3px) rotate(4deg); }
}

@keyframes football-speed-lines {
  from { stroke-dashoffset: 0; opacity: .2; }
  50% { opacity: 1; }
  to { stroke-dashoffset: 36; opacity: .2; }
}

@keyframes football-header-jump {
  0%, 18% { transform: translateY(13px) scaleY(.94); }
  47%, 58% { transform: translateY(-11px) scaleY(1); }
  82%, 100% { transform: translateY(9px) scaleY(.96); }
}

@keyframes football-header-ball {
  0%, 40% { transform: translate(5px, -10px) rotate(0); }
  55% { transform: translate(0, 7px) rotate(55deg); }
  100% { transform: translate(28px, -16px) rotate(210deg); }
}

@keyframes football-header-impact {
  0%, 48%, 65%, 100% { opacity: 0; }
  54% { opacity: 1; }
}

@keyframes football-tactical-routes {
  from { stroke-dashoffset: 18; opacity: .3; }
  45%, 100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes football-coach-instruct {
  0%, 15% { transform: translateX(-5px); opacity: .2; }
  35%, 82% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(2px); opacity: .45; }
}

@keyframes football-coach-point {
  0%, 100% { transform: rotate(8deg); }
  50% { transform: rotate(-8deg); }
}

.football-event-static {
  opacity: .45;
  animation: football-event-static 900ms ease forwards;
}

.football-event-static *,
.football-event-static .event-card {
  animation: none !important;
}

@keyframes football-event-static {
  0%, 100% { opacity: 0; }
  20%, 78% { opacity: .45; }
}

@media (prefers-reduced-motion: reduce) {
  .football-event-field .football-event:not(.football-event-static) { display: none; }
}