/* ============================================================
   Baseball Army Men — styles.css
   Colors: #68724D (green) #BB3D43 (red) #E8DBB7 (tan)
           #F4F1EC (cream) #FFFFFF (white)
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green:      #68724D;
  --green-dark: #4D5438;
  --green-deep: #343A26;
  --red:        #BB3D43;
  --red-dark:   #9B2F34;
  --tan:        #E8DBB7;
  --tan-shop:   #D4C5B0;
  --blue:       #2B5466;
  --blue-dark:  #1E3D4B;
  --cream:      #F4F1EC;
  --white:      #FFFFFF;
  --text:       #1C1C1C;
  --text-muted: #5A5A5A;

  --font-display: 'Black Ops One', cursive;
  --font-body:    'Barlow', sans-serif;

  --radius: 4px;
  --shadow: 0 4px 28px rgba(0, 0, 0, 0.13);
  --transition: 0.2s ease;
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  background: var(--cream);
  color: var(--text);
  line-height: 1.65;
  font-size: 1rem;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

/* --- Utilities --- */
.container {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.text-center { text-align: center; }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  padding: 0.8rem 1.75rem;
  font-family: var(--font-display);
  font-size: 1rem;
  letter-spacing: 0.04em;
  border-radius: var(--radius);
  cursor: pointer;
  border: 2px solid transparent;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition);
  text-align: center;
  line-height: 1.2;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn--red {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
}
.btn--red:hover { background: var(--red-dark); border-color: var(--red-dark); }

.btn--green {
  background: var(--green);
  color: var(--white);
  border-color: var(--green);
}
.btn--green:hover { background: var(--green-dark); border-color: var(--green-dark); }

.btn--outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255,255,255,0.6);
}
.btn--outline-white:hover { background: var(--white); color: var(--green-dark); border-color: var(--white); }

.btn--outline-green {
  background: transparent;
  color: var(--green);
  border-color: var(--green);
}
.btn--outline-green:hover { background: var(--green); color: var(--white); }

.btn--lg { font-size: 1.15rem; padding: 1rem 2.5rem; }
.btn--full { width: 100%; display: block; }

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  background: rgba(22, 47, 28, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 0;
  gap: 1rem;
}

.nav__logo { display: flex; align-items: center; gap: 0.6rem; }
.nav__logo img { height: 40px; width: auto; filter: brightness(0) invert(1); opacity: 0.9; }
.nav__logo-text {
  font-family: var(--font-display);
  color: var(--white);
  font-size: 1rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.nav__links {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.nav__links li a {
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: 0.03em;
  transition: color var(--transition);
}
.nav__links li a:hover { color: var(--tan); }

.nav__links .btn {
  font-size: 0.85rem;
  padding: 0.5rem 1.25rem;
}

.nav__toggle {
  display: none;
  background: none;
  border: none;
  color: var(--white);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem;
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding-bottom: 5rem;
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 35%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    165deg,
    rgba(22, 47, 28, 0.25) 0%,
    rgba(22, 47, 28, 0.85) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  color: var(--white);
  max-width: 660px;
}

.hero__eyebrow {
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: var(--tan);
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.hero__title {
  font-family: var(--font-display);
  font-size: clamp(3.25rem, 9vw, 6.5rem);
  line-height: 0.92;
  color: var(--white);
  text-shadow: 0 2px 24px rgba(0,0,0,0.35);
  margin-bottom: 1.25rem;
}

.hero__sub {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  font-weight: 500;
  margin-bottom: 2.25rem;
  opacity: 0.88;
  max-width: 480px;
}

.hero__btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

/* ============================================================
   STATS BAR
   ============================================================ */
.stats-bar {
  background: var(--green-deep);
  border-bottom: 2px solid var(--green);
  padding: 1.1rem 0;
}

.stats-bar__inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.stat { text-align: center; color: var(--white); }

.stat__num {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--tan);
  display: block;
  line-height: 1;
}

.stat__label {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.7;
  display: block;
  margin-top: 0.2rem;
}

/* ============================================================
   SECTIONS — shared
   ============================================================ */
.section { padding: 5.5rem 0; }
.section--cream { background: var(--cream); }
.section--white { background: var(--white); }
.section--green { background: var(--green-dark); }
.section--deep  { background: var(--green-deep); }

.section__label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.6rem;
}

.section--green  .section__label,
.section--deep   .section__label { color: var(--tan); }

.section__title {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 4vw, 2.75rem);
  color: var(--green-dark);
  margin-bottom: 0.5rem;
  line-height: 1.05;
}

.section--green  .section__title,
.section--deep   .section__title { color: var(--white); }

.section__subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 3rem;
  max-width: 580px;
}

.section--green  .section__subtitle,
.section--deep   .section__subtitle { color: rgba(255,255,255,0.65); }

/* ============================================================
   GAME INTRO (2-col)
   ============================================================ */
.game-intro__img {
  border-radius: 6px;
  box-shadow: var(--shadow);
  width: 100%;
  aspect-ratio: 4/3;
  object-fit: cover;
}

.game-intro__content { }
.game-intro__content p {
  color: var(--text-muted);
  font-size: 1.05rem;
  margin-bottom: 1rem;
  line-height: 1.7;
}
.game-intro__content .btn { margin-top: 0.75rem; }

/* ============================================================
   FIGURES
   ============================================================ */
.figures-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-bottom: 2rem;
}

.figure-card {
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  overflow: hidden;
  transition: transform var(--transition), border-color var(--transition);
}

.figure-card:hover {
  transform: translateY(-4px);
  border-color: var(--tan);
}

.figure-card__img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: top center;
}

.figure-card__placeholder {
  width: 100%;
  aspect-ratio: 3/4;
  background: rgba(255,255,255,0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: rgba(255,255,255,0.3);
}

.figure-card__placeholder svg { width: 48px; height: 48px; opacity: 0.4; }

.figure-card__label {
  padding: 0.65rem 0.75rem;
  font-family: var(--font-display);
  font-size: 0.85rem;
  color: var(--tan);
  letter-spacing: 0.05em;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.figure-card__count {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-body);
  font-weight: 600;
}

.figures-teams {
  text-align: center;
  margin-top: 1rem;
}

.figures-teams p {
  color: rgba(255,255,255,0.65);
  font-size: 1rem;
  margin-bottom: 0.75rem;
}

.team-badges {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.team-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--white);
  letter-spacing: 0.05em;
}

.team-badge__dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.3);
}

.team-badge__dot--green { background: #68724D; }
.team-badge__dot--tan   { background: #D4C49A; }

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.75rem;
  margin-top: 3rem;
}

.step {
  background: var(--white);
  border-radius: 6px;
  padding: 2.25rem 1.75rem;
  box-shadow: var(--shadow);
  border-top: 4px solid var(--green);
  text-align: center;
}

.step__num {
  width: 52px; height: 52px;
  background: var(--green);
  color: var(--tan);
  font-family: var(--font-display);
  font-size: 1.4rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
}

.step h3 {
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: var(--green-dark);
  margin-bottom: 0.75rem;
  letter-spacing: 0.03em;
}

.step p { font-size: 0.95rem; color: var(--text-muted); line-height: 1.65; }

/* ============================================================
   PRODUCT / BUY
   ============================================================ */
.product-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 8px 40px rgba(0,0,0,0.25);
  margin-top: 3rem;
}

.product-img { position: relative; }
.product-img img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}

.product-info {
  background: var(--white);
  padding: 3rem 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.product-info__name {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--green-dark);
  line-height: 1.2;
  margin-bottom: 0.35rem;
}

.product-info__price {
  font-family: var(--font-display);
  font-size: 3.25rem;
  color: var(--red);
  line-height: 1;
  margin-bottom: 1.5rem;
}

.product-info__includes {
  margin-bottom: 2rem;
  border-top: 1px solid #E8E4DC;
  border-bottom: 1px solid #E8E4DC;
  padding: 1.25rem 0;
}

.product-info__includes li {
  padding: 0.45rem 0;
  font-size: 0.95rem;
  color: var(--text-muted);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.4;
}

.product-info__includes li::before {
  content: '✓';
  color: var(--green);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 0.05rem;
}

.product-info .btn { margin-bottom: 0.75rem; }

.product-info__secondary {
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-muted);
}

.product-info__secondary a {
  color: var(--green);
  text-decoration: underline;
  transition: color var(--transition);
}

.product-info__secondary a:hover { color: var(--green-dark); }

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero {
  background: var(--green-deep);
  padding: 7rem 0 3.5rem;
  text-align: center;
  border-bottom: 3px solid var(--green);
}

.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 6vw, 4rem);
  color: var(--white);
  margin-bottom: 0.75rem;
}

.page-hero p {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.7);
  max-width: 600px;
  margin: 0 auto;
}

/* ============================================================
   RULES PAGE
   ============================================================ */
