/* Eén donker thema, weinig knoppen aan de vormgeving: kleuren, ruimte en rondingen staan
   hieronder als variabelen. Wil je de site later een andere look geven, dan is dit blok
   meestal het enige wat je aanraakt. */
:root {
  --achtergrond: #10141c;
  --vlak: #171d28;
  --vlak-rand: #263042;
  --tekst: #e8edf5;
  --tekst-zacht: #a3b0c4;
  --accent: #ffcb2e;
  --accent-tekst: #1a1408;
  --groen: #46c07a;
  --amber: #f2b134;
  --grijs: #7c8aa1;
  --breedte: 1080px;
  --ronding: 14px;
  --schaduw: 0 10px 30px rgba(0, 0, 0, .35);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

.omhulsel { width: min(100% - 2.5rem, var(--breedte)); margin-inline: auto; }

a { color: var(--accent); }
a:hover { color: #ffdd77; }

img { max-width: 100%; height: auto; }

h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.75rem); }
h3 { font-size: 1.15rem; }

code {
  background: #0b0f16; border: 1px solid var(--vlak-rand); border-radius: 6px;
  padding: .1em .35em; font-size: .9em;
}

blockquote {
  margin: 1rem 0; padding: .6rem 1rem; border-left: 3px solid var(--accent);
  background: var(--vlak); color: var(--tekst-zacht); border-radius: 0 8px 8px 0;
}

hr { border: 0; border-top: 1px solid var(--vlak-rand); margin: 2rem 0; }

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

/* Wel in de code, niet in beeld: koppen die de plaat al draagt, maar die een schermlezer en een
   zoekmachine nodig hebben om te weten waar een pagina over gaat. */
