/* Grounds 4 Glory – site styles. No external resources. */

@font-face {
  font-family: "G4G Display";
  src: url("/fonts/g4g-display-latin.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/nunito-var-latin.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Brand (brand/README.md) */
  --outline: #0B2E18;
  --rim: #1E6B34;
  --cream: #FFF9E8;
  --cream-2: #F6EBCD;
  --cream-3: #EAD7A8;
  --gold-hi: #FFEB8A;
  --gold: #FFC52A;
  --gold-lo: #F09A12;
  --gold-edge: #B8660C;
  --grass: #6CC64A;
  --grass-dark: #3F9A30;
  --grass-light: #B9F07F;
  --earth: #7A4A24;
  --bg-mid: #2F7D3C;
  --bg-mid-out: #14492A;
  --bg-edge: #061C0F;

  /* Derived surfaces */
  --night: #0A1A22;
  --night-2: #10262F;
  --moon: #A9C4FF;
  --text: var(--cream);
  --text-mute: rgba(255, 249, 232, 0.78);
  --line: rgba(255, 249, 232, 0.14);

  --radius: 16px;
  --radius-lg: 24px;
  --gutter: 16px;
  --maxw: 1180px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --font-display: "G4G Display", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --font-body: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg-edge);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
img, video { height: auto; }
figure { margin: 0; }
h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
a { color: var(--gold); text-underline-offset: 3px; }
a:hover { color: var(--gold-hi); }
strong { font-weight: 800; }

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 6px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute; left: var(--gutter); top: -100px; z-index: 100;
  background: var(--gold); color: var(--outline);
  padding: 10px 16px; border-radius: 999px; font-weight: 800; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Typography ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: 0.005em;
  color: var(--cream);
  text-shadow: 0 3px 0 var(--outline);
  text-wrap: balance;
}
h1.display { font-size: clamp(2.25rem, 7.2vw, 4.1rem); text-shadow: 0 4px 0 var(--outline); }
h2.display { font-size: clamp(1.9rem, 5.6vw, 3.1rem); }
h3.display { font-size: clamp(1.55rem, 4.2vw, 2.15rem); }
.lead { font-size: clamp(1.08rem, 2.4vw, 1.25rem); color: var(--text-mute); max-width: 60ch; }
.eyebrow {
  font-weight: 800; font-size: 0.82rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold);
}
.num { font-family: var(--font-display); font-weight: 400; color: var(--gold); font-size: 1.12em; white-space: nowrap; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--gold);
  --btn-fg: var(--outline);
  --btn-edge: var(--gold-edge);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 12px 24px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: 800 1.02rem/1.2 var(--font-body);
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 5px 0 var(--btn-edge);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background-color 160ms var(--ease);
}
.btn:hover { color: var(--btn-fg); transform: translateY(-1px); box-shadow: 0 6px 0 var(--btn-edge); }
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--btn-edge); }
.btn-gold { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-lo)); }
.btn-ghost {
  --btn-bg: transparent; --btn-fg: var(--cream); --btn-edge: transparent;
  box-shadow: inset 0 0 0 2px rgba(255, 249, 232, 0.55);
}
.btn-ghost:hover { box-shadow: inset 0 0 0 2px var(--cream); background: rgba(255, 249, 232, 0.06); }
.btn-ghost:active { box-shadow: inset 0 0 0 2px var(--cream); }
.btn-link {
  --btn-bg: transparent; --btn-fg: var(--cream); --btn-edge: transparent;
  padding-inline: 8px; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.btn-link:hover { transform: none; color: var(--gold-hi); }

.btn-steam { background: linear-gradient(180deg, var(--gold-hi), var(--gold) 45%, var(--gold-lo)); }
.btn-steam.is-disabled, .btn-steam:disabled {
  --btn-bg: rgba(255, 249, 232, 0.07);
  --btn-fg: var(--cream);
  --btn-edge: transparent;
  background: var(--btn-bg);
  box-shadow: inset 0 0 0 2px rgba(255, 249, 232, 0.4);
  border: 0;
  cursor: not-allowed;
  transform: none;
  outline-offset: 3px;
}
.btn-steam.is-disabled .icon { color: var(--gold); }
.btn-small { min-height: 44px; padding: 8px 16px; font-size: 0.92rem; }

.steam-note { margin-top: 12px; font-size: 0.95rem; color: var(--text-mute); max-width: 34ch; }
.status { min-height: 1.6em; margin-top: 10px; font-size: 0.95rem; font-weight: 700; color: var(--grass-light); }
.status.is-error { color: #FFC3A8; }
.status:empty { margin-top: 0; }

.cta-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 20px 24px; margin-top: 28px; }
.share-block-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-top: 28px; }
.share-block-row .status { flex-basis: 100%; }