.rules { padding: 4rem 0 6rem; max-width: 760px; }

.rules-section { margin-bottom: 3.5rem; }

.rules-section h2 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--green-dark);
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--tan);
  letter-spacing: 0.04em;
}

.rules-section p { color: var(--text-muted); margin-bottom: 0.85rem; font-size: 1rem; line-height: 1.7; }

.rules-section ul, .rules-section ol {
  padding-left: 1.25rem;
  margin-bottom: 0.85rem;
}

.rules-section ul { list-style: disc; }
.rules-section ol { list-style: decimal; }

.rules-section li { color: var(--text-muted); margin-bottom: 0.5rem; font-size: 1rem; line-height: 1.6; }

.rules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1.25rem;
}

.rules-card {
  background: var(--white);
  border: 1px solid #E0DDD5;
  border-radius: 6px;
  padding: 1.25rem;
  border-top: 4px solid var(--green);
}

.rules-card h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--green-dark);
  margin-bottom: 0.75rem;
  letter-spacing: 0.04em;
}

.rules-card ul { list-style: none; padding: 0; }

.rules-card li {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: 0.3rem 0;
  border-bottom: 1px solid #F0ECE4;
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.rules-card li:last-child { border-bottom: none; }

.rules-card .result { font-weight: 700; color: var(--green-dark); }
.rules-card .result--hr { color: var(--red); }

.zone-grid {
  display: grid;
  grid-template-columns: auto 1fr 1fr;
  grid-template-rows: auto 1fr 1fr 1fr;
  gap: 2px;
  margin: 1rem 0;
  max-width: 300px;
  font-size: 0.85rem;
}

.zone-grid .header { font-family: var(--font-display); color: var(--green); text-align: center; padding: 0.4rem; font-size: 0.8rem; }
.zone-grid .row-label { font-family: var(--font-display); color: var(--green); padding: 0.4rem 0.6rem 0.4rem 0; display: flex; align-items: center; font-size: 0.8rem; }
.zone-grid .zone-box {
  background: var(--white);
  border: 1.5px solid #CCC;
  border-radius: 2px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: #AAA;
}

.rules-buy-cta {
  background: var(--green-dark);
  border-radius: 8px;
  padding: 2.5rem;
  text-align: center;
  margin-top: 3rem;
  color: var(--white);
}

.rules-buy-cta h2 {
  font-family: var(--font-display);
  font-size: 1.75rem;
  margin-bottom: 0.5rem;
}

.rules-buy-cta p { color: rgba(255,255,255,0.7); margin-bottom: 1.5rem; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  background: var(--green-deep);
  padding: 2.25rem 0;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}

.footer__copy {
  color: rgba(255,255,255,0.45);
  font-size: 0.82rem;
}

.footer__nav {
  display: flex;
  gap: 1.75rem;
  flex-wrap: wrap;
}

.footer__nav a {
  color: rgba(255,255,255,0.45);
  font-size: 0.82rem;
  transition: color var(--transition);
}
.footer__nav a:hover { color: var(--tan); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 860px) {
  .nav__links {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0; right: 0;
    background: var(--green-deep);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    gap: 1.25rem;
    border-bottom: 2px solid var(--green);
  }
  .nav__links--open { display: flex; }
  .nav__toggle { display: block; }

  .grid-2 { grid-template-columns: 1fr; gap: 2rem; }

  .figures-grid { grid-template-columns: repeat(2, 1fr); }

  .steps { grid-template-columns: 1fr; gap: 1.25rem; }

  .product-wrap { grid-template-columns: 1fr; }
  .product-img img { min-height: 280px; }
  .product-info { padding: 2rem 1.75rem; }

  .rules-grid { grid-template-columns: 1fr; }

  .section { padding: 3.75rem 0; }

  .hero__btns { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 520px) {
  .figures-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .stats-bar__inner { gap: 1rem 2rem; }
  .footer__inner { flex-direction: column; text-align: center; }
  .footer__nav { justify-content: center; }
  .team-badges { flex-direction: column; align-items: center; }
}

/* ============================================================
   GAME MODAL — Online Trial
   ============================================================ */

.btn--tan {
  background: var(--tan);
  color: var(--green-deep);
  border-color: var(--tan);
  opacity: 0.7;
}
.btn--tan:hover { background: #d4c49a; border-color: #d4c49a; opacity: 0.9; }

/* Nav trial group */
.nav__trial-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.nav__demo-link {
  background: none;
  border: none;
  color: rgba(255,255,255,0.42);
  font-size: 0.7rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: color var(--transition);
  padding: 0;
  text-decoration: none;
}
.nav__demo-link:hover { color: var(--tan); }

/* Modal shell */
.game-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.game-modal--open { display: flex; }

.game-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10, 20, 12, 0.9);
  backdrop-filter: blur(8px);
}

.game-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--green-deep);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  width: 100%;
  max-width: 480px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem;
  box-shadow: 0 24px 80px rgba(0,0,0,0.6);
}

.game-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.55);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
  line-height: 1;
}
.game-modal__close:hover { background: rgba(255,255,255,0.15); color: var(--white); }

.game-modal__eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tan);
  margin-bottom: 0.4rem;
  text-align: center;
}

.game-modal__title {
  font-family: var(--font-display);
  font-size: 1.75rem;
  color: var(--white);
  text-align: center;
  margin-bottom: 0.4rem;
  letter-spacing: 0.04em;
}

.game-modal__intro {
  color: rgba(255,255,255,0.45);
  font-size: 0.82rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

/* Tutorial */
.tutorial-steps {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

.tutorial-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 0.85rem 1rem;
}

.tutorial-step__num {
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.88rem;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tutorial-step p {
  color: rgba(255,255,255,0.72);
  font-size: 0.88rem;
  line-height: 1.5;
  margin: 0;
}

/* Scoreboard */
.game-scoreboard {
  display: flex;
  align-items: center;
  background: rgba(0,0,0,0.3);
  border-radius: 8px;
  padding: 0.7rem 0;
  margin-bottom: 0.75rem;
}
.scoreboard-item { text-align: center; flex: 1; }
.scoreboard-divider { width: 1px; height: 40px; background: rgba(255,255,255,0.08); flex-shrink: 0; }

.scoreboard-val {
  font-family: var(--font-display);
  font-size: 1.7rem;
  color: var(--tan);
  display: block;
  line-height: 1;
}
.scoreboard-label {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  display: block;
  margin-top: 0.3rem;
}

.outs-dots {
  display: flex;
  gap: 4px;
  justify-content: center;
  margin-top: 5px;
}
.out-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.2);
  background: transparent;
  transition: background 0.2s, border-color 0.2s;
}
.out-dot--filled { background: var(--red); border-color: var(--red); }

/* Bases diamond */
.game-bases { display: flex; justify-content: center; margin-bottom: 0.75rem; }
.bases-svg { width: 80px; height: 62px; }

/* Zone area */
.game-zone-area { margin-bottom: 0.85rem; }

.game-instruction {
  color: rgba(255,255,255,0.55);
  font-size: 0.8rem;
  text-align: center;
  margin-bottom: 0.6rem;
  min-height: 1.1em;
  font-style: italic;
}

.game-zone-wrap { max-width: 280px; margin: 0 auto; }

.game-zone-col-labels {
  display: grid;
  grid-template-columns: 42px 1fr 1fr;
  gap: 6px;
  margin-bottom: 4px;
  text-align: center;
}
.game-zone-col-labels span {
  font-family: var(--font-display);
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.28);
}

.game-zone-grid {
  display: grid;
  grid-template-columns: 42px 1fr 1fr;
  gap: 6px;
}

.zone-row-label {
  font-family: var(--font-display);
  font-size: 0.6rem;
  color: rgba(255,255,255,0.28);
  display: flex;
  align-items: center;
  letter-spacing: 0.08em;
}

.zone-btn {
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-display);
  font-size: 1.25rem;
  padding: 0;
  cursor: pointer;
  transition: all 0.15s ease;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zone-btn:hover:not(:disabled) {
  background: rgba(104,114,77,0.35);
  border-color: var(--green);
  color: var(--white);
  transform: scale(1.06);
}
.zone-btn--selected {
  background: var(--green) !important;
  border-color: var(--tan) !important;
  color: var(--white) !important;
}
.zone-btn--cpu {
  background: rgba(187,61,67,0.4) !important;
  border-color: var(--red) !important;
  color: var(--white) !important;
}
.zone-btn--match {
  background: linear-gradient(135deg, var(--green) 50%, var(--red) 50%) !important;
  border-color: var(--tan) !important;
  color: var(--white) !important;
}
.zone-btn:disabled { cursor: default; transform: none !important; }

/* Swing buttons */
.game-swing-area { margin-bottom: 0.85rem; }