.verborgen {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* De site heeft bewust geen menubalk: de projectknoppen op de home zíjn de navigatie. Op een
   projectpagina blijft alleen deze terugweg over — zonder die link kom je vanaf een gedeelde
   projectlink nergens anders naartoe. */
.terug {
  display: inline-block; margin-top: 1.75rem; text-decoration: none;
  color: var(--tekst-zacht); font-size: .9rem;
}
.terug:hover { color: var(--accent); }

/* ---- Held (intro) ---- */
.held { padding: clamp(2.5rem, 8vw, 5rem) 0 1rem; }
.held h1 { margin-bottom: .25em; }
.ondertitel { color: var(--tekst-zacht); font-size: clamp(1.05rem, 2.2vw, 1.3rem); margin: 0 0 1.5rem; }
.intro { max-width: 62ch; color: var(--tekst-zacht); }
.intro strong { color: var(--tekst); }

/* ---- Projectkaarten ---- */
/* Projecten staan per generatie gebundeld; elke groep heeft een eigen kop erboven. */
.projecten { padding: 2.5rem 0 1rem; }
.projecten h2 { margin: 2.75rem 0 1.25rem; }
.projecten h2:first-child { margin-top: 0; }
.kaarten {
  display: grid; gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.kaart {
  display: flex; flex-direction: column; overflow: hidden; text-decoration: none;
  color: inherit; background: var(--vlak); border: 1px solid var(--vlak-rand);
  border-radius: var(--ronding); box-shadow: var(--schaduw);
  transition: transform .15s ease, border-color .15s ease;
}
.kaart:hover { transform: translateY(-3px); border-color: var(--accent); color: inherit; }

/* De plaat ís de kaart: 4:3, en de titel van het spel staat er zelf al op. Alleen de badge komt
   er nog overheen. Zonder plaat blijft de projectkleur over mét de naam erin, zodat een nieuw
   project geen leeg vlak is. */
.kaart-plaat {
  display: flex; align-items: center; justify-content: center; position: relative;
  aspect-ratio: 4 / 3; background-size: cover; background-position: center;
  background-color: var(--kaartkleur, #3b4a63);
}
.kaart--zonderplaat .kaart-plaat {
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--kaartkleur) 85%, #000) 0%, color-mix(in srgb, var(--kaartkleur) 45%, #000) 100%);
}
.kaart-naam { font-size: 1.35rem; font-weight: 700; text-align: center; padding: 0 1rem; }

/* De badge ligt op de plaat en moet dus leesbaar blijven op een lichte én een donkere
   afbeelding. Vandaar een eigen ondergrond in plaats van alleen de rand. */
.kaart-plaat .status,
.projectheld .status {
  position: absolute; left: .85rem; bottom: .85rem;
  background: rgba(8, 11, 16, .82); border-color: transparent;
  backdrop-filter: blur(4px);
}

/* Het percentage staat tegenover de badge, de balk ligt langs de onderrand van de plaat. */
.kaart-pct {
  position: absolute; right: .85rem; bottom: .85rem;
  font-size: .78rem; font-weight: 700; font-variant-numeric: tabular-nums;
  padding: .25rem .55rem; border-radius: 999px;
  background: rgba(8, 11, 16, .82); color: var(--tekst); backdrop-filter: blur(4px);
}
.kaart-balk {
  position: absolute; left: 0; right: 0; bottom: 0; height: 5px;
  background: rgba(8, 11, 16, .55);
}
.kaart-balk > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--amber), var(--accent));
}
/* Afgerond = groen, dezelfde kleur als de badge "Voltooid". Zo zeggen kleur en label hetzelfde. */
.kaart-balk.is-af > i,
.balk.is-af > i { background: linear-gradient(90deg, #2f9c62, var(--groen)); }

/* ---- Status ---- */
.status {
  display: inline-block; flex: none; font-size: .78rem; font-weight: 700; letter-spacing: .03em;
  text-transform: uppercase; padding: .25rem .6rem; border-radius: 999px;
  border: 1px solid currentColor;
}
.is-voltooid { color: var(--groen); }
.is-bezig { color: var(--amber); }
.is-gepland { color: var(--grijs); }

/* ---- Voortgang ---- */
.voortgang { margin-top: 1rem; display: grid; gap: .85rem; }
.voortgang-rij { display: block; }
.voortgang-kop {
  display: flex; justify-content: space-between; font-size: .82rem;
  color: var(--tekst-zacht); margin-bottom: .35rem;
}
.voortgang-pct { color: var(--tekst); font-weight: 700; font-variant-numeric: tabular-nums; }
.balk { height: 8px; background: #0b0f16; border: 1px solid var(--vlak-rand); border-radius: 999px; overflow: hidden; }
.balk > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--amber), var(--accent));
}

/* ---- Knoppen ---- */
.knop {
  display: inline-block; text-decoration: none; border-radius: 10px; font-weight: 600;
  background: var(--accent); color: var(--accent-tekst); padding: .7rem 1.1rem;
  border: 1px solid transparent; transition: filter .15s ease;
}
.knop:hover { filter: brightness(1.08); color: var(--accent-tekst); }
.knop--klein { padding: .4rem .8rem; font-size: .9rem; }
/* Discord in zijn eigen kleur: dit is de enige knop op de site die niet naar een download
   wijst, en die moet je als bezoeker meteen als "hier meld je je" herkennen. */