/* ---------- Header ---------- */
.site-header {
  position: relative; z-index: 20;
  background: var(--outline);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px 24px; padding-block: 12px;
}
.brand { display: inline-flex; border-radius: 8px; }
.brand img { width: 176px; height: auto; }
.site-nav ul { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.site-nav a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--cream); font-weight: 800; text-decoration: none; font-size: 0.98rem;
}
.site-nav a:hover { color: var(--gold); }
.header-cta { display: none; }

@media (max-width: 699px) {
  .header-inner { justify-content: center; }
  .site-nav { width: 100%; }
  .site-nav ul { justify-content: center; gap: 0 16px; }
  .site-nav a { font-size: 0.92rem; }
}
@media (min-width: 700px) {
  .brand img { width: 200px; }
}
@media (min-width: 1000px) {
  .site-header { position: sticky; top: 0; background: rgba(11, 46, 24, 0.97); }
  .header-inner { flex-wrap: nowrap; }
  .site-nav { margin-left: auto; }
  .header-cta { display: block; }
}

/* ---------- Pitch backgrounds ---------- */
.hero, .section-game, .section-final {
  background-color: var(--bg-mid-out);
  background-image:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 64px, transparent 64px 128px),
    radial-gradient(ellipse 85% 70% at 30% 35%, var(--bg-mid) 0%, var(--bg-mid-out) 55%, var(--bg-edge) 100%);
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding-block: 36px 64px; }
.hero::before {
  /* chalk centre circle + halfway line, static */
  content: ""; position: absolute; pointer-events: none;
  width: 520px; height: 520px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.07);
  right: -160px; top: 50%; transform: translateY(-50%);
}
.hero::after {
  content: ""; position: absolute; pointer-events: none;
  top: 0; bottom: 0; right: 100px; width: 3px; background: rgba(255, 255, 255, 0.06);
}
.hero-grid { position: relative; z-index: 1; display: grid; gap: 40px; align-items: center; }
.hero-logo { width: min(62vw, 250px); margin-bottom: 20px; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.35)); }
.hero .eyebrow { margin-bottom: 12px; }
.hero h1 { margin-bottom: 18px; }
.platform {
  display: inline-flex; align-items: center; gap: 10px; margin-top: 18px;
  padding: 8px 14px; border-radius: 999px;
  background: rgba(6, 28, 15, 0.55); box-shadow: inset 0 0 0 1px var(--line);
  font-weight: 700; font-size: 0.98rem;
}
.platform .icon { color: var(--gold); }

.hero-media { position: relative; padding-bottom: 12%; }
.shot-hero-2 {
  position: absolute; width: 46%; right: -2%; bottom: 0;
  transform: rotate(4deg);
}

@media (min-width: 1000px) {
  .hero { padding-block: 40px 88px; }
  .hero-grid { grid-template-columns: 1fr 1.05fr; gap: 56px; }
  .hero-logo { width: 250px; margin-bottom: 14px; }
  .hero h1 { font-size: 3.5rem; }
  .hero-media { padding-bottom: 16%; }
  .shot-hero { transform: rotate(-1.5deg); }
}

/* ---------- Screenshot frames ---------- */
.shot {
  position: relative;
  border-radius: var(--radius);
  background: var(--cream);
  padding: 6px;
  box-shadow: 0 10px 0 rgba(6, 28, 15, 0.85), 0 22px 40px rgba(0, 0, 0, 0.35);
  transition: transform 300ms var(--ease);
}
.shot img { border-radius: calc(var(--radius) - 6px); width: 100%; }
.tilt-l { transform: rotate(-1.5deg); }
.tilt-r { transform: rotate(1.5deg); }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .shot:hover { transform: rotate(0deg) translateY(-4px); }
}

/* ---------- Sections ---------- */
.section { padding-block: 72px; scroll-margin-top: 72px; }
.section-head { margin-bottom: 40px; }
.section-head .lead { margin-top: 14px; }
@media (min-width: 1000px) {
  .section { padding-block: 104px; }
  .section-head { margin-bottom: 56px; max-width: 760px; }
}

.section-game { border-top: 3px solid rgba(255, 255, 255, 0.18); }