.game-label {
  font-family: var(--font-display);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.3);
  text-align: center;
  margin-bottom: 0.55rem;
}

.swing-btns { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }

.swing-btn {
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 0.7rem 0.4rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
}
.swing-btn:hover:not(:disabled) {
  background: rgba(104,114,77,0.25);
  border-color: rgba(104,114,77,0.6);
}
.swing-btn--selected {
  background: rgba(104,114,77,0.35) !important;
  border-color: var(--tan) !important;
}
.swing-btn:disabled { cursor: default; }

.swing-name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  color: var(--tan);
  margin-bottom: 0.28rem;
}
.swing-desc {
  display: block;
  font-size: 0.65rem;
  color: rgba(255,255,255,0.38);
  line-height: 1.3;
}

/* Pitch button */
.game-pitch-area { margin-top: 0.75rem; }
.game-pitch-btn { letter-spacing: 0.12em; }

/* Result */
.game-result {
  text-align: center;
  padding-top: 0.5rem;
  animation: gmFadeUp 0.25s ease;
}
@keyframes gmFadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.result-reveal {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
  padding: 0.75rem;
  margin-bottom: 0.9rem;
}
.result-col { text-align: center; }
.result-col-label {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.3);
  margin-bottom: 0.3rem;
}
.result-zone-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 1.5rem;
}
.result-zone-badge--player { background: var(--green); color: var(--white); }
.result-zone-badge--cpu    { background: var(--red);   color: var(--white); }

.result-pitch-type {
  display: block;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  margin-top: 0.3rem;
  text-transform: uppercase;
}
.result-pitch-type--cpu { color: rgba(255,180,180,0.7); }

.result-vs {
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: rgba(255,255,255,0.22);
  letter-spacing: 0.08em;
}

.result-outcome {
  font-family: var(--font-display);
  font-size: 2rem;
  margin-bottom: 0.35rem;
  letter-spacing: 0.05em;
  animation: gmPop 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes gmPop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.result--hr     { color: var(--red); text-shadow: 0 0 20px rgba(187,61,67,0.5); }
.result--triple { color: #f0a500; }
.result--double { color: var(--tan); }
.result--single { color: rgba(255,255,255,0.85); }
.result--out    { color: rgba(255,255,255,0.32); }

.result-sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.42);
  margin-bottom: 1rem;
  min-height: 1em;
}

/* Game over */
.game-over { text-align: center; padding-top: 0.5rem; }

.game-over__score { margin-bottom: 0.75rem; }

.game-over__scored-label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
}
.game-over__runs {
  display: block;
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--tan);
  line-height: 1;
  margin: 0.2rem 0;
}
.game-over__sub {
  color: rgba(255,255,255,0.52);
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
  line-height: 1.55;
}
.game-over__ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.game-over__replay {
  background: none;
  border: none;
  color: rgba(255,255,255,0.32);
  font-size: 0.82rem;
  cursor: pointer;
  transition: color var(--transition);
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.05em;
}
.game-over__replay:hover { color: var(--tan); }

/* Mode selector */
.mode-selector {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.mode-btn {
  flex: 1;
  background: rgba(255,255,255,0.05);
  border: 2px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.65rem 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.mode-btn:hover { border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.7); }
.mode-btn--active {
  background: rgba(104,114,77,0.35);
  border-color: var(--tan);
  color: var(--white);
}

/* Handoff screen */
.handoff-sub {
  color: rgba(255,255,255,0.6);
  font-size: 0.92rem;
  line-height: 1.6;
  text-align: center;
  margin-bottom: 1.5rem;
}
.handoff-note {
  text-align: center;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.25);
  margin-top: 0.85rem;
  letter-spacing: 0.03em;
}

/* Responsive — game modal */
@media (max-width: 520px) {
  .game-modal__panel { padding: 1.5rem 1.1rem; margin: 0.5rem; }
  .swing-desc { display: none; }
}

/* ============================================================
   DIGITAL BAM SECTION
   ============================================================ */
.dbam-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 820px;
  margin: 0 auto;
}

.dbam-card {
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 12px;
  padding: 2.25rem 2rem;
  cursor: pointer;
  transition: border-color var(--transition), transform var(--transition), background var(--transition);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}

.dbam-card:hover, .dbam-card:focus {
  border-color: var(--tan);
  background: rgba(255,255,255,0.1);
  transform: translateY(-3px);
  outline: none;
}

.dbam-card__badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--tan);
  background: rgba(232,219,183,0.1);
  border: 1px solid rgba(232,219,183,0.25);
  border-radius: 100px;
  padding: 0.22rem 0.85rem;
}

.dbam-card__title {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--white);
  line-height: 1.2;
  letter-spacing: 0.03em;
}

.dbam-card__desc {
  font-size: 0.92rem;
  color: rgba(255,255,255,0.55);
  line-height: 1.55;
  flex: 1;
}

.dbam-card .btn { margin-top: 0.5rem; min-width: 160px; pointer-events: none; }

@media (max-width: 600px) {
  .dbam-cards { grid-template-columns: 1fr; gap: 1rem; }
}

/* ============================================================
   BAM MODAL (shared shell for both modals)
   ============================================================ */
.bam-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 500;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.bam-modal--open { display: flex; }

.bam-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 18, 10, 0.92);
  backdrop-filter: blur(8px);
}

.bam-modal__panel {
  position: relative;
  z-index: 1;
  background: var(--green-deep);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px;
  width: 100%;
  max-width: 460px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 2rem 1.75rem;
  box-shadow: 0 24px 80px rgba(0,0,0,0.65);
}

.bam-modal__panel--skills { max-width: 720px; width: 96vw; }

/* ── Custom scrollbars ──────────────────────────────────── */
/* Webkit — Chrome, Safari, Edge */
.bam-modal__panel::-webkit-scrollbar  { width: 5px; }
.bam-modal__panel::-webkit-scrollbar-track  { background: rgba(0,0,0,0.18); border-radius: 10px; }
.bam-modal__panel::-webkit-scrollbar-thumb  { background: rgba(104,114,77,0.48); border-radius: 10px; }
.bam-modal__panel::-webkit-scrollbar-thumb:hover { background: rgba(104,114,77,0.8); }

.sk2-log-wrap::-webkit-scrollbar  { width: 4px; }
.sk2-log-wrap::-webkit-scrollbar-track  { background: rgba(0,0,0,0.14); border-radius: 10px; }
.sk2-log-wrap::-webkit-scrollbar-thumb  { background: rgba(104,114,77,0.38); border-radius: 10px; }
.sk2-log-wrap::-webkit-scrollbar-thumb:hover { background: rgba(104,114,77,0.7); }

/* Firefox — degrades gracefully in older versions */
.bam-modal__panel { scrollbar-width: thin; scrollbar-color: rgba(104,114,77,0.48) rgba(0,0,0,0.18); }
.sk2-log-wrap     { scrollbar-width: thin; scrollbar-color: rgba(104,114,77,0.38) rgba(0,0,0,0.14); }

.bam-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.5);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--transition);
}
.bam-modal__close:hover { background: rgba(255,255,255,0.15); color: var(--white); }

.bam-modal__eyebrow {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--tan);
  text-align: center;
  margin-bottom: 0.35rem;
}

.bam-modal__title {
  font-family: var(--font-display);
  font-size: 1.8rem;
  color: var(--white);
  text-align: center;
  margin-bottom: 0.3rem;
  letter-spacing: 0.03em;
}

.bam-modal__title--sm { font-size: 1.2rem; margin-bottom: 0.2rem; }

.bam-modal__sub {
  color: rgba(255,255,255,0.42);
  font-size: 0.82rem;
  text-align: center;
  margin-bottom: 1.25rem;
}

/* Intro rules */
.bam-intro-rules {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
}

.bam-intro-rule {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  padding: 0.75rem 0.9rem;
}

.bam-intro-rule__num {
  background: var(--red);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.85rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.bam-intro-rule p {
  color: rgba(255,255,255,0.7);
  font-size: 0.87rem;
  line-height: 1.5;
  margin: 0;
}

/* Handoff */
.bam-handoff { text-align: center; padding: 0.5rem 0 1rem; }

.bam-handoff__icon {
  font-size: 2.75rem;
  line-height: 1;
  margin-bottom: 0.75rem;
}

.bam-handoff__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--white);
  margin-bottom: 0.6rem;
}

.bam-handoff__sub {
  color: rgba(255,255,255,0.5);
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: 1.5rem;
  text-align: center;
}

