/* GoalKick — goalkick.co

   The palette is the game's own menu palette (godot/scripts/menu.gd):

       bg            #050d08   near-black green, the whole page sits on this
       accent        #3eb55c   phosphor green
       accent-bright #57db75   phosphor green, lit
       ink           #dfeee4   body text
       muted         #8fae9b   secondary text (still AA against bg)

   No build step, no framework, no fonts to fetch. One stylesheet, one page.
   Night stadium: near-black green, thin dim-green hairlines, uppercase
   letter-spaced headings — the game's own menu language, not a generic
   dark theme. */

:root {
  --bg: #050d08;
  --bg-raised: #0a170f;
  --bg-raised-alt: #071209;
  --accent: #3eb55c;
  --accent-bright: #57db75;
  --ink: #dfeee4;
  --muted: #8fae9b;
  --line: #3eb55c59;      /* accent at low alpha: the "accent-dim" hairline */
  --line-soft: #3eb55c2e;
  --measure: 60ch;
  --wrap: 1120px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent-bright); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--accent); }

h1, h2, h3 { color: var(--ink); line-height: 1.25; margin: 0 0 .6em; font-weight: 700; }
h2 {
  font-size: clamp(1.4rem, 1rem + 1.4vw, 2rem);
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--accent-bright);
}
h3 {
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink);
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: .88em;
  background: #00000059;
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: .1em .35em;
  color: var(--accent-bright);
}

.wrap { width: min(100% - 2.5rem, var(--wrap)); margin-inline: auto; }
.prose { max-width: var(--measure); color: var(--ink); }
.small { font-size: .9rem; color: var(--muted); }

.skip {
  position: absolute;
  left: -9999px;
  background: var(--accent-bright);
  color: var(--bg);
  padding: .6rem 1rem;
  font-weight: 700;
}
.skip:focus { left: 1rem; top: 1rem; z-index: 10; }

:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }

/* hero: night stadium crowd, vignetted so the text always sits on flat dark */

