/* ─────────────────────────────────────────────────────────────────────────
   goodgamersports.com — the root marketing page.

   A hand-written, no-build stylesheet (the games use Tailwind v4, but this one
   page ships as plain static files). The token values below are COPIED from
   @goodgamer/core's tokens/tokens.json — that file is the source of truth; keep
   these in sync if the brand palette changes. See src/ui/theme.generated.css.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  /* Palette — copied from tokens/tokens.json (source of truth). */
  --ink: #0b0320;
  --indigo: #2b0a5e;
  --aqua: #00f5d4; /* brand primary */
  --violet: #7209b7; /* brand secondary */
  --pink: #ff5da2;
  --gold: #ffd36e;
  --white: #ffffff;
  --on-primary: var(--indigo);
  --text-muted: rgba(255, 255, 255, 0.7);
  --text-faint: rgba(255, 255, 255, 0.55);
  --border: rgba(255, 255, 255, 0.12);
  --surface-raised: rgba(255, 255, 255, 0.08);

  --radius-md: 12px;
  --radius-lg: 16px;

  /* The whole app is plain monospace (matches the in-game font). */
  --font: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* The wordmark glow used across the games' menu chrome (see BrandHeader). */
  --wordmark-shadow: 1px 1px 0 var(--violet), 0 0 12px rgba(43, 10, 94, 0.7);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  min-height: 100%;
}

body {
  font-family: var(--font);
  color: var(--white);
  /* An indigo glow at the top fading to ink — the same ground the logo art sits
     on, so the square logo blends seamlessly into the page. */
  background: radial-gradient(ellipse 120% 90% at 50% 0%, var(--indigo), var(--ink) 60%) no-repeat;
  background-color: var(--ink);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Column layout so the footer sits below the centered hero, never over it. */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 4vw, 2.25rem);
  padding: clamp(1.5rem, 5vw, 3rem) 1rem;
  text-align: center;
}

/* Brand stack: the transparent vapor sun behind, the live wordmark on top, the
   sun's equator centered on the wordmark (matches the games' MainMenuShell). */
.brand {
  position: relative;
  width: clamp(250px, 60vw, 420px);
}

.brand-sun {
  display: block;
  width: 100%;
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 44px rgba(255, 120, 80, 0.45));
}

.wordmark {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8%;
  font-size: clamp(1.9rem, 9vw, 3.1rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: 0.5px;
  /* The games' wordmark glow (menuTitleCls): a hard violet offset + soft indigo halo. */
  text-shadow:
    3px 3px 0 var(--violet),
    0 0 18px rgba(43, 10, 94, 0.7);
}

.tagline {
  margin: 0;
  max-width: 34ch;
  font-size: clamp(0.95rem, 3.4vw, 1.15rem);
  line-height: 1.55;
  color: var(--text-muted);
}

.tagline strong {
  color: var(--aqua);
  font-weight: 700;
}

/* Titles: the live Soccer card, then the coming-soon grid. */
.titles {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: min(560px, 100%);
}

/* The live card stays a comfortable single-column width. */
.titles > .title-card {
  max-width: 420px;
}

.title-card {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  padding: clamp(1.25rem, 5vw, 1.75rem);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(2px);
}

.title-card h2 {
  margin: 0;
  font-size: clamp(1.5rem, 6vw, 2rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-shadow: var(--wordmark-shadow);
}

.title-card p {
  margin: 0;
  font-size: clamp(0.85rem, 3vw, 0.95rem);
  color: var(--text-muted);
}

.play {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.25rem;
  padding: 0.7rem 1.6rem;
  font-family: var(--font);
  font-size: clamp(0.95rem, 3.4vw, 1.05rem);
  font-weight: 800;
  letter-spacing: 0.5px;
  text-decoration: none;
  color: var(--on-primary);
  background: var(--aqua);
  border-radius: var(--radius-md);
  box-shadow: 0 0 0 rgba(0, 245, 212, 0);
  transition:
    transform 120ms ease,
    box-shadow 160ms ease,
    filter 120ms ease;
}

.play:hover,
.play:focus-visible {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow: 0 8px 28px rgba(0, 245, 212, 0.35);
  outline: none;
}

.play:active {
  transform: translateY(0);
}

.coming {
  margin: 0.5rem 0 0;
  font-size: clamp(0.75rem, 2.8vw, 0.85rem);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* Coming-soon titles: a responsive grid of dimmed, non-interactive cards. */
.soon-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
}

@media (max-width: 480px) {
  .soon-grid {
    grid-template-columns: 1fr;
  }
}

.soon-card {
  gap: 0.5rem;
  padding: clamp(1rem, 4vw, 1.35rem);
  opacity: 0.72;
}

.soon-card h2 {
  font-size: clamp(1.15rem, 4.5vw, 1.4rem);
  text-shadow: none;
}

.soon-ico {
  margin-right: 0.15em;
  font-size: 1.1em;
}

.soon-pill {
  display: inline-block;
  margin-top: 0.35rem;
  padding: 0.3rem 0.85rem;
  font-size: 0.7rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-faint);
  border: 1px solid var(--border);
  border-radius: 999px;
}

footer {
  padding: 1.25rem 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.5px;
  color: var(--text-faint);
  text-align: center;
}

footer a {
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .play {
    transition: none;
  }
}