/* Pitch buttons */
.bam-pitch-grid {
  display: grid;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.bam-pitch-grid--3 { grid-template-columns: repeat(3, 1fr); }
.bam-pitch-grid--4 { grid-template-columns: repeat(4, 1fr); }

.bam-pitch-btn {
  background: rgba(255,255,255,0.06);
  border: 2px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  color: rgba(255,255,255,0.8);
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.03em;
  padding: 0.85rem 0.4rem;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: center;
  line-height: 1.2;
}

.bam-pitch-btn:hover {
  background: rgba(104,114,77,0.3);
  border-color: var(--green);
  color: var(--white);
  transform: translateY(-1px);
}

.bam-pitch-btn--sel {
  background: rgba(104,114,77,0.4) !important;
  border-color: var(--tan) !important;
  color: var(--white) !important;
}

/* Scoreboard */
.bam-sb {
  display: flex;
  align-items: center;
  background: rgba(0,0,0,0.28);
  border-radius: 8px;
  padding: 0.6rem 0;
  margin-bottom: 0.9rem;
}

.bam-sb-cell { text-align: center; flex: 1; }

.bam-sb-val {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--tan);
  display: block;
  line-height: 1;
}

.bam-sb-lbl {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.28);
  display: block;
  margin-top: 0.25rem;
}

.bam-sb-div { width: 1px; height: 36px; background: rgba(255,255,255,0.08); flex-shrink: 0; }

.bam-dots { display: flex; gap: 3px; justify-content: center; margin-top: 4px; }

.bam-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.18);
  background: transparent;
  transition: all 0.15s;
}

.bam-dot--filled { background: var(--red);  border-color: var(--red); }
.bam-dot--strike { background: var(--tan);  border-color: var(--tan); }

/* Reveal */
.bam-reveal-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  background: rgba(0,0,0,0.2);
  border-radius: 10px;
  padding: 1rem;
  margin-bottom: 0.85rem;
}

.bam-reveal-col { text-align: center; flex: 1; }

.bam-reveal-col-lbl {
  display: block;
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.28);
  margin-bottom: 0.45rem;
}

.bam-reveal-pitch {
  display: block;
  font-family: var(--font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.75rem;
  border-radius: 8px;
}

.bam-reveal-pitch--pitcher { background: var(--red);   color: var(--white); }
.bam-reveal-pitch--batter  { background: var(--green); color: var(--white); }

.bam-reveal-vs {
  font-family: var(--font-display);
  font-size: 0.65rem;
  color: rgba(255,255,255,0.2);
  flex-shrink: 0;
}

.bam-result-outcome {
  font-family: var(--font-display);
  font-size: 2rem;
  text-align: center;
  letter-spacing: 0.05em;
  margin-bottom: 0.3rem;
  animation: bamPop 0.28s cubic-bezier(0.34,1.56,0.64,1);
}

@keyframes bamPop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.bam-result--hr     { color: var(--red);  text-shadow: 0 0 20px rgba(187,61,67,0.5); }
.bam-result--double { color: var(--tan); }
.bam-result--single { color: rgba(255,255,255,0.85); }
.bam-result--strike { color: rgba(255,255,255,0.45); }
.bam-result--out    { color: rgba(255,255,255,0.28); }

.bam-result-sub {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.4);
  text-align: center;
  margin-bottom: 0.5rem;
  min-height: 1.1em;
}

.bam-result-score {
  font-family: var(--font-display);
  font-size: 1rem;
  color: rgba(255,255,255,0.55);
  text-align: center;
  letter-spacing: 0.06em;
  margin-bottom: 1rem;
}

/* Half inning over */
.bam-half-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1rem 0 1.25rem;
}

.bam-half-team { text-align: center; }

.bam-half-name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.bam-half-runs {
  display: block;
  font-family: var(--font-display);
  font-size: 3.5rem;
  color: var(--tan);
  line-height: 1;
}

.bam-half-sep {
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: rgba(255,255,255,0.18);
}

/* Game over final */
.bam-final-score {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin: 1rem 0 1.5rem;
}

.bam-final-team { text-align: center; }

.bam-final-name {
  display: block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.38);
  text-transform: uppercase;
  margin-bottom: 0.25rem;
}

.bam-final-runs {
  display: block;
  font-family: var(--font-display);
  font-size: 5rem;
  color: var(--tan);
  line-height: 1;
}

.bam-final-sep {
  font-family: var(--font-display);
  font-size: 2rem;
  color: rgba(255,255,255,0.18);
}

.bam-gameover-ctas {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

/* ============================================================
   SKILLS MODAL SPECIFIC
   ============================================================ */
.sk-stats {
  display: flex;
  background: rgba(0,0,0,0.25);
  border-radius: 8px;
  padding: 0.6rem 0;
  margin-bottom: 0.75rem;
}

.sk-stat { flex: 1; text-align: center; }

.sk-stat-val {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--tan);
  display: block;
  line-height: 1;
}

.sk-stat-lbl {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.28);
  display: block;
  margin-top: 0.25rem;
}

.sk-history {
  display: flex;
  gap: 5px;
  justify-content: center;
  min-height: 18px;
  margin-bottom: 0.5rem;
}

.sk-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
}

.sk-dot--ok   { background: var(--green); }
.sk-dot--miss { background: var(--red); opacity: 0.6; }

.sk-insight {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.42);
  text-align: center;
  min-height: 1.1em;
  margin-bottom: 1rem;
  font-style: italic;
  line-height: 1.5;
}

.bam-game-label {
  font-family: var(--font-display);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255,255,255,0.32);
  text-align: center;
  margin-bottom: 0.6rem;
}

.sk-waiting-msg {
  text-align: center;
  font-size: 0.88rem;
  color: var(--tan);
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  letter-spacing: 0.03em;
}

.sk-reset-btn {
  display: block;
  margin: 1.25rem auto 0;
  background: none;
  border: none;
  color: rgba(255,255,255,0.22);
  font-size: 0.78rem;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: color var(--transition);
}
.sk-reset-btn:hover { color: rgba(255,255,255,0.55); }

/* Flash feedback */
.sk-flash {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-display);
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  border-radius: 12px;
  padding: 0.85rem 2rem;
  pointer-events: none;
  animation: skFlash 0.85s ease forwards;
  z-index: 10;
}

.sk-flash--ok   { background: var(--green); color: var(--white); }
.sk-flash--miss { background: var(--red);   color: var(--white); }

@keyframes skFlash {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
  20%  { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  75%  { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.95); }
}

/* Responsive — new modals */
@media (max-width: 520px) {
  .bam-modal__panel { padding: 1.5rem 1.1rem; }
  .bam-pitch-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .bam-pitch-btn { font-size: 0.82rem; padding: 0.75rem 0.3rem; }
  .bam-final-runs, .bam-half-runs { font-size: 3.5rem; }
}

/* ============================================================
   HERO V2 — split layout: white text panel / studio image
   ============================================================ */
.hero-v2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100vh;
  padding-top: 72px;
  background: #ffffff;
}

.hero-v2__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 3.5rem 4rem max(2rem, calc((100vw - 1100px) / 2 + 1.5rem));
}

.hero-v2__eyebrow {
  font-family: var(--font-display);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--green);
  text-transform: uppercase;
  margin-bottom: 1.25rem;
}

.hero-v2__title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 6vw, 5.75rem);
  line-height: 0.9;
  color: var(--green-deep);
  margin-bottom: 1.4rem;
}

.hero-v2__sub {
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  font-weight: 500;
  color: var(--text-muted);
  max-width: 400px;
  margin-bottom: 2.25rem;
  line-height: 1.6;
}

.hero-v2__btns {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 2.5rem;
  align-items: center;
}

.hero-v2__trust {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.hero-v2__trust li {
  padding: 0 0.9rem;
  border-right: 1.5px solid #D0CCC4;
  line-height: 1;
}

.hero-v2__trust li:first-child { padding-left: 0; }
.hero-v2__trust li:last-child  { border-right: none; }

/* ============================================================
   SKILLS V2 — Live Pitch-Guessing Trainer
   ============================================================ */

/* Pitcher row */
.sk2-pitcher-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.sk2-label {
  font-family: var(--font-stencil);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tan);
  white-space: nowrap;
}
.sk2-pitcher-input {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.2);
  border-radius: 4px;
  color: #fff;
  font-size: 0.95rem;
  padding: 0.45rem 0.75rem;
  outline: none;
  transition: border-color 0.2s;
}
.sk2-pitcher-input::placeholder { color: rgba(255,255,255,0.3); }
.sk2-pitcher-input:focus { border-color: var(--tan); }

/* Phase labels */
.sk2-phase-label {
  font-family: var(--font-stencil);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tan);
  margin: 0 0 0.75rem;
}
.sk2-watch-msg {
  color: rgba(255,255,255,0.7);
  font-size: 0.88rem;
  margin: 0 0 0.6rem;
}

/* Two-column layout */
.sk2-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin-bottom: 0.75rem;
}
.sk2-col-label {
  font-family: var(--font-stencil);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0 0 0.5rem;
}