.hero {
  position: relative;
  padding: clamp(2.75rem, 7vh, 5rem) 0 clamp(3rem, 8vh, 5.5rem);
  text-align: center;
  background: var(--bg) url("assets/bg.jpg") center 28% / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 85% 65% at 50% 15%, #050d0800 0%, #050d08b3 65%, var(--bg) 100%),
    linear-gradient(180deg, #050d0866 0%, #050d08cc 55%, var(--bg) 100%);
}

.hero-inner { position: relative; z-index: 1; width: min(100% - 2.5rem, 760px); margin-inline: auto; }

.crest {
  width: min(100%, 340px);
  height: auto;
  filter: drop-shadow(0 8px 30px #000c);
}

.tagline {
  margin: .8rem 0 0;
  color: var(--ink);
  font-size: clamp(1.05rem, .9rem + .6vw, 1.35rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.lede { margin: 1rem auto 0; max-width: 54ch; color: var(--muted); }

.promo-frame {
  margin: 2rem auto 0;
  max-width: 780px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: .5rem;
  background: #00000066;
  box-shadow: 0 20px 60px #000000a6;
}

.promo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  background: #000;
}

.actions { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; margin: 1.9rem 0 0; }

.button {
  display: inline-block;
  padding: .7rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0a170fb3;
  color: var(--ink);
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s;
}
.button:hover { background: #0f2417; border-color: var(--accent); color: var(--ink); transform: translateY(-1px); }
.button:active { transform: none; }

.button.primary { background: var(--accent); border-color: var(--accent); color: #041a0a; }
.button.primary:hover { background: var(--accent-bright); border-color: var(--accent-bright); color: #041a0a; }

.meta { margin: 1.5rem 0 0; color: var(--muted); font-size: .86rem; letter-spacing: .02em; }

/* bands */

.band { padding: clamp(3rem, 7vw, 5rem) 0; position: relative; }
.band.alt { background: var(--bg-raised-alt); border-block: 1px solid var(--line-soft); }

/* downloads */

.downloads { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
/* Five cards (Windows, Linux, macOS, Android, iOS): auto-fit alone gives four
   per row at desktop width and strands the fifth on its own line. Force one
   even row of five once there's room, and let auto-fit keep handling the
   narrower stack/wrap down to phone width. */
@media (min-width: 1000px) {
  .downloads { grid-template-columns: repeat(5, 1fr); }
}
.downloads li {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.3rem;
  display: flex;
  flex-direction: column;
}
.downloads .detail { margin: 0 0 .75rem; color: var(--accent-bright); font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; }
.downloads .note { color: var(--muted); margin: 0 0 1.3rem; font-size: .93rem; }
.downloads .button { margin-top: auto; align-self: flex-start; display: flex; flex-direction: column; gap: .15rem; line-height: 1.3; }
.downloads .button .asset { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; word-break: break-all; }
.downloads .button .sub { color: var(--accent-bright); font-size: .75rem; letter-spacing: .04em; text-transform: uppercase; }

/* The App Store badge is Apple's own artwork, unmodified
   (assets/app-store-badge.svg, from Apple's badge service). Their identity
   guidelines require the supplied badge rather than a recreation, forbid
   recolouring or re-typesetting it, and ask for clear space of at least 10%
   of the badge's height on every side - hence the padding and the fact that
   nothing here touches the image itself. */
.app-store-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-block;
  padding: 5px;               /* 10% of the 50px badge height */
  line-height: 0;
  border-radius: 8px;
  transition: transform .15s;
}
.app-store-link:hover { transform: translateY(-1px); }
.app-store-link img { display: block; height: 50px; width: auto; }

/* Google's official Play badge (assets/google-play-badge.png, unmodified).
   Their brand guidelines want the supplied artwork, no recolouring and no
   effects. Unlike Apple's, this badge has the required clear space baked into
   the image, so there is no padding here - adding some would double it. The
   75px height puts its inner logo at roughly the same visual size as the
   50px App Store badge beside it. */
.play-store-link {
  margin-top: auto;
  align-self: flex-start;
  display: inline-block;
  line-height: 0;
  transition: transform .15s;
}
.play-store-link:hover { transform: translateY(-1px); }
.play-store-link img { display: block; height: 75px; width: auto; }

/* store badges: drawn with CSS, not the platforms' own artwork.
   Retained for the Play badge slot; the App Store no longer uses it. */

.store-badge {
  margin-top: auto;
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: .65rem;
  padding: .55rem 1.1rem .55rem .9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #0a170fb3;
  color: var(--ink);
  text-decoration: none;
  transition: background .15s, border-color .15s, transform .15s;
}
.store-badge:hover { background: #0f2417; border-color: var(--accent); color: var(--ink); transform: translateY(-1px); }
.store-glyph {
  flex: none;
  width: 1.1rem;
  height: 1.1rem;
  position: relative;
}
/* a play-button triangle, drawn with borders so it can never fall back to a
   colour emoji glyph the way a unicode play symbol can */
.store-glyph-play {
  width: 0;
  height: 0;
  border-top: .6rem solid transparent;
  border-bottom: .6rem solid transparent;
  border-left: .95rem solid var(--accent-bright);
}
/* a rounded four-point mark standing in for the App Store glyph, same
   reasoning: shape, not a font glyph that could render off-brand */
.store-glyph-apple {
  background: var(--accent-bright);
  border-radius: 30% 30% 30% 30% / 45% 45% 45% 45%;
  transform: rotate(45deg);
}
.store-text { display: flex; flex-direction: column; text-align: left; }
.store-eyebrow { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.store-name { font-size: 1.05rem; font-weight: 700; letter-spacing: .01em; }

.band.alt .prose.small { margin-top: 1.5rem; }

/* features */

.features { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.features li {
  background: var(--bg-raised);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 1.3rem;
}
.features h3 { color: var(--accent-bright); }
.features p { color: var(--muted); margin: 0; font-size: .95rem; }

/* screenshots */

.shot-grid { list-style: none; padding: 0; margin: 2rem 0 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.shot { margin: 0; }
.shot-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
}
.shot-btn:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; }
.shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 14px 40px #000000a6;
}

/* lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox[hidden] { display: none; }

.lightbox-scrim {
  position: absolute;
  inset: 0;
  background: #050d08eb; /* the page's near-black green at ~0.92 alpha */
}

.lightbox-img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 92vw;
  max-height: 92vh;
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 20px 60px #000000a6;
}

.lightbox-close,
.lightbox-prev,
.lightbox-next {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #0a170fb3;
  color: var(--accent-bright);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.lightbox-close:hover,
.lightbox-prev:hover,
.lightbox-next:hover { background: #0f2417; border-color: var(--accent); }

.lightbox-close { top: 1rem; right: 1rem; }
.lightbox-prev, .lightbox-next {
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  font-size: 1.5rem;
}
.lightbox-prev { left: 1rem; }
.lightbox-next { right: 1rem; }

/* credits */

.credits { background: var(--bg-raised-alt); border-top: 1px solid var(--line-soft); }
.credit-groups { display: grid; gap: 1.75rem; margin-top: 2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.credit-groups h3 { color: var(--muted); font-size: .8rem; letter-spacing: .09em; }
.credit-groups p { margin: 0; max-width: 38ch; color: var(--ink); }

/* footer */

footer { padding: 2.5rem 0 3rem; border-top: 1px solid var(--line-soft); text-align: center; }
footer p { margin: 0 0 .6rem; }
footer .small { max-width: 52ch; margin-inline: auto; }

/* Downloads while there is nothing to download: the cards stay - they say
   what each platform will get - but the buttons are inert and read as such. */
.coming-soon {
  opacity: 0.55;
  pointer-events: none;
  cursor: default;
  filter: saturate(0.4);
}

/* --- Notice banner: a thin strip above the hero, unmistakable but not loud --- */
.notice-banner {
  background: var(--bg-raised-alt);
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  text-align: center;
  padding: 0.7rem 1rem;
  font-size: 0.92rem;
  line-height: 1.5;
}
.notice-banner strong { color: var(--accent-bright); }
.notice-banner a { color: var(--ink); }

/* --- Contribute steps: three cards, same grid feel as .downloads/.features --- */
.steps {
  list-style: none;
  padding: 0;
  margin: 2rem 0 0;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.steps > li {
  background: var(--bg-raised);
  border: 1px solid var(--line-soft);
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
}
.steps h3 { margin: 0 0 0.4rem; color: var(--accent-bright); font-size: 1.05rem; }
.steps p { margin: 0; color: var(--muted); }
.prose.small { font-size: 0.9rem; margin-top: 1.5rem; }