.knop--discord { background: #5865f2; color: #fff; padding: .8rem 1.4rem; font-size: 1.02rem; }
.knop--discord:hover { color: #fff; }
.knop--download { display: block; }
.knop-label { display: block; }
.knop-sub { display: block; font-weight: 400; font-size: .82rem; opacity: .8; }
.knoppen { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }
.downloads { display: grid; gap: .6rem; }

/* ---- Meedoen ---- */
.meedoen { padding: 3rem 0; }
.meedoen .omhulsel {
  background: var(--vlak); border: 1px solid var(--vlak-rand); border-radius: var(--ronding);
  padding: clamp(1.5rem, 4vw, 2.5rem);
}
.meedoen-tekst { color: var(--tekst-zacht); max-width: 62ch; }

/* ---- Projectpagina ---- */
/* De bronplaat is 4:3 (voor de kaarten); hier snijden we hem tot 16:9 zodat hij bovenaan de
   pagina niet het halve scherm inneemt. object-fit-gedrag komt van background-size: cover. */
.projectheld {
  margin: 1rem 0 2rem; border-radius: var(--ronding); overflow: hidden;
  aspect-ratio: 16 / 9; max-height: 420px; position: relative;
  display: flex; align-items: center; justify-content: center;
  background-size: cover; background-position: center;
  background-color: var(--kaartkleur, #3b4a63); border: 1px solid var(--vlak-rand);
}
.projectheld--zonderplaat {
  background-image: linear-gradient(135deg, color-mix(in srgb, var(--kaartkleur) 85%, #000) 0%, color-mix(in srgb, var(--kaartkleur) 40%, #000) 100%);
}
.projectheld-naam { font-size: clamp(1.6rem, 4vw, 2.4rem); font-weight: 700; }

/* Wisselen tussen de gewone uitvoering en een speciale editie. Twee knoppen naast elkaar in
   één omlijsting, zodat het als één keuze leest en niet als twee losse acties. */
.wissel {
  display: inline-flex; gap: .25rem; margin: 0 0 1.75rem;
  background: var(--vlak); border: 1px solid var(--vlak-rand); border-radius: 999px; padding: .3rem;
}
.wisselknop {
  border: 0; background: none; color: var(--tekst-zacht); font: inherit; font-weight: 600;
  padding: .5rem 1.1rem; border-radius: 999px; cursor: pointer;
}
.wisselknop:hover { color: var(--tekst); }
.wisselknop.is-actief { background: var(--accent); color: var(--accent-tekst); }

/* Plaat links, Voortgang en Downloads rechts ernaast. De blokken verdelen samen precies de
   hoogte van de plaat, zodat de drie boven- en onderrand gelijk liggen. Passen ze niet, dan
   groeit de rij mee en blijft alleen de bovenrand uitgelijnd. */
.projectkop {
  display: grid; gap: 1.5rem; align-items: stretch; margin-bottom: 2rem;
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
}
.projectkop .projectheld { margin: 0; align-self: stretch; height: 100%; }
/* space-between i.p.v. uitrekken: de blokken houden hun eigen hoogte en verdelen de ruimte
   ertussen. Zo liggen de bovenrand van het eerste en de onderrand van het laatste blok gelijk
   met de plaat, zonder dat de blokken vanbinnen hol worden. */
.projectkop .projectzij { align-content: space-between; position: static; }
@media (max-width: 800px) {
  .projectkop { grid-template-columns: 1fr; }
  .projectkop .projectzij { align-content: start; }
}
.projecttekst { padding-bottom: 3rem; }
.projecttekst h2 { margin-top: 2rem; }
.projecttekst h2:first-child { margin-top: 0; }
.projecttekst { color: var(--tekst-zacht); }
.projecttekst strong { color: var(--tekst); }
/* In-line afbeeldingen in de projecttekst: `![omschrijving](afbeeldingen/kaart.png)`.
   Schermvullend is te veel, dus ze krijgen dezelfde omlijsting als de rest van de pagina. */
.projecttekst img, .intro img, .meedoen-tekst img {
  display: block; margin: 1.5rem 0; border-radius: var(--ronding);
  border: 1px solid var(--vlak-rand);
}
.projectzij { display: grid; gap: 1rem; position: sticky; top: 1.5rem; }
@media (max-width: 800px) { .projectzij { position: static; } }
.blok {
  background: var(--vlak); border: 1px solid var(--vlak-rand);
  border-radius: var(--ronding); padding: 1.15rem 1.25rem;
}
.blok h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .05em; color: var(--tekst-zacht); }
.klein { font-size: .8rem; color: var(--tekst-zacht); margin: .6rem 0 0; }

/* ---- Meldingen ---- */
.laden, .leeg, .fout { color: var(--tekst-zacht); }
.fout { color: #ff9a8a; }
.fout-blok { padding: 4rem 0; }

/* ---- Voet ---- */
.voet { border-top: 1px solid var(--vlak-rand); padding: 2rem 0 3rem; color: var(--tekst-zacht); font-size: .9rem; }
.voet p { max-width: 70ch; margin: 0; }

/* ---- Pokédex ---- */
/* De hele dex is één opgehaald bestand; zoeken en filteren gebeurt in de pagina zelf. */
.dexbalk { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin: 1.5rem 0; }
.dexbalk input {
  flex: 1 1 260px; padding: .7rem .9rem; border-radius: 10px; font: inherit;
  background: #0d1219; color: var(--tekst); border: 1px solid var(--vlak-rand);
}
.dexbalk input:focus { border-color: var(--accent); }
.dexbalk .wissel { margin: 0; }

.dexlijst {
  display: grid; gap: .6rem; padding-bottom: 3rem;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
}
.dexknop {
  display: flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--tekst);
  background: var(--vlak); border: 1px solid var(--vlak-rand); border-radius: 10px;
  padding: .6rem .75rem; transition: border-color .15s ease;
}
.dexknop:hover { border-color: var(--accent); color: var(--tekst); }
.dexnr { color: var(--tekst-zacht); font-variant-numeric: tabular-nums; font-size: .85rem; flex: none; }
.dexnr--groot { font-size: 1rem; }
.dexnaam { font-weight: 600; }
.dextypen { margin-left: auto; display: flex; gap: .3rem; }
.type {
  font-size: .7rem; text-transform: uppercase; letter-spacing: .04em; padding: .15rem .45rem;
  border-radius: 999px; border: 1px solid var(--vlak-rand); color: var(--tekst-zacht);
}

.dexkop { margin: 1.5rem 0; }
.dexkop h1 { margin: .2em 0 .3em; }
.dexkop .dextypen { margin-left: 0; }
.dexbeschrijving { margin-bottom: 1.5rem; }
.dexbeschrijving p { margin: 0; }
.dexmeta { color: var(--tekst-zacht); font-size: .85rem; margin-bottom: .5rem !important; }

.dexdetail {
  display: grid; gap: 1rem; padding-bottom: 3rem; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.blok--breed { grid-column: 1 / -1; }

.stats { display: grid; gap: .5rem; }
.statrij { display: grid; grid-template-columns: 8.5rem 2.5rem 1fr; align-items: center; gap: .5rem; font-size: .9rem; }
.statwaarde { text-align: right; font-variant-numeric: tabular-nums; color: var(--tekst); }
.statrij .balk { height: 7px; }

.evolijst { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; }
.evolijst li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; }
.evohoe { color: var(--tekst-zacht); font-size: .85rem; text-align: right; }

.aanvallen { width: 100%; border-collapse: collapse; font-size: .92rem; }
.aanvallen th { text-align: left; color: var(--tekst-zacht); font-weight: 600; font-size: .8rem;
  text-transform: uppercase; letter-spacing: .04em; padding-bottom: .4rem; }
.aanvallen td { padding: .35rem 0; border-top: 1px solid var(--vlak-rand); }
.aanvallen td:first-child { width: 4rem; color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }

/* Ingang naar de dex, onder de projecten. */
.dexlink { margin: 2.5rem 0 0; }

/* Aanvalstabel: de uitleg staat onder de naam, niet in een eigen kolom — anders wordt de tabel
   op een telefoon onleesbaar smal. */
.aanvaluitleg { display: block; color: var(--tekst-zacht); font-size: .82rem; line-height: 1.4; }
.aanvallen td.kracht { width: 4.5rem; text-align: right; font-variant-numeric: tabular-nums; }
.aanvallen th:last-child { text-align: right; }