/* Pitch type buttons */
.sk2-pitch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.35rem;
}
.sk2-pitch-btn {
  background: rgba(255,255,255,0.07);
  border: 1.5px solid rgba(255,255,255,0.14);
  border-radius: 4px;
  color: rgba(255,255,255,0.8);
  font-size: 0.75rem;
  font-family: var(--font-stencil);
  letter-spacing: 0.04em;
  padding: 0.5rem 0.2rem;
  text-align: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1.25;
}
.sk2-pitch-btn:hover { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.3); }
.sk2-pitch-btn.sk2-selected { background: var(--green); border-color: var(--green); color: #fff; }

/* Zone — overlay: 4 ball-zone quadrant buttons behind floating 3×3 SZ grid */
.sk2-zone-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 4px;
  overflow: hidden;
  background: rgba(0,0,0,0.25);
}

.sk2-ball-btn {
  position: absolute;
  z-index: 1;
  background: rgba(255,255,255,0.05);
  border: none;
  color: rgba(255,255,255,0.45);
  font-size: 0.55rem;
  font-family: var(--font-stencil);
  letter-spacing: 0.04em;
  line-height: 1.3;
  cursor: pointer;
  transition: background 0.14s, color 0.14s;
  padding: 0.3rem 0.4rem;
}
.sk2-ball-btn:hover { background: rgba(255,255,255,0.11); color: rgba(255,255,255,0.8); }
.sk2-ball-btn.sk2-selected {
  background: rgba(187,61,67,0.28);
  color: #f07;
  box-shadow: inset 0 0 0 2px var(--red);
}

.sk2-ball--tl {
  top: 0; left: 0; width: 50%; height: 50%;
  display: flex; align-items: flex-start; justify-content: flex-start;
  border-right: 1px dashed rgba(255,255,255,0.08);
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.sk2-ball--tr {
  top: 0; right: 0; width: 50%; height: 50%;
  display: flex; align-items: flex-start; justify-content: flex-end;
  text-align: right;
  border-left: 1px dashed rgba(255,255,255,0.08);
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.sk2-ball--bl {
  bottom: 0; left: 0; width: 50%; height: 50%;
  display: flex; align-items: flex-end; justify-content: flex-start;
  border-right: 1px dashed rgba(255,255,255,0.08);
  border-top: 1px dashed rgba(255,255,255,0.08);
}
.sk2-ball--br {
  bottom: 0; right: 0; width: 50%; height: 50%;
  display: flex; align-items: flex-end; justify-content: flex-end;
  text-align: right;
  border-left: 1px dashed rgba(255,255,255,0.08);
  border-top: 1px dashed rgba(255,255,255,0.08);
}

/* Strike zone grid — floats centered over the ball zones */
.sk2-sz-grid {
  position: absolute;
  z-index: 2;
  top: 15%; left: 18%;
  width: 64%; height: 70%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  border: 2px solid rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.35);
  border-radius: 1px;
}

.sk2-sz-btn {
  background: rgba(255,255,255,0.07);
  border: none;
  border-right: 1px solid rgba(255,255,255,0.15);
  border-bottom: 1px solid rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.6);
  font-size: 0.5rem;
  font-family: var(--font-stencil);
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.12s;
  text-align: center;
  padding: 0;
  line-height: 1;
}
.sk2-sz-btn:nth-child(3n)  { border-right: none; }
.sk2-sz-btn:nth-child(n+7) { border-bottom: none; }
.sk2-sz-btn:hover { background: rgba(104,114,77,0.38); color: #fff; }
.sk2-sz-btn.sk2-selected { background: rgba(187,61,67,0.65); color: #fff; }

/* Action row (Log Guess / Submit) */
.sk2-action-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.sk2-action-btn {
  background: var(--tan);
  border: none;
  border-radius: 4px;
  color: #1a1a1a;
  font-family: var(--font-stencil);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  padding: 0.5rem 1.2rem;
  cursor: pointer;
  transition: opacity 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
}
.sk2-action-btn:disabled { opacity: 0.3; cursor: not-allowed; }
.sk2-action-btn:not(:disabled):hover { opacity: 0.82; }
.sk2-pending {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.38);
  margin: 0;
}

/* Stats panel */
.sk2-stats-panel {
  background: rgba(255,255,255,0.05);
  border-radius: 6px;
  padding: 0.7rem 1rem;
  margin-bottom: 0.75rem;
}
.sk2-stat-row {
  display: flex;
  justify-content: space-around;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.sk2-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}
.sk2-stat-val {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--tan);
  font-family: var(--font-stencil);
  letter-spacing: 0.02em;
}
.sk2-stat-lbl {
  font-size: 0.58rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.45);
}
.sk2-pitcher-breakdown { margin-top: 0.5rem; }

/* Tables (breakdown + log) */
.sk2-breakdown-table,
.sk2-log-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.7rem;
  color: rgba(255,255,255,0.75);
}
.sk2-breakdown-table th,
.sk2-log-table th {
  font-family: var(--font-stencil);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding: 0.3rem 0.4rem;
  text-align: left;
}
.sk2-breakdown-table td,
.sk2-log-table td {
  padding: 0.3rem 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

/* Log wrap */
.sk2-log-wrap {
  max-height: 170px;
  overflow-y: auto;
  margin-bottom: 0.75rem;
  border-radius: 4px;
}
.sk2-log-empty {
  text-align: center;
  color: rgba(255,255,255,0.28);
  font-style: italic;
  padding: 0.75rem;
}

/* Result labels */
.sk2-result--both    { color: #6fcf97; font-weight: 700; }
.sk2-result--partial { color: var(--tan); }
.sk2-result--miss    { color: #eb5757; }

/* Footer */
.sk2-footer-row { display: flex; justify-content: flex-end; }

/* Guess window timer bar */
.sk2-timer-bar {
  background: rgba(232,219,183,0.10);
  border: 1px solid rgba(232,219,183,0.28);
  border-radius: var(--radius);
  padding: 0.32rem 0.75rem;
  margin-bottom: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.82rem;
  color: var(--tan);
  text-align: center;
  letter-spacing: 0.04em;
}

/* Live wait panel */
.sk2-live-wait-box {
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  text-align: center;
}
.sk2-live-wait-msg {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.55);
  margin: 0;
  animation: sk2-pulse 1.6s ease-in-out infinite;
}
@keyframes sk2-pulse {
  0%, 100% { opacity: 0.55; }
  50%       { opacity: 1; }
}
.sk2-live-result-msg {
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0;
}
.sk2-live-result--both    { color: #6fcf97; }
.sk2-live-result--partial { color: var(--tan); }
.sk2-live-result--miss    { color: #eb5757; }

/* Live game selector bar */
.sk2-game-bar {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius);
  padding: 0.55rem 0.85rem;
  margin-bottom: 0.85rem;
}
.sk2-game-status {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.6);
  margin: 0;
}
.sk2-game-status--live { color: #6fcf97; }
.sk2-game-dropdown {
  display: block;
  width: 100%;
  margin-top: 0.45rem;
  background: rgba(255,255,255,0.09);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--radius);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  padding: 0.42rem 0.65rem;
  cursor: pointer;
}
.sk2-game-dropdown option { background: #2a3020; color: #fff; }
.sk2-game-end {
  font-size: 0.78rem;
  color: #eb5757;
  margin: 0.35rem 0 0;
}

/* Flash partial variant */
.sk-flash--partial {
  background: rgba(232,219,183,0.18);
  color: var(--tan);
  border: 2px solid var(--tan);
}

/* Display name notice */
.sk2-name-notice {
  font-size: 0.75rem;
  color: var(--tan);
  background: rgba(232,219,183,0.08);
  border: 1px solid rgba(232,219,183,0.22);
  border-radius: var(--radius);
  padding: 0.3rem 0.7rem;
  margin: -0.4rem 0 0.6rem;
}

/* Daily leaderboard */
.sk2-leaderboard {
  margin-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 0.85rem;
}
.sk2-lb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.sk2-lb-title {
  font-family: var(--font-display);
  font-size: 0.9rem;
  color: var(--tan);
  letter-spacing: 0.04em;
  margin: 0;
}
.sk2-lb-date-sel { width: auto; min-width: 140px; margin-top: 0; }
.sk2-lb-content  { min-height: 2rem; }
.sk2-lb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.78rem;
}
.sk2-lb-table thead tr { border-bottom: 1px solid rgba(255,255,255,0.12); }
.sk2-lb-table th {
  font-family: var(--font-display);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.45);
  padding: 0.25rem 0.4rem;
  text-align: left;
  white-space: nowrap;
}
.sk2-lb-table td {
  padding: 0.28rem 0.4rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.8);
}
.sk2-lb-rank { font-size: 0.85rem; width: 2rem; }
.sk2-lb-name { font-weight: 600; color: #fff; }
.sk2-lb-self td { background: rgba(104,114,77,0.14); }
.sk2-lb-self .sk2-lb-name { color: #6fcf97; }

/* ── BAM Scout mode tabs ───────────────────────────────────────── */
.sk2-mode-tabs {
  display: flex;
  gap: 0.5rem;
  margin: 0.65rem 0 0.85rem;
}
.sk2-mode-tab {
  flex: 1;
  padding: 0.45rem 0.75rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 6px;
  background: transparent;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.sk2-mode-tab:hover {
  background: rgba(255,255,255,0.07);
  color: rgba(255,255,255,0.85);
}
.sk2-mode-tab--active {
  background: rgba(104,114,77,0.35);
  border-color: rgba(104,114,77,0.7);
  color: #fff;
}

/* ── Manual Scout add-pitch row ───────────────────────────────── */
.sk2-add-pitch-row {
  margin: 0.5rem 0 0.75rem;
}
.sk2-add-pitch-row .sk2-game-dropdown {
  width: 100%;
  max-width: 260px;
  margin-top: 0;
}

/* ── Manual Scout usage breakdown table ──────────────────────── */
.sk2-usage-label {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(255,255,255,0.4);
  margin: 0.75rem 0 0.35rem;
  text-transform: uppercase;
}
.sk2-usage-table {
  margin-bottom: 0.5rem;
}

/* Responsive */
@media (max-width: 580px) {
  .sk2-two-col { grid-template-columns: 1fr; gap: 1rem; }
  .sk2-stat-val { font-size: 1rem; }
  .sk2-zone-wrap { aspect-ratio: 3 / 2; }
  .sk2-sz-grid { top: 10%; height: 80%; }
}

.hero-v2__img-wrap {
  position: relative;
  overflow: hidden;
  background: #1a1a1a;
}

.hero-v2__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* Outline button for light-background sections */
.btn--outline-dark {
  background: transparent;
  color: var(--green-deep);
  border-color: rgba(52,58,38,0.6);
}
.btn--outline-dark:hover {
  background: var(--green-deep);
  color: var(--white);
  border-color: var(--green-deep);
}

/* ============================================================
   GAMEPLAY SECTION — cinematic dark split
   ============================================================ */
.gameplay-section {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  min-height: 680px;
  background: var(--green-deep);
}

.gameplay-section__img-wrap {
  position: relative;
  overflow: hidden;
}

.gameplay-section__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  display: block;
}

.gameplay-section__text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 4rem 4rem 3.5rem;
}

.gameplay-section__label { color: var(--tan) !important; }

.gameplay-section__title {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 2.6vw, 2.4rem);
  color: var(--white);
  line-height: 1.12;
  margin-bottom: 1.5rem;
}

