/* Club Dynasty — site styles
   Tokens taken from the app's DESIGN.md so the site and the game match.
   Fonts are self-hosted: this page makes zero external requests. */

@font-face {
  font-family: "Lora";
  src: url("fonts/Lora_700Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("fonts/IBMPlexSans_400Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Sans";
  src: url("fonts/IBMPlexSans_600SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/IBMPlexMono_500Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Plex Mono";
  src: url("fonts/IBMPlexMono_600SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Surfaces */
  --canvas: #edeae2;
  --page: #f6f3ec;
  --sheet: #ffffff;
  --hairline: #e6e1d3;

  /* Ink. --ink-soft is a darkened caption-gray: the app's #8A8578 only
     reaches 2.8:1 on --canvas, well under the 4.5:1 body-text floor. */
  --ink: #2a2620;
  --ink-soft: #5f5a50;
  --ink-faint: #8a8578;

  /* Pitch */
  --pitch: #1f5c3d;
  --deep-pitch: #173f2a;
  --night-pitch: #0d2618;

  /* Accents, each with one meaning */
  --gold: #b8863b;
  --gold-bright: #d3a03a;
  /* Darker gold from the app icon's own gradient. Plain --gold only reaches
     2.9:1 on the cream surfaces, too low for label-sized text. */
  --gold-deep: #7e5518;
  --ledger-blue: #3d6ea0;

  /* Type scale, 1.25 ratio */
  --text-xs: 0.8125rem;
  --text-sm: 0.9375rem;
  --text-base: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: 1.75rem;
  --text-2xl: clamp(2rem, 4vw, 2.75rem);
  --display: clamp(3rem, 11vw, 5.5rem);

  --measure: 68ch;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);

  --z-base: 1;
  --z-sticky: 100;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

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

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: "Plex Sans", system-ui, -apple-system, sans-serif;
  font-size: var(--text-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  font-family: "Lora", Georgia, serif;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.02em;
  text-wrap: balance;
  margin: 0;
}

p {
  text-wrap: pretty;
  margin: 0;
}

a {
  color: var(--pitch);
  text-underline-offset: 0.2em;
  text-decoration-thickness: 1px;
}

a:hover {
  color: var(--deep-pitch);
}

img {
  max-width: 100%;
  display: block;
}

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

.wrap {
  width: min(100% - 2.5rem, 68rem);
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--sheet);
  color: var(--ink);
  padding: 0.75rem 1rem;
  z-index: var(--z-sticky);
  border-radius: 0 0 var(--radius-sm) 0;
}

.skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------------- Hero
   Drenched deep pitch, mirroring the app's own title screen. */

.hero {
  background:
    radial-gradient(120% 90% at 50% 0%, #2a6446 0%, var(--deep-pitch) 45%, var(--night-pitch) 100%);
  color: var(--page);
  padding: clamp(3.5rem, 10vw, 7rem) 0 clamp(3rem, 8vw, 5.5rem);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Faint centre circle, the way the app icon carries a pitch marking. */
.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -34vw;
  width: 68vw;
  height: 68vw;
  transform: translateX(-50%);
  border: 1px solid rgba(246, 243, 236, 0.09);
  border-radius: 50%;
  pointer-events: none;
}

.hero > * {
  position: relative;
  z-index: var(--z-base);
}

.hero-icon {
  width: 88px;
  height: 88px;
  margin: 0 auto 1.75rem;
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(5, 18, 11, 0.45);
}

.hero h1 {
  font-size: var(--display);
  letter-spacing: -0.035em;
  color: #ffffff;
  margin-bottom: 1.25rem;
}

.hero-rule {
  width: 76px;
  height: 3px;
  background: var(--gold-bright);
  border: 0;
  margin: 0 auto 1.5rem;
}

.hero-pitch {
  font-size: var(--text-lg);
  line-height: 1.5;
  max-width: 34ch;
  margin: 0 auto 2.25rem;
  color: rgba(246, 243, 236, 0.93);
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  justify-content: center;
  font-family: "Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(246, 243, 236, 0.72);
}

.hero-status {
  margin-top: 2.5rem;
}

/* De status was een dood label ("In development"). Nu is het de eerste
   ingang naar de test, dus hij moet zich als knop gedragen: een raakvlak
   van minstens 44px hoog en een zichtbare hoverstand. */
.hero-status a {
  display: inline-block;
  padding: 0.8rem 1.4rem;
  border: 1px solid rgba(211, 160, 58, 0.55);
  border-radius: var(--radius-md);
  font-family: "Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-decoration: none;
  transition:
    background 220ms var(--ease-out-quint),
    border-color 220ms var(--ease-out-quint);
}

.hero-status a:hover,
.hero-status a:focus-visible {
  background: rgba(211, 160, 58, 0.14);
  border-color: var(--gold-bright);
}

/* ------------------------------------------------------- Closed test call
   Het zwaarste blok op de pagina, want het is nu de enige handeling die
   ertoe doet. Zelfde diepe grasmat als de hero, zodat het bij elkaar hoort
   en toch los staat van de cremekleurige secties eronder. */

.test-call {
  padding-top: clamp(2.5rem, 6vw, 4rem);
  padding-bottom: 0;
}

.test-panel {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(211, 160, 58, 0.3);
  background:
    radial-gradient(120% 120% at 10% 0%, #2a6446 0%, var(--deep-pitch) 52%, var(--night-pitch) 100%);
  color: var(--page);
  padding: clamp(1.75rem, 5vw, 3.25rem);
  box-shadow: 0 18px 48px rgba(5, 18, 11, 0.18);
}

/* Dezelfde middencirkel als in de hero, hier uit de rechterbenedenhoek,
   zodat het blok textuur heeft zonder dat er een afbeelding bij hoeft. */
.test-panel::after {
  content: "";
  position: absolute;
  right: -16%;
  bottom: -58%;
  width: 46rem;
  height: 46rem;
  border: 1px solid rgba(246, 243, 236, 0.07);
  border-radius: 50%;
  pointer-events: none;
}

.test-panel > * {
  position: relative;
  z-index: var(--z-base);
}

.test-kicker {
  font-family: "Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 0.9rem;
}

.test-panel h2 {
  font-size: var(--text-2xl);
  letter-spacing: -0.02em;
  color: #ffffff;
  max-width: 30ch;
  margin-bottom: 1.1rem;
}

.test-lede {
  font-size: var(--text-base);
  line-height: 1.6;
  max-width: 58ch;
  color: rgba(246, 243, 236, 0.88);
  margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.test-steps {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
  margin: 0 0 clamp(1.75rem, 4vw, 2.5rem);
  padding: 0;
}

.test-step {
  display: flex;
  flex-direction: column;
  background: rgba(246, 243, 236, 0.05);
  border: 1px solid rgba(246, 243, 236, 0.11);
  border-radius: var(--radius-md);
  padding: 1.25rem 1.25rem 1.4rem;
}

.test-num {
  display: block;
  font-family: "Plex Mono", ui-monospace, monospace;
  font-weight: 500;
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  margin-bottom: 0.5rem;
}

.test-step h3 {
  font-size: var(--text-lg);
  line-height: 1.25;
  color: #ffffff;
  margin-bottom: 0.5rem;
}

.test-step p {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: rgba(246, 243, 236, 0.82);
  /* Duwt de knop naar de onderkant, zodat de drie knoppen op één lijn
     staan ook als de teksten niet even lang zijn. */
  margin-bottom: auto;
  padding-bottom: 1.1rem;
}

/* Goud vlak met donkere inkt erop: 8,4:1. Omgekeerd (goud op donker) zou
   bij knopformaat net te mager zijn voor de belangrijkste handeling. */
.test-cta {
  align-self: flex-start;
  font-family: "Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: var(--text-sm);
  background: var(--gold-bright);
  color: var(--night-pitch);
  text-decoration: none;
  padding: 0.8rem 1.2rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--gold-bright);
  transition:
    background 220ms var(--ease-out-quint),
    transform 220ms var(--ease-out-quint);
}

.test-cta:hover,
.test-cta:focus-visible {
  background: #e0ae49;
  transform: translateY(-1px);
}

/* Stap 2 en 3 zijn dezelfde handeling in een lagere toonhoogte: wie hier
   is, komt uit stap 1. Drie gouden knoppen naast elkaar zou niemand
   vertellen waar hij moet beginnen. */
.test-cta-quiet {
  background: transparent;
  color: var(--gold-bright);
  border-color: rgba(211, 160, 58, 0.5);
}

.test-cta-quiet:hover,
.test-cta-quiet:focus-visible {
  background: rgba(211, 160, 58, 0.14);
  border-color: var(--gold-bright);
}

.test-note {
  font-size: var(--text-sm);
  line-height: 1.6;
  max-width: 62ch;
  color: rgba(246, 243, 236, 0.7);
  margin: 0;
}

/* --------------------------------------------------------------- Layout */

section {
  padding: clamp(3.5rem, 8vw, 6rem) 0;
}

.section-head {
  max-width: var(--measure);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.section-head h2 {
  font-size: var(--text-2xl);
  margin-bottom: 0.9rem;
}

.section-head p {
  color: var(--ink-soft);
  max-width: 60ch;
}

/* ------------------------------------------------------- The season loop
   A real five-step sequence, so the numbers carry information. */

.loop {
  background: var(--page);
  border-block: 1px solid var(--hairline);
}

/* Column rules, the way a broadsheet separates columns. Items carry their own
   top rule, so a row that does not fill leaves blank canvas rather than a hole. */
.loop-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11.25rem, 1fr));
  column-gap: 1.75rem;
}

.loop-steps li {
  border-top: 2px solid var(--ink);
  padding: 1.25rem 0 1.75rem;
}

.loop-num {
  font-family: "Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: var(--text-xs);
  color: var(--gold-deep);
  letter-spacing: 0.1em;
  display: block;
  margin-bottom: 0.85rem;
}

.loop-steps h3 {
  font-size: var(--text-lg);
  margin-bottom: 0.5rem;
}

.loop-steps p {
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* ---------------------------------------------------------- Screenshots */

.shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: clamp(1.75rem, 4vw, 2.75rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.shot figure {
  margin: 0;
}

.phone {
  background: var(--night-pitch);
  padding: 9px;
  border-radius: 30px;
  box-shadow:
    0 1px 2px rgba(42, 38, 32, 0.18),
    0 14px 34px rgba(42, 38, 32, 0.17);
}

.phone img {
  border-radius: 22px;
  width: 100%;
  height: auto;
}

.shot figcaption {
  margin-top: 1rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.shot figcaption strong {
  display: block;
  color: var(--ink);
  font-weight: 600;
  margin-bottom: 0.15rem;
}

/* ------------------------------------------------------------- Facts row */

.facts {
  background: var(--deep-pitch);
  color: var(--page);
}

.facts .section-head h2 {
  color: #ffffff;
}

.facts .section-head p {
  color: rgba(246, 243, 236, 0.82);
}

.fact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 2rem 2.5rem;
}

.fact-list h3 {
  font-size: var(--text-lg);
  color: #ffffff;
  margin-bottom: 0.4rem;
}

.fact-list p {
  color: rgba(246, 243, 236, 0.82);
  font-size: var(--text-sm);
}

.fact-key {
  font-family: "Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--gold-bright);
  display: block;
  margin-bottom: 0.7rem;
}

/* ---------------------------------------------------------------- Support */

.support-card {
  background: var(--sheet);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-lg);
  padding: clamp(1.75rem, 4vw, 2.75rem);
  max-width: 46rem;
}

.support-card h2 {
  font-size: var(--text-xl);
  margin-bottom: 0.75rem;
}

.support-card p {
  color: var(--ink-soft);
  margin-bottom: 1.5rem;
}

.mail-link {
  display: inline-block;
  font-family: "Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: var(--text-base);
  background: var(--pitch);
  color: #ffffff;
  text-decoration: none;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-md);
  transition: background 220ms var(--ease-out-quint);
}

.mail-link:hover {
  background: var(--deep-pitch);
  color: #ffffff;
}

.support-note {
  margin-top: 1.5rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

/* ------------------------------------------------------------------- Form */

#contact-form {
  margin-top: 1.75rem;
}

.field {
  margin-bottom: 1.15rem;
}

.field label {
  display: block;
  font-family: "Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: 0.45rem;
}

.field input,
.field textarea {
  width: 100%;
  /* Een input heeft van zichzelf een minimumbreedte van ongeveer twintig
     tekens. In een flex- of rooster-context wint die van width:100%, en dan
     schuift het formulier op een smalle telefoon zijwaarts weg. */
  min-width: 0;
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--ink);
  background: var(--page);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  transition: border-color 160ms var(--ease-out-quint), background 160ms var(--ease-out-quint);
}

.field textarea {
  resize: vertical;
  min-height: 8rem;
}

.field input:focus,
.field textarea:focus {
  outline: none;
  background: var(--sheet);
  border-color: var(--pitch);
  box-shadow: 0 0 0 3px rgba(31, 92, 61, 0.14);
}

/* Honeypot: uit beeld voor mensen, wel invulbaar voor bots. display:none zou
   door sommige bots overgeslagen worden, en clip houdt hem uit de leesvolgorde
   van schermlezers. */
.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

#contact-form button {
  font-family: "Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  background: var(--pitch);
  color: #ffffff;
  border: 0;
  border-radius: var(--radius-md);
  padding: 0.85rem 1.6rem;
  cursor: pointer;
  transition: background 200ms var(--ease-out-quint);
}

