/* ==========================================================================
   Place Kicker - styles specific to the kicking game.
   Everything else (page shell, chip, buttons, overlays) comes from
   styles.css, so the two games stay visually identical outside the stage.
   ========================================================================== */

/* The kicking game needs a taller stage than the runner: the ball climbs a
   long way and the posts have to stay in frame. */
.game__stage { aspect-ratio: 16 / 10; }

@media (min-width: 700px) {
  .game__stage { aspect-ratio: 16 / 9; }
}

#game { height: 100%; }

/* --------------------------------------------------------------------------
   Kit picker
   -------------------------------------------------------------------------- */

.kits {
  display: flex;
  gap: clamp(.75rem, 3vw, 1.25rem);
  margin: .25rem 0 .5rem;
}

.kit {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;

  padding: .75rem 1.1rem;
  border: 1px solid rgba(192, 255, 0, .28);
  border-radius: 12px;
  background: rgba(192, 255, 0, .06);
  cursor: pointer;

  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 800;
  color: var(--accent-dim);

  transition: border-color .15s ease, background-color .15s ease,
              transform .15s ease;
}

.kit:hover,
.kit:focus-visible {
  border-color: var(--accent);
  background: rgba(192, 255, 0, .13);
  transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
  .kit, .kit:hover, .kit:focus-visible { transition: none; transform: none; }
}

/* The swatch is the only place the two kits differ, so it carries the
   identity: a jersey block with a contrasting collar band. */
.kit__swatch {
  width: 2.6rem;
  height: 1.9rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 255, 255, .22);
}

.kit--green .kit__swatch {
  background: linear-gradient(#0F7A3D 0 62%, #E8D9A0 62% 100%);
}

.kit--black .kit__swatch {
  background: linear-gradient(#141B18 0 62%, #E9EDE8 62% 100%);
}

.kit__name { letter-spacing: .06em; }

/* Small screens: the picker sits inside the stage, so keep it compact. */
@media (max-width: 420px) {
  .kit { padding: .55rem .8rem; font-size: .75rem; }
  .kit__swatch { width: 2.1rem; height: 1.5rem; }
}