.gameplay-section__body {
  color: rgba(255,255,255,0.6);
  font-size: 1rem;
  line-height: 1.72;
  margin-bottom: 0.85rem;
  max-width: 360px;
}

.gameplay-section .btn--outline-white { margin-top: 0.5rem; }

/* ============================================================
   UMPIRE SECTION — cream, split: image left / text right
   ============================================================ */
.umpire-section {
  background: var(--cream);
  padding: 6rem 0;
}

.umpire-section__inner {
  display: grid;
  grid-template-columns: 0.72fr 1fr;
  gap: 5rem;
  align-items: center;
}

.umpire-section__img-col {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.umpire-section__img {
  width: 100%;
  max-width: 340px;
  max-height: 500px;
  object-fit: contain;
  object-position: center;
  display: block;
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.16);
}

.umpire-section__title {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.2vw, 4rem);
  color: var(--green-deep);
  line-height: 0.95;
  margin-bottom: 1.5rem;
  letter-spacing: 0.01em;
}

.umpire-section__body {
  font-size: 1.05rem;
  color: var(--text-muted);
  line-height: 1.72;
  max-width: 400px;
  margin-bottom: 1rem;
}

.umpire-section__text .btn { margin-top: 1rem; }

/* ============================================================
   SHOWCASE SECTION — white, 3-col figure grid + hover zoom
   ============================================================ */
.showcase-section {
  background: #ffffff;
  padding: 5.5rem 0;
}

.showcase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 3rem;
}

.showcase-card {
  background: var(--cream);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
  cursor: zoom-in;
}

.showcase-card:hover {
  box-shadow: 0 14px 44px rgba(0,0,0,0.13);
  transform: translateY(-4px);
}

.showcase-card__img-wrap {
  overflow: hidden;
  aspect-ratio: 3 / 4;
}

.showcase-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  transition: transform 0.45s ease;
}

.showcase-card:hover .showcase-card__img {
  transform: scale(1.07);
}

.showcase-card__info {
  padding: 0.9rem 1.2rem 1rem;
  border-top: 2px solid var(--tan);
}

.showcase-card__name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--green-dark);
  letter-spacing: 0.04em;
  margin-bottom: 0.15rem;
}

.showcase-card__team {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-weight: 500;
}

/* Wide action shot below the grid */
.showcase-footer { margin-top: 2.5rem; }

.showcase-wide-img {
  width: 100%;
  border-radius: 10px;
  aspect-ratio: 16 / 6;
  object-fit: cover;
  object-position: center 35%;
  box-shadow: 0 8px 36px rgba(0,0,0,0.1);
  display: block;
}

.showcase-wide-caption {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-muted);
  margin-top: 0.85rem;
  font-style: italic;
  letter-spacing: 0.02em;
}

/* ============================================================
   RESPONSIVE — new hero + sections
   ============================================================ */
@media (max-width: 1020px) {
  .hero-v2__text { padding: 3.5rem 2.5rem; }
  .gameplay-section__text { padding: 3rem 2.5rem; }
  .umpire-section__inner { gap: 3rem; }
}