/* Feature rows */
.feature {
  display: grid; gap: 28px; align-items: center;
  padding: 28px 0;
}
.feature + .feature { border-top: 2px dashed rgba(255, 255, 255, 0.16); margin-top: 28px; padding-top: 52px; }
.feature-text p { margin-top: 14px; color: var(--text-mute); font-size: 1.08rem; max-width: 52ch; }

.badge {
  display: inline-grid; place-items: center;
  width: 52px; height: 52px; margin-bottom: 16px;
  border-radius: 50%;
  color: var(--outline);
  box-shadow: 0 0 0 6px rgba(255, 249, 232, 0.08), 0 0 0 12px rgba(255, 249, 232, 0.04);
}
.badge svg { width: 28px; height: 28px; }
.badge-day { background: var(--gold); }
.badge-growth { background: var(--grass); }
.badge-night { background: var(--moon); }
.badge-paper { background: var(--cream-2); }

.duo { position: relative; display: grid; }
.duo .shot:first-child { width: 86%; }
.duo .shot:last-child { width: 72%; justify-self: end; margin-top: -14%; }

.growth { display: grid; gap: 14px; justify-items: center; }
.growth .shot { width: 100%; }
.growth-arrow {
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--gold); color: var(--outline); transform: rotate(90deg);
  box-shadow: 0 4px 0 var(--gold-edge);
}
.growth-arrow svg { width: 28px; height: 28px; }

.feature-night, .feature-consequences {
  background: linear-gradient(180deg, var(--night-2), var(--night));
  border-radius: var(--radius-lg);
  padding: 28px 18px;
  border-top: 0;
  box-shadow: inset 0 0 0 1px rgba(169, 196, 255, 0.14);
}
.feature + .feature-night, .feature + .feature-consequences { border-top: 0; margin-top: 44px; padding-top: 28px; }
.feature-night .display, .feature-consequences .display { text-shadow: 0 3px 0 #04090C; }

.shot-paper { background: var(--cream-2); transform: rotate(-2deg); max-width: 520px; margin-inline: auto; }

@media (min-width: 1000px) {
  .feature { grid-template-columns: 5fr 7fr; gap: 56px; padding: 40px 0; }
  .feature:nth-of-type(even) .feature-text { order: 2; }
  .feature-night, .feature-consequences { padding: 48px; }
  .feature-growth { grid-template-columns: 1fr; gap: 36px; }
  .feature-growth .feature-text { max-width: 760px; order: 0 !important; }
  .growth { grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
  .growth-arrow { transform: none; }
}

/* ---------- Play together ---------- */
.section-play {
  background:
    radial-gradient(ellipse 70% 60% at 80% 0%, rgba(47, 125, 60, 0.55), transparent 70%),
    var(--outline);
}
.shot-wide { margin-bottom: 40px; }
.modes { display: grid; gap: 16px; }
.mode {
  position: relative;
  padding: 24px 22px 26px;
  border-radius: var(--radius);
  background: rgba(255, 249, 232, 0.05);
  box-shadow: inset 0 0 0 1px var(--line);
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease);
}
.mode h3 {
  font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; line-height: 1.15;
  margin: 14px 0 8px; color: var(--cream);
}
.mode p { color: var(--text-mute); }
.mode-icon {
  display: inline-grid; place-items: center; width: 48px; height: 48px; border-radius: 14px;
  background: var(--gold); color: var(--outline);
  box-shadow: 0 4px 0 var(--gold-edge);
}
.mode-icon svg { width: 26px; height: 26px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mode:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 2px var(--gold); }
}
@media (min-width: 640px) { .modes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) {
  .modes { grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .shot-wide { margin-bottom: 56px; }
}

/* ---------- Clips ---------- */
.section-clips {
  background:
    radial-gradient(ellipse 60% 70% at 75% 50%, rgba(255, 197, 42, 0.16), transparent 70%),
    linear-gradient(180deg, var(--night), #07131A);
}
.clips-grid { display: grid; gap: 48px; align-items: center; }
.clips-copy .lead { margin-top: 16px; }
.clips-media { display: grid; place-items: center; }
.phone {
  position: relative;
  width: min(78vw, 300px);
  padding: 10px;
  border-radius: 40px;
  background: #0E1512;
  box-shadow:
    inset 0 0 0 2px #2B3A33,
    0 0 0 3px var(--gold-lo),
    0 14px 0 rgba(0, 0, 0, 0.5),
    0 30px 60px rgba(0, 0, 0, 0.45);
  transform: rotate(2deg);
}
.phone video {
  width: 100%; aspect-ratio: 9 / 16; object-fit: cover;
  border-radius: 30px; background: #000;
}
.sound-btn {
  position: absolute; right: 22px; bottom: 22px;
  display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%; border: 0;
  background: var(--gold); color: var(--outline); cursor: pointer;
  box-shadow: 0 4px 0 var(--gold-edge);
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease);
}
.sound-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--gold-edge); }
.sound-btn .icon { width: 26px; height: 26px; }
.sound-btn .icon-on { display: none; }
.sound-btn[aria-pressed="true"] .icon-on { display: block; }
.sound-btn[aria-pressed="true"] .icon-muted { display: none; }
@media (min-width: 1000px) {
  .clips-grid { grid-template-columns: 1.1fr 0.9fr; gap: 64px; }
  .phone { width: 320px; }
}

