/* Field Goal Frenzy body content (brief 20). The title, footer hint + finger icon (v4: back in the
   footer, pick's component), CTA, no-attempts notice, result card, sunburst and confetti reuse the
   Pick 'n' Win component styles (styles/pick.css: .pk-title, .pk-footer, .pk-hint, .pk-gesture,
   .pk-notice, .pk-result*, .pk-confetti); this file has the field stage only. Perf rule: only
   transform / opacity animate (WAAPI in js/games/fieldgoal/fieldgoal.js); no glow or filter
   animation. */

/* The idle title is longer than pick's: a touch smaller so it fits the 288 px line. */
.fg-title { font-size: 15px; letter-spacing: 0.03em; }

/* Fixed stage (v4): 288 x 320, 20 px taller than pick / wheel's 288 x 300 inside the same 530 px
   modal. The extra height comes from the body gaps around it: the 8 px flex gaps above and below
   shrink to 4 px (negative margins) and pick's 12 px stage bottom margin is dropped
   (300 + 4 + 4 + 12 = 320). fieldgoal.js sets the same size inline from field-geometry.js
   STAGE_W / STAGE_H, the one source of truth; these values are the fallback. */
.fg-stage {
  position: relative;
  flex-shrink: 0;
  width: 288px;
  height: 320px;
  margin: -4px 0;
}
.sm-body:has(.fg-stage) { overflow: hidden; overflow: clip; isolation: isolate; }

.fg-shake {
  position: absolute;
  inset: 0;
  transition: opacity 200ms ease-out;
}
.fg-shake.is-dimmed { opacity: 0.3; }

/* Field: field.jpg drawn twice, boxes set from js/games/fieldgoal/field-geometry.js (one source of
   truth): the zoomed goal layer (gap between the uprights ~47% of the stage) and the near tee strip,
   whose static mask fades it in over the bottom of the goal layer. */