@media (max-width: 860px) {
  /* Hero: stack vertically, image first */
  .hero-v2 {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-top: 68px;
  }
  .hero-v2__img-wrap {
    order: -1;
    height: 58vw;
    max-height: 420px;
    min-height: 260px;
  }
  .hero-v2__text {
    padding: 2.5rem 1.5rem 3rem;
  }
  .hero-v2__trust li { font-size: 0.72rem; padding: 0 0.65rem; }

  /* Gameplay: stack, image on top */
  .gameplay-section {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .gameplay-section__img-wrap { height: 62vw; max-height: 440px; }
  .gameplay-section__text { padding: 3rem 1.5rem 3.5rem; }
  .gameplay-section__body { max-width: none; }

  /* Umpire: stack, centered */
  .umpire-section { padding: 4rem 0; }
  .umpire-section__inner {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
  .umpire-section__img-col { justify-content: center; }
  .umpire-section__img { max-height: 360px; }
  .umpire-section__body { margin-left: auto; margin-right: auto; }

  /* Showcase: 2 columns */
  .showcase-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .showcase-wide-img { aspect-ratio: 4 / 3; }
}

@media (max-width: 520px) {
  .hero-v2__img-wrap { height: 72vw; }
  .showcase-grid { gap: 0.75rem; }
}

/* ============================================================
   HOW-TO-PLAY V2 — redesigned instruction page
   ============================================================ */
.rules-v2 {
  padding: 3rem 0 5rem;
  max-width: 860px;
  margin: 0 auto;
}

.rule-card {
  background: var(--white);
  border-radius: 8px;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
  margin-bottom: 2rem;
  overflow: hidden;
  border-left: 4px solid var(--green);
}
.rule-card--red  { border-left-color: var(--red); }

.rule-card__header {
  background: var(--green-deep);
  color: var(--tan);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  padding: 0.8rem 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.rule-card__header--red { background: #6B1D20; }
.rule-card__header--tan { background: var(--green); color: #fff; }

/* ======================================================
   PLAY RESULT ANIMATION — OUT OVERLAY
   ====================================================== */
.bam-anim-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.88);
  display: flex; align-items: center; justify-content: center;
}
.bam-anim-scene {
  position: relative;
  width: min(460px, 95vw);
  background: #141a0c;
  border: 3px solid var(--bam-green, #68724D);
  border-radius: 12px;
  padding: 1rem 1rem 1.25rem;
  overflow: hidden;
}
.bam-anim-field {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: .5rem; height: 148px; position: relative;
  background: linear-gradient(180deg,#1c2611 0%,#2e3f16 55%,#3e5620 100%);
  border-radius: 8px; padding: .5rem 1rem; margin-bottom: .75rem;
  overflow: hidden;
}
.bam-anim-field::after {
  content: ''; position: absolute; bottom: 26px; left: 0; right: 0;
  height: 1px; background: rgba(232,219,183,.18);
}
.bam-anim-pitcher-wrap {
  flex-shrink: 0; color: var(--bam-tan, #E8DBB7);
  width: 46px; transform-origin: bottom center;
}
.bam-anim-batter-wrap {
  flex-shrink: 0; color: #4a6b2a;
  width: 46px; transform-origin: bottom center;
}
.bam-anim-figure { width: 100%; height: auto; display: block; }
.bam-anim-zone-area {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px; align-self: center; position: relative; z-index: 2;
}
.bam-anim-zone-label {
  font-family: 'Black Ops One', sans-serif; font-size: .55rem;
  color: rgba(232,219,183,.35); letter-spacing: .1em; margin-bottom: 2px;
}
.bam-anim-zone {
  display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr;
  gap: 3px; width: 52px; height: 70px;
}
.bam-anim-zone-box {
  background: rgba(232,219,183,.1); border: 1px solid rgba(232,219,183,.22);
  border-radius: 2px;
}
.bam-anim-zone-box.pitch-here {
  background: rgba(187,61,67,.75); border-color: var(--bam-red, #BB3D43);
  box-shadow: 0 0 6px rgba(187,61,67,.7);
}
.bam-anim-zone-box.guess-here {
  background: rgba(74,107,42,.45); border-color: #4a6b2a;
  box-shadow: 0 0 4px rgba(74,107,42,.5);
}
.bam-anim-ball {
  position: absolute; width: 12px; height: 12px;
  background: var(--bam-cream, #F4F1EC); border-radius: 50%;
  border: 1.5px solid rgba(187,61,67,.6);
  top: 42%; left: 18%; opacity: 0; z-index: 10;
  pointer-events: none;
}
.bam-anim-whiff {
  position: absolute; top: 35%; left: 62%; z-index: 20;
  transform: translate(-50%,-50%) scale(0);
  font-family: 'Black Ops One', sans-serif; font-size: 2rem;
  color: var(--bam-tan, #E8DBB7); letter-spacing: .1em; opacity: 0;
  text-shadow: 2px 2px 6px rgba(0,0,0,.8); pointer-events: none;
}
.bam-anim-stamp {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  font-family: 'Black Ops One', sans-serif; font-size: 4.5rem;
  color: var(--bam-red, #BB3D43); letter-spacing: .15em;
  opacity: 0; transform: scale(3) rotate(-10deg); z-index: 30;
  pointer-events: none; background: rgba(0,0,0,.55);
  text-shadow: 3px 3px 0 rgba(0,0,0,.9), 0 0 28px rgba(187,61,67,.5);
}
.bam-anim-caption {
  min-height: 2.4rem; font-family: 'Barlow', sans-serif; font-size: .95rem;
  color: var(--bam-cream, #F4F1EC); text-align: center;
  padding: .4rem .5rem 0; transition: opacity .2s ease;
}
.bam-anim-outs {
  text-align: center; font-family: 'Black Ops One', sans-serif; font-size: .8rem;
  color: rgba(232,219,183,.55); letter-spacing: .1em; margin-top: .2rem;
}

/* ── keyframes ── */
@keyframes bamPitcherThrow {
  0%   { transform: rotate(0deg)   translateX(0);   }
  35%  { transform: rotate(-10deg) translateX(8px); }
  65%  { transform: rotate(-14deg) translateX(12px); }
  100% { transform: rotate(-8deg)  translateX(6px);  }
}
@keyframes bamBallFly {
  0%   { left:18%; top:42%; opacity:1; transform:scale(1);   }
  40%  { top:38%;  opacity:1;                                }
  85%  { left:68%; top:46%; opacity:.85; transform:scale(.8); }
  100% { left:72%; top:48%; opacity:0;   transform:scale(.65); }
}
@keyframes bamBatterSwing {
  0%   { transform: rotate(0deg);  }
  25%  { transform: rotate(-12deg); }
  55%  { transform: rotate(22deg);  }
  80%  { transform: rotate(14deg);  }
  100% { transform: rotate(10deg);  }
}
@keyframes bamWhiffPop {
  0%   { opacity:0; transform:translate(-50%,-50%) scale(.4);  }
  28%  { opacity:1; transform:translate(-50%,-50%) scale(1.25); }
  65%  { opacity:1; transform:translate(-50%,-50%) scale(1.0);  }
  100% { opacity:0; transform:translate(-50%,-50%) scale(.85); }
}
@keyframes bamOutStamp {
  0%   { opacity:0; transform:scale(3)    rotate(-10deg); }
  38%  { opacity:1; transform:scale(1.2)  rotate(3deg);  }
  56%  {            transform:scale(.96)  rotate(-1deg); }
  74%  {            transform:scale(1.04) rotate(1deg);  }
  100% {            transform:scale(1.0)  rotate(0deg); opacity:1; }
}
@keyframes bamOutsPop {
  0%   { transform:scale(1);   color:rgba(232,219,183,.55); }
  40%  { transform:scale(1.5); color:var(--bam-red,#BB3D43); }
  100% { transform:scale(1);   color:rgba(232,219,183,.8);  }
}

/* ── animation-active classes ── */
.bam-anim-pitcher--throwing { animation: bamPitcherThrow  .9s ease-out      forwards; }
.bam-anim-ball--flying      { animation: bamBallFly       1.2s ease-in      forwards; }
.bam-anim-batter--swinging  { animation: bamBatterSwing   .75s ease-in-out  forwards; }
.bam-anim-whiff--show       { animation: bamWhiffPop      .85s ease-out     forwards; }
.bam-anim-stamp--slam       { animation: bamOutStamp      1.0s cubic-bezier(.15,.8,.25,1) forwards; }
.bam-anim-outs--pop         { animation: bamOutsPop       .55s ease-out     forwards; }

@media (prefers-reduced-motion: reduce) {
  .bam-anim-pitcher--throwing,
  .bam-anim-ball--flying,
  .bam-anim-batter--swinging,
  .bam-anim-whiff--show,
  .bam-anim-stamp--slam,
  .bam-anim-outs--pop { animation: none !important; }
}
.rule-card__icon { font-size: 1.2rem; line-height: 1; }
.rule-card__body { padding: 1.25rem 1.4rem; }
.rule-card__body p { color: var(--text-muted); margin-bottom: 0.6rem; line-height: 1.65; }
.rule-card__body h3 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--green-dark);
  letter-spacing: 0.04em;
  margin: 1rem 0 0.45rem;
}

/* Pitch type pills inside rule cards */
.pitch-pills {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.pitch-pill {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--cream);
  border: 1px solid #E0DDD5;
  border-radius: 6px;
  padding: 0.55rem 1rem;
}
.pitch-pill__name {
  font-family: var(--font-display);
  font-size: 0.92rem;
  color: var(--green-dark);
}

/* Strike zone grid v2 */
.zone-grid-v2 {
  display: inline-grid;
  grid-template-columns: 60px 1fr 1fr;
  grid-template-rows: auto 60px 60px 60px;
  gap: 4px;
  margin: 0.75rem 0 1rem;
}
.zone-grid-v2 .zg-header {
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--green);
  text-align: center;
  padding: 0.25rem 0.4rem 0.4rem;
}
.zone-grid-v2 .zg-row-lbl {
  font-family: var(--font-display);
  font-size: 0.7rem;
  color: var(--green);
  display: flex;
  align-items: center;
  padding-right: 0.5rem;
}
.zone-grid-v2 .zg-box {
  background: #F5F4F0;
  border: 2px solid #CCC8BC;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 0.75rem;
  color: var(--green-dark);
  letter-spacing: 0.04em;
}

/* Outcome comparison tables */
.outcome-tables-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
  margin: 0.75rem 0;
}
.outcome-table-card {
  background: var(--cream);
  border: 1px solid #E0DDD5;
  border-radius: 6px;
  overflow: hidden;
}
.outcome-table-card__title {
  background: var(--green-deep);
  color: var(--tan);
  font-family: var(--font-display);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  padding: 0.6rem 0.9rem;
  text-align: center;
}
.outcome-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}
.outcome-table th {
  background: rgba(0,0,0,0.06);
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  color: var(--green-dark);
  padding: 0.45rem 0.75rem;
  text-align: left;
}
.outcome-table td {
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid #E8E4DC;
  color: var(--text-muted);
  line-height: 1.45;
  vertical-align: middle;
}
.outcome-table tr:last-child td { border-bottom: none; }
.outcome-table tr:nth-child(even) td { background: rgba(0,0,0,0.02); }

.outcome-badge {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.18rem 0.55rem;
  border-radius: 3px;
  color: var(--white);
  background: var(--green);
  white-space: nowrap;
}
.outcome-badge--hr  { background: var(--red); }
.outcome-badge--3b  { background: #D4660C; }
.outcome-badge--2b  { background: var(--green-dark); }
.outcome-badge--1b  { background: var(--green); }
.outcome-badge--out { background: #888; }

/* Callout boxes */
.callout-box {
  border-radius: 6px;
  padding: 0.9rem 1.1rem;
  margin: 0.85rem 0;
  line-height: 1.6;
  font-size: 0.93rem;
}
.callout-box--dark {
  background: var(--green-deep);
  color: rgba(255,255,255,0.9);
}
.callout-box--dark strong { color: var(--tan); }
.callout-box--red  { background: #4A1215; color: rgba(255,255,255,0.88); }
.callout-box--red  strong { color: #F9B4B7; }
.callout-box--tan  {
  background: #F5F2EA;
  color: var(--green-deep);
  border-left: 4px solid var(--green);
}
.callout-box--tan strong { color: var(--red); }

/* Stealing section */
.steal-section-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1rem 0;
}
.steal-card {
  border-radius: 6px;
  padding: 1rem;
  font-size: 0.88rem;
}
.steal-card--white {
  background: #F5F4F0;
  border: 2px solid #D5D0C2;
}
.steal-card--white-red {
  background: #FFF4F4;
  border: 2px solid var(--red);
}
.steal-card__title {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: var(--green-dark);
  margin-bottom: 0.5rem;
}
.steal-card--white-red .steal-card__title { color: var(--red); }
.steal-example {
  background: rgba(0,0,0,0.05);
  border-radius: 4px;
  padding: 0.45rem 0.7rem;
  font-size: 0.82rem;
  margin-top: 0.45rem;
  color: var(--text);
  line-height: 1.45;
}
.steal-example .arrow { color: var(--red); font-weight: 700; margin: 0 0.2rem; }
.steal-example strong { color: var(--green-dark); }

/* Base tokens */
.base-tokens {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin: 0.85rem 0 1.1rem;
}
.base-token {
  flex: 1;
  min-width: 130px;
  border-radius: 6px;
  padding: 0.6rem 1rem;
  text-align: center;
}
.base-token--white { background: #F5F5F5; border: 2px solid #C8C8C8; }
.base-token--red   { background: #FFF0F0; border: 2px solid var(--red); }
.base-token__label {
  font-family: var(--font-display);
  font-size: 0.88rem;
  margin-bottom: 0.2rem;
}
.base-token--white .base-token__label { color: var(--green-dark); }
.base-token--red   .base-token__label { color: var(--red); }
.base-token__desc { font-size: 0.78rem; color: var(--text-muted); }

/* ============================================================
   SPECIAL OPS PAGE
   ============================================================ */
.special-ops-page { padding: 3rem 0 5rem; }

.hero-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 1.5rem;
}
.hero-card {
  background: var(--white);
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #E0DDD5;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  transition: transform 0.2s, box-shadow 0.2s;
}
.hero-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.11);
}
.hero-card__header {
  background: var(--green-deep);
  padding: 0.9rem 1rem;
  text-align: center;
}
.hero-card__name {
  font-family: var(--font-display);
  font-size: 1.35rem;
  color: var(--tan);
  letter-spacing: 0.06em;
  line-height: 1;
  margin-bottom: 0.22rem;
}
.hero-card__title {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.48);
  font-weight: 600;
}
.hero-card__body { padding: 0.9rem 1rem; }

.ability-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  border-radius: 100px;
  padding: 0.18rem 0.6rem;
  margin-bottom: 0.65rem;
}
.ability-badge--always {
  background: rgba(104,114,77,0.12);
  color: var(--green-dark);
  border: 1px solid rgba(104,114,77,0.3);
}
.ability-badge--per-inning {
  background: rgba(80,80,140,0.1);
  color: #444480;
  border: 1px solid rgba(80,80,140,0.25);
}
.ability-badge--per-game {
  background: rgba(187,61,67,0.08);
  color: var(--red);
  border: 1px solid rgba(187,61,67,0.22);
}
.hero-card__ability {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.55;
}
.hero-category-label {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  border-bottom: 2px solid var(--tan);
  padding-bottom: 0.3rem;
  margin: 2rem 0 1rem;
}

/* how-to-play nav link for Special Ops */
.nav__links .nav-special-ops { color: var(--tan); }

@media (max-width: 800px) {
  .hero-grid { grid-template-columns: repeat(2, 1fr); }
  .outcome-tables-wrap { grid-template-columns: 1fr; }
  .steal-section-grid  { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .hero-grid { grid-template-columns: 1fr; }
  .zone-grid-v2 { grid-template-columns: 48px 1fr 1fr; }
  .base-tokens  { flex-direction: column; }
}

/* ============================================================
   SHOP PAGE
   ============================================================ */

/* Shop hero — Military Blue override */
.page-hero--shop {
  background: var(--blue);
  border-bottom-color: var(--blue-dark);
}
.page-hero--shop h1  { color: var(--white); }
.page-hero--shop p   { color: rgba(255,255,255,0.68); }

/* Shop section */
.shop-section {
  padding: 4rem 0 6rem;
  background: var(--tan-shop);
}

/* Products grid — responsive, expands naturally as more cards are added */
.shop-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 2rem;
  margin-top: 0;
}

/* Product card */
.product-card {
  background: var(--white);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  transition: transform var(--transition), box-shadow var(--transition);
  display: flex;
  flex-direction: column;
}
.product-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 40px rgba(0,0,0,0.16);
}

/* Card image */
.product-card__img-wrap {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--green-deep);
}
.product-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}
.product-card:hover .product-card__img { transform: scale(1.04); }

/* Free shipping badge overlaid on image */
.product-card__badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: var(--green);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  border-radius: 100px;
}

/* Card body */
.product-card__body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Collection label + price on one line */
.product-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.55rem;
}
.product-card__label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue);
}
.product-card__price {
  font-family: var(--font-display);
  font-size: 2.25rem;
  color: var(--green-dark);
  line-height: 1;
}

.product-card__title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--green-deep);
  line-height: 1.15;
  margin-bottom: 0.8rem;
}