#contact-form button:hover:not(:disabled) {
  background: var(--deep-pitch);
}

#contact-form button:disabled {
  opacity: 0.6;
  cursor: progress;
}

.form-status {
  margin-top: 0.9rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
  min-height: 1.4em;
}

.form-status.is-ok {
  color: var(--pitch);
  font-weight: 600;
}

.form-status.is-error {
  color: #8c3626;
  font-weight: 600;
}

/* ----------------------------------------------------------------- Footer */

.site-footer {
  border-top: 1px solid var(--hairline);
  padding: 2.5rem 0 3.5rem;
  font-size: var(--text-sm);
  color: var(--ink-soft);
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: baseline;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}

/* ------------------------------------------------------------ Legal pages */

.legal {
  background: var(--page);
  min-height: 100vh;
}

.legal-head {
  background: var(--deep-pitch);
  color: var(--page);
  padding: clamp(2.5rem, 6vw, 4rem) 0;
}

.legal-head h1 {
  font-size: var(--text-2xl);
  color: #ffffff;
  margin-bottom: 0.6rem;
}

.legal-head p {
  color: rgba(246, 243, 236, 0.82);
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.legal-body {
  padding: clamp(2.5rem, 6vw, 4rem) 0 5rem;
  max-width: var(--measure);
}

.legal-body h2 {
  font-size: var(--text-lg);
  margin: 2.5rem 0 0.75rem;
}

.legal-body h2:first-child {
  margin-top: 0;
}

.legal-body p,
.legal-body li {
  color: var(--ink);
  margin-bottom: 0.9rem;
}

.legal-body ul {
  padding-left: 1.25rem;
}

.back-link {
  display: inline-block;
  margin-bottom: 2rem;
  font-family: "Plex Mono", ui-monospace, monospace;
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Wide table scrolls inside its own box so the page never scrolls sideways. */
.table-scroll {
  overflow-x: auto;
  margin: 1.5rem 0 1.75rem;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-md);
  background: var(--sheet);
}

.legal-body table {
  border-collapse: collapse;
  width: 100%;
  min-width: 34rem;
  font-size: var(--text-sm);
}

.legal-body th,
.legal-body td {
  text-align: left;
  vertical-align: top;
  padding: 0.9rem 1rem;
  border-bottom: 1px solid var(--hairline);
}

.legal-body th {
  font-family: "Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  font-size: var(--text-xs);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--page);
}

.legal-body tbody tr:last-child td {
  border-bottom: 0;
}

.legal-body td {
  margin: 0;
}

/* ------------------------------------------------------------------ Motion
   One orchestrated entrance on the hero. Content is visible by default:
   the animation only moves an already-rendered element. */

@media (prefers-reduced-motion: no-preference) {
  .hero-icon,
  .hero h1,
  .hero-rule,
  .hero-pitch,
  .hero-meta,
  .hero-status {
    animation: rise 900ms var(--ease-out-quint) backwards;
  }
  .hero h1 { animation-delay: 60ms; }
  .hero-rule { animation-delay: 130ms; }
  .hero-pitch { animation-delay: 190ms; }
  .hero-meta { animation-delay: 250ms; }
  .hero-status { animation-delay: 310ms; }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}