.fg-field {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 16px;
  background: #0b1a3a;
}
.fg-field__img {
  position: absolute;
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}
.fg-field__near {
  position: absolute;
  inset: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent var(--fg-near-from), #000 var(--fg-near-to));
  mask-image: linear-gradient(to bottom, transparent var(--fg-near-from), #000 var(--fg-near-to));
}

/* Declutter (v3): static dark gradient over the crowd, from the stage top to the grass line;
   fieldgoal.js sets its height, --fg-bar (crossbar y) and a mask that leaves the goal undimmed. */
.fg-dim {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  border-radius: 16px 16px 0 0;
  background: linear-gradient(to bottom, rgba(4, 8, 24, 0.62) 0, rgba(4, 8, 24, 0.54) var(--fg-bar), rgba(4, 8, 24, 0.48) calc(var(--fg-bar) + 16px), rgba(4, 8, 24, 0) 100%);
  pointer-events: none;
}

/* Target rings: small gold bullseyes in the goal gap (placed per kick by fieldgoal.js showRings).
   Static gradients; only transform / opacity animate (pop, burst, fade). */
.fg-rings { position: absolute; inset: 0; pointer-events: none; }
/* Size from field-geometry.js RING_SIZE (--fg-ring, 19 px at 288 x 320); the bullseye stops are % of
   the ring radius (v3's 18 px ring: 2.2 / 2.7 / 4.6 / 5.1 / 6.4 / 6.9 px of 9). */
.fg-ring {
  position: absolute;
  width: var(--fg-ring, 19px);
  height: var(--fg-ring, 19px);
  border-radius: 50%;
  background:
    radial-gradient(circle closest-side, #ffe08a 0 24.4%, transparent 30% 51.1%, rgba(255, 213, 90, 0.95) 56.7% 71.1%, transparent 76.7%),
    rgba(10, 16, 40, 0.28);
  box-shadow: inset 0 0 0 1.6px #f2c14e;
  transform-origin: 50% 50%;
  transition: transform 140ms ease-out;
}
.fg-ring.is-targeted { transform: scale(1.25); }
.fg-ring.is-hit { background: radial-gradient(circle closest-side, #fff3c4 0 44.4%, #ffd55a 50% 100%); } /* reduced motion */

/* Characters (sprites from the design lead): kicker ready / kick poses (swapped by opacity) and the
   kneeling holder; boxes from field-geometry.js. Under the aim line and the ball. */
.fg-kicker { position: absolute; inset: 0; pointer-events: none; }
.fg-char {
  position: absolute;
  display: block;
  max-width: none;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Ball: fixed box (size from fieldgoal.js), the png keeps its aspect ratio inside it. */
.fg-ball {
  position: absolute;
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform, opacity;
}
.fg-ball__tumble {
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
}
.fg-ball__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

/* Angled result banner: "IT'S GOOD!" gold / "NO GOOD" pink on a dark band across the field.
   Static colours; only transform / opacity animate. */
.fg-banner {
  position: absolute;
  left: -12px;
  right: -12px;
  top: 168px; /* crossbar - 17, set from fieldgoal.js */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  background: linear-gradient(90deg, rgba(5, 8, 22, 0) 0%, rgba(5, 8, 22, 0.86) 16%, rgba(5, 8, 22, 0.86) 84%, rgba(5, 8, 22, 0) 100%);
  border-top: 1px solid rgba(242, 193, 78, 0.8);
  border-bottom: 1px solid rgba(242, 193, 78, 0.8);
  transform: rotate(-6deg);
  opacity: 0;
  pointer-events: none;
}
.fg-banner[data-result="miss"] { border-color: rgba(255, 92, 128, 0.85); }
.fg-banner__text {
  font: 900 22px/1 'Inter', sans-serif;
  font-style: italic;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  color: #ffd55a;
}
.fg-banner[data-result="miss"] .fg-banner__text { color: #ff6f8e; }
.fg-banner.is-shown { opacity: 1; } /* reduced motion: shown still */

/* HUD pills (v3): one consistent style for the top-right kicks pill and the top-left distance /
   wind pill: dark translucent, 1 px white 15% border, Inter 700 11px. */
.fg-pill {
  position: absolute;
  top: 6px;
  background: rgba(6, 10, 28, 0.72);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font: 700 11px/14px 'Inter', sans-serif;
  color: #fff;
  pointer-events: none;
}

/* Top right: "KICK" + three indicators over "2 TO WIN" / "PRIZE SECURED" (one pill). */
.fg-hud {
  right: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  padding: 4px 8px 4px 9px;
  border-radius: 11px;
}
.fg-kicks { display: flex; align-items: center; gap: 6px; }
.fg-kicks__label { letter-spacing: 0.1em; text-transform: uppercase; }
.fg-kicks__dots { display: flex; gap: 3px; margin: 0; padding: 0; list-style: none; }
.fg-kick { width: 12px; height: 12px; }
.fg-kick svg { display: block; width: 12px; height: 12px; }
.fg-goal-label {
  margin: 0;
  font-size: 9px;
  line-height: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffd55a;
}
.fg-goal-label.is-secured { color: #4ade80; }

/* Top left: decorative distance / wind in one pill. */
.fg-chips {
  left: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.fg-chip { letter-spacing: 0.06em; color: #e6ecff; }
.fg-chips__sep { width: 3px; height: 3px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }

/* Ball cue (v3): three ripples (no glow / orbs: design lead rule) (scale 0.6 -> 1.8, opacity 0.6 -> 0, 1.6 s loop,
   staggered) and drag chevrons (nudge loop) centred on the ball (left / top from fieldgoal.js).
   Shown with .is-on; off = 150 ms fade and the loops pause. Transform / opacity only. */
.fg-cue {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
  transition: opacity 150ms ease-out;
  pointer-events: none;
}
.fg-cue.is-on { opacity: 1; }
.fg-cue:not(.is-on) * { animation-play-state: paused; }
.fg-ripple {
  position: absolute;
  left: calc(var(--fg-ripple) / -2);
  top: calc(var(--fg-ripple) / -2);
  width: var(--fg-ripple);
  height: var(--fg-ripple);
  box-sizing: border-box;
  border-radius: 50%;
  border: 2px solid #ffd55a;
  opacity: 0;
  animation: fg-ripple 1600ms cubic-bezier(.2, .6, .4, 1) infinite;
}
.fg-ripple:nth-of-type(3) { border-color: rgba(255, 255, 255, 0.95); animation-delay: -533ms; }
.fg-ripple:nth-of-type(4) { animation-delay: -1067ms; }
@keyframes fg-ripple {
  0% { transform: scale(0.6); opacity: 0.6; }
  35% { opacity: 0.5; }
  100% { transform: scale(1.8); opacity: 0; }
}
.fg-cue__chevrons {
  position: absolute;
  left: -7px;
  width: 14px;
  height: 12px;
  animation: fg-chevrons 1200ms ease-in-out infinite;
}
.fg-cue__chevrons svg { display: block; width: 14px; height: 12px; }
@keyframes fg-chevrons {
  0%, 100% { transform: translateY(-1px); opacity: 0.7; }
  50% { transform: translateY(3px); opacity: 1; }
}
/* Reduced motion: no ripples or nudges; one static ring around the ball. */
.fg-cue.is-static .fg-ripple,
.fg-cue.is-static .fg-cue__chevrons { animation: none; }
.fg-cue.is-static .fg-ripple { transform: scale(1.15); opacity: 0.7; }
.fg-cue.is-static .fg-ripple ~ .fg-ripple { display: none; }
@media (prefers-reduced-motion: reduce) {
  .fg-ripple, .fg-cue__chevrons { animation: none; }
  .fg-ripple { transform: scale(1.15); opacity: 0.7; }
  .fg-ripple ~ .fg-ripple { display: none; }
}

/* Dotted aim line (pull back): evenly spaced dots placed by transform from fieldgoal.js
   drawAimLine (shrinking with distance), ending in a small target reticle. */
.fg-aim { position: absolute; inset: 0; pointer-events: none; }
.fg-aim[hidden] { display: none; }
.fg-aim__dot {
  position: absolute;
  left: -3.5px;
  top: -3.5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3);
}
.fg-aim__reticle {
  position: absolute;
  left: -9px;
  top: -9px;
  width: 18px;
  height: 18px;
  box-sizing: border-box;
  border-radius: 50%;
  border: 1.5px solid #fff;
  background:
    radial-gradient(circle, #fff 0 1.8px, transparent 2.3px),
    linear-gradient(#fff, #fff) 50% 0 / 1.5px 4px no-repeat,
    linear-gradient(#fff, #fff) 50% 100% / 1.5px 4px no-repeat,
    linear-gradient(#fff, #fff) 0 50% / 4px 1.5px no-repeat,
    linear-gradient(#fff, #fff) 100% 50% / 4px 1.5px no-repeat;
}

/* Whole stage is the kick button (keyboard: Enter / Space). */
.fg-tap {
  position: absolute;
  inset: 0;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: none;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  touch-action: none; /* the pull-back drag must not scroll the page */
}
.fg-stage { touch-action: none; }
.fg-stage.is-tappable .fg-tap { cursor: grab; }
.fg-stage.is-dragging .fg-tap { cursor: grabbing; }
.fg-tap:focus { outline: none; }
.fg-tap:focus-visible { outline: 2px solid #f2c14e; outline-offset: -2px; }

/* Result: pick's card in the same box (no field behind it). */
.fg-stage--result { overflow: visible; }

/* Footer hint stays visible (dimmed) while a kick flies, so the footer never reads as an empty gap
   (design lead 2026-10-18); pick's hint fades out fully instead. */
.pk-hint.fg-hint.is-muted { opacity: 0.4; }