/* ===== The Game ===== */
:root { --acc: #2fb86a; --acc-deep: #1f9d57; }
body { background: #040a07; color: var(--text); }

/* Cinematic backdrop: dark green night-stadium */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background:
    repeating-linear-gradient(135deg, rgba(47,184,106,.025) 0 1px, transparent 1px 50px),
    linear-gradient(180deg, rgba(4,10,7,.82), rgba(4,10,7,.9) 50%, rgba(2,6,4,.97)),
    url("../assets/game-bg.jpg") center / cover no-repeat fixed;
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(70% 45% at 50% 8%, rgba(47,184,106,.12), transparent 60%);
}

/* Shared bits */
.g-kicker, .g-eyebrow { font-family: var(--sans); font-weight: 700; text-transform: uppercase; color: var(--acc); }
.g-kicker { font-size: 12px; letter-spacing: .3em; margin-bottom: 22px; }
.g-eyebrow { font-size: 11px; letter-spacing: .26em; margin-bottom: 14px; }
.g-eyebrow.center, .g-h2.center, .g-note.center { text-align: center; }
.g-h2 { font-family: var(--display); font-weight: 400; font-size: clamp(28px, 4.4vw, 54px); color: #fff; line-height: 1.02; letter-spacing: -.005em; }
.g-note { font-family: var(--sans); font-size: clamp(14px, 1.5vw, 16px); line-height: 1.6; color: #b8c3bb; max-width: 600px; }
.g-note.center { margin-left: auto; margin-right: auto; }

/* Hero */
.g-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 110px clamp(20px, 6vw, 80px) 70px; }
.g-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 42% at 50% 18%, rgba(47,184,106,.16), transparent 60%); pointer-events: none; }
.g-title { position: relative; z-index: 2; font-family: var(--display); font-weight: 400; font-size: clamp(44px, 8vw, 116px); line-height: .94; color: #fff; letter-spacing: -.01em; text-shadow: 0 8px 50px rgba(0,0,0,.6); }
.g-sub { position: relative; z-index: 2; max-width: 620px; margin: 26px auto 0; font-family: var(--sans); font-size: clamp(15px, 1.7vw, 18px); line-height: 1.6; color: #cfd8d0; }
.g-scrollcue { position: relative; z-index: 2; margin-top: 44px; font-family: var(--sans); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: #7e8a80; }
.g-scrollcue span { display: inline-block; animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ---- Interactive pitch ---- */
.pitch-section { max-width: 1180px; margin: 0 auto; padding: clamp(60px, 9vw, 120px) clamp(20px, 5vw, 60px); }
.pitch-head { max-width: 640px; margin-bottom: 44px; }
.pitch-head .g-note { margin-top: 14px; }
.pitch-stage { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; }

.pitch { position: relative; aspect-ratio: 100 / 150; width: 100%; max-width: 420px; justify-self: center; border-radius: 14px; overflow: hidden;
  background: repeating-linear-gradient(180deg, #165e35 0 6.66%, #124d2b 6.66% 13.33%);
  box-shadow: 0 40px 90px rgba(0,0,0,.6), inset 0 0 80px rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.08); }
.pitch-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.pitch-lines rect, .pitch-lines line, .pitch-lines circle { fill: none; stroke: rgba(255,255,255,.5); stroke-width: 1.1px; vector-effect: non-scaling-stroke; }
.pitch-lines .spot { fill: rgba(255,255,255,.6); stroke: none; }
.pitch-lines .goal { fill: rgba(255,255,255,.5); stroke: none; }

.player { position: absolute; transform: translate(-50%, -50%); width: clamp(30px, 8.5%, 40px); aspect-ratio: 1; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.5); background: rgba(8,26,16,.72); color: #fff; cursor: pointer;
  font-family: var(--sans); font-weight: 700; font-size: 10px; display: flex; align-items: center; justify-content: center;
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: transform .25s, background .25s, border-color .25s, box-shadow .25s; }
.player:hover { border-color: var(--acc); }
.player.active { background: var(--acc); border-color: #fff; color: #07150c; transform: translate(-50%, -50%) scale(1.2); box-shadow: 0 0 24px rgba(47,184,106,.7); z-index: 3; }

.pos-panel { position: relative; background: linear-gradient(180deg, rgba(12,20,15,.74), rgba(7,12,9,.82)); border: 1px solid rgba(255,255,255,.09); border-radius: 20px; padding: clamp(26px, 3vw, 40px); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 30px 70px rgba(0,0,0,.5); min-height: 220px; }
.pos-line { font-family: var(--sans); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acc); }
.pos-name { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 4vw, 48px); color: #fff; line-height: 1; margin: 10px 0 16px; }
.pos-desc { font-family: var(--sans); font-size: 15px; line-height: 1.65; color: #d6ded7; }
.pos-eg { font-family: var(--serif); font-style: italic; font-size: 15px; color: var(--acc); margin-top: 16px; }

/* ---- Match primer ---- */
.match-section { max-width: 1100px; margin: 0 auto; padding: clamp(50px, 8vw, 100px) clamp(20px, 5vw, 60px); text-align: center; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 44px; text-align: left; }
.fact { background: linear-gradient(180deg, rgba(12,20,15,.6), rgba(7,12,9,.7)); border: 1px solid rgba(255,255,255,.07); border-radius: 16px; padding: 26px 24px; }
.fact-big { font-family: var(--display); font-weight: 400; font-size: clamp(30px, 3.4vw, 46px); color: var(--acc); line-height: 1; display: block; margin-bottom: 14px; }
.fact-cap { font-family: var(--sans); font-size: 13.5px; line-height: 1.55; color: #c4cdc6; }

/* ---- Glossary ---- */
.glossary-section { max-width: 940px; margin: 0 auto; padding: clamp(50px, 8vw, 100px) clamp(20px, 5vw, 60px); text-align: center; }
.glossary-section .g-note { margin-top: 12px; margin-bottom: 40px; }
.terms { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; text-align: left; }
.term { background: linear-gradient(180deg, rgba(12,20,15,.6), rgba(7,12,9,.7)); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: 20px 22px; cursor: pointer; transition: border-color .25s, background .25s; font-family: inherit; color: inherit; text-align: left; }
.term:hover { border-color: rgba(47,184,106,.5); }
.term-word { display: flex; align-items: center; justify-content: space-between; font-family: var(--display); font-weight: 400; font-size: clamp(22px, 2.6vw, 30px); color: #fff; letter-spacing: .01em; }
.term-plus { font-family: var(--sans); font-weight: 400; font-size: 22px; color: var(--acc); transition: transform .3s; }
.term.open { border-color: rgba(47,184,106,.5); }
.term.open .term-plus { transform: rotate(45deg); }
.term-def { max-height: 0; overflow: hidden; opacity: 0; font-family: var(--sans); font-size: 14px; line-height: 1.6; color: #cdd6cf; transition: max-height .35s ease, opacity .3s ease, margin .35s ease; }
.term.open .term-def { max-height: 240px; opacity: 1; margin-top: 12px; }

/* ---- Payoff ---- */
.g-payoff { position: relative; text-align: center; padding: clamp(80px, 14vw, 160px) clamp(20px, 6vw, 80px); }
.g-payoff::before { content: ""; position: absolute; inset: 0; background: radial-gradient(55% 55% at 50% 50%, rgba(47,184,106,.12), transparent 65%); pointer-events: none; }
.payoff-title { position: relative; z-index: 2; font-family: var(--display); font-weight: 400; font-size: clamp(30px, 5vw, 60px); color: #fff; line-height: 1; }
.payoff-sub { position: relative; z-index: 2; max-width: 540px; margin: 22px auto 30px; font-family: var(--sans); font-size: clamp(15px, 1.7vw, 18px); line-height: 1.6; color: #cfd8d0; }
.payoff-cta { position: relative; z-index: 2; display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.btn-primary, .btn-ghost { display: inline-flex; align-items: center; gap: 8px; font-family: var(--sans); font-weight: 600; font-size: 14px; text-decoration: none; padding: 14px 26px; border-radius: 100px; transition: transform .2s, background .2s, color .2s, border-color .2s; }
.btn-primary { background: var(--acc); color: #07150c; }
.btn-primary:hover { transform: translateY(-2px); background: #3fce7c; }
.btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.2); }
.btn-ghost:hover { border-color: var(--acc); color: var(--acc); transform: translateY(-2px); }
.btn-primary span, .btn-ghost span { transition: transform .2s; }
.btn-primary:hover span, .btn-ghost:hover span { transform: translateX(3px); }

/* Back home */
#goat-home { position: fixed; top: 18px; left: 18px; z-index: 60; font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: .04em; color: #fff; text-decoration: none; padding: 8px 14px; border-radius: 100px; background: rgba(8,14,10,.55); border: 1px solid rgba(255,255,255,.14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); opacity: .85; transition: opacity .2s, border-color .2s, color .2s; }
#goat-home:hover { opacity: 1; border-color: var(--acc); color: var(--acc); }

/* Reveal on scroll */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.in { opacity: 1; transform: none; }

/* Responsive */
@media (max-width: 820px) {
  .pitch-stage { grid-template-columns: 1fr; }
  .pitch { max-width: 340px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .terms { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .g-scrollcue span { animation: none; } .reveal { opacity: 1; transform: none; transition: none; } }