.product-card__desc {
  font-size: 0.93rem;
  color: var(--text-muted);
  line-height: 1.65;
  margin-bottom: 1.1rem;
}

/* What's included list */
.product-card__includes {
  list-style: none;
  padding: 0.9rem 0;
  margin-bottom: 1.5rem;
  border-top: 1px solid #EAE7E0;
  border-bottom: 1px solid #EAE7E0;
}
.product-card__includes li {
  font-size: 0.88rem;
  color: var(--text-muted);
  padding: 0.28rem 0 0.28rem 1.3rem;
  position: relative;
  line-height: 1.45;
}
.product-card__includes li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}

/* Buy Now button — Military Blue to visually separate from site's red CTAs */
.product-card__buy {
  margin-top: auto;
  background: var(--blue);
  color: var(--white);
  border: 2px solid var(--blue);
  cursor: pointer;
  font-family: var(--font-display);
  letter-spacing: 0.04em;
}
.product-card__buy:hover:not(:disabled) {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  transform: translateY(-1px);
}
.product-card__buy:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
}

.product-card__free-ship {
  text-align: center;
  font-size: 0.8rem;
  color: var(--green-dark);
  margin-top: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* Trust strip beneath products */
.shop-trust {
  background: var(--blue-dark);
  padding: 1.25rem 0;
}
.shop-trust__inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
}
.shop-trust__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.75);
}
.shop-trust__item a {
  color: var(--tan-shop);
  text-decoration: underline;
}
.shop-trust__item a:hover { color: var(--white); }
.shop-trust__icon {
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}

/* ── Shop responsive ── */
@media (max-width: 720px) {
  .shop-grid { grid-template-columns: 1fr; }
  .shop-trust__inner { flex-direction: column; align-items: flex-start; padding: 0 1.5rem; gap: 0.75rem; }
}
@media (max-width: 520px) {
  .product-card__body { padding: 1.25rem; }
  .product-card__price { font-size: 1.85rem; }
}

/* ============================================================
   SUCCESS / ORDER CONFIRMED PAGE
   ============================================================ */
.success-section {
  padding: 6rem 0;
  min-height: 70vh;
  display: flex;
  align-items: center;
  background: var(--tan-shop);
}

.success-card {
  max-width: 520px;
  margin: 0 auto;
  text-align: center;
  background: var(--white);
  border-radius: 14px;
  padding: 3.5rem 2.5rem;
  box-shadow: 0 8px 48px rgba(0,0,0,0.13);
}

.success-icon {
  font-size: 4rem;
  line-height: 1;
  margin-bottom: 1.25rem;
}

.success-card h1 {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 4vw, 2.5rem);
  color: var(--green-dark);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}

.success-card > p {
  font-size: 1rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 0.75rem;
}

/* Next steps list */
.success-card__steps {
  text-align: left;
  background: var(--cream);
  border-radius: 8px;
  padding: 1.1rem 1.4rem;
  margin: 1.5rem 0;
  border-left: 4px solid var(--green);
}
.success-card__step {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.55rem 0;
  border-bottom: 1px solid #E0DDD5;
}
.success-card__step:last-child { border-bottom: none; }
.success-card__step-num {
  background: var(--green);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 0.75rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.success-card__step p {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 560px) {
  .success-card { padding: 2.5rem 1.5rem; }
}