/* ---------- Press ---------- */
.section-press { background: var(--outline); }
.press-card {
  position: relative;
  background: var(--cream-2);
  color: var(--outline);
  border-radius: var(--radius-lg);
  padding: 32px 20px;
  box-shadow: 0 10px 0 rgba(0, 0, 0, 0.45);
  background-image: repeating-linear-gradient(0deg, rgba(11, 46, 24, 0.05) 0 1px, transparent 1px 30px);
}
.press-card .display { color: var(--outline); text-shadow: none; }
.press-card .lead { color: #2C3B2F; margin-top: 14px; }
.press-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 32px; margin-top: 28px; }
.press-contact { display: grid; gap: 2px; }
.press-label { font-weight: 800; font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; color: #3B4A3E; }
.press-contact a { color: var(--outline); font-weight: 800; font-size: 1.12rem; text-decoration-thickness: 2px; word-break: break-word; }
.press-contact a:hover { color: var(--rim); }
.press-card :focus-visible { outline-color: var(--outline); }
@media (min-width: 1000px) { .press-card { padding: 56px; } }

/* ---------- Final CTA ---------- */
.section-final { border-top: 3px solid rgba(255, 255, 255, 0.18); }
.final-grid { display: grid; gap: 40px; align-items: center; }
.final-copy .lead { margin-top: 14px; }
.final-shot { transform: rotate(1.5deg); }
@media (min-width: 1000px) { .final-grid { grid-template-columns: 1fr 1fr; gap: 64px; } }

/* ---------- Footer ---------- */
.site-footer { background: #04120A; border-top: 1px solid var(--line); padding-block: 48px 40px; font-size: 0.98rem; }
.footer-grid { display: grid; gap: 28px; }
.footer-brand img { width: 180px; }
.footer-name { margin-top: 14px; font-weight: 800; }
.footer-tagline { color: var(--text-mute); }
.footer-status { color: var(--text-mute); margin-top: 8px; max-width: 46ch; }
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 4px 22px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--cream); font-weight: 700; }
.footer-nav a:hover { color: var(--gold); }
@media (min-width: 1000px) {
  .footer-grid { grid-template-columns: 1fr auto; align-items: end; }
}

/* ---------- Legal pages & 404 ---------- */
.legal { padding-block: 48px 80px; background: var(--outline); }
.legal .wrap { max-width: 780px; }
.legal h1 { font-size: clamp(2rem, 6vw, 2.8rem); margin-bottom: 8px; }
.legal .meta { color: var(--text-mute); margin-bottom: 24px; }
.legal h2 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; margin: 40px 0 10px; color: var(--cream); }
.legal h3 { font-weight: 800; font-size: 1.08rem; margin: 26px 0 6px; }
.legal p, .legal li { color: var(--text-mute); }
.legal p + p { margin-top: 10px; }
.legal ul { list-style: disc; padding-left: 1.3em; margin-top: 8px; }
.legal address { font-style: normal; color: var(--text-mute); }
.legal a { color: var(--gold); word-break: break-word; }
.lang-switch { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 8px 0 8px; }
.lang-switch a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 800; }
.lang-block + .lang-block { margin-top: 64px; padding-top: 40px; border-top: 2px dashed rgba(255, 255, 255, 0.16); }
.back-link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 800; }

.notfound { min-height: 70vh; display: grid; align-items: center; padding-block: 64px; }
.notfound .display { font-size: clamp(2.4rem, 9vw, 4.5rem); }
.notfound .lead { margin-block: 16px 28px; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.sound-btn[hidden] { display: none; }