* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --inkt: #2b2150;
  --papier: #fdf6e3;
}

body {
  font-family: ui-rounded, "Hiragino Maru Gothic ProN", Quicksand, Comfortaa,
               system-ui, sans-serif;
  background:
    radial-gradient(circle at 15% 20%, #ffe9a8 0 6%, transparent 6.5%),
    radial-gradient(circle at 85% 15%, #ffd3e0 0 5%, transparent 5.5%),
    radial-gradient(circle at 75% 85%, #c9f2ff 0 7%, transparent 7.5%),
    radial-gradient(circle at 10% 80%, #d8ffd0 0 5%, transparent 5.5%),
    linear-gradient(180deg, #a8d8ff 0%, var(--papier) 60%);
  min-height: 100vh;
  color: var(--inkt);
  display: grid;
  place-items: center;
  padding: 24px;
}

main { width: 100%; max-width: 1100px; }

header { text-align: center; margin-bottom: 28px; }

h1 {
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: 1px;
  text-shadow: 3px 3px 0 #fff;
}

.ster { color: #ffb300; -webkit-text-stroke: 1.5px var(--inkt); }

.sub { font-size: clamp(1.05rem, 2.6vw, 1.4rem); margin-top: 6px; opacity: .85; }

.tegels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 22px;
}

.tegel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  min-height: 250px;
  padding: 26px 20px;
  border-radius: 26px;
  border: 4px solid var(--inkt);
  box-shadow: 0 8px 0 var(--inkt);
  text-decoration: none;
  color: var(--inkt);
  text-align: center;
  transition: transform .12s ease, box-shadow .12s ease;
}

.tegel:hover, .tegel:focus-visible { transform: translateY(-4px) rotate(-.5deg); box-shadow: 0 12px 0 var(--inkt); }
.tegel:active { transform: translateY(4px); box-shadow: 0 2px 0 var(--inkt); }

.pudding { background: linear-gradient(160deg, #ffd98a, #ffb74d); }
.doolhof { background: linear-gradient(160deg, #b7e6a1, #6fcf75); }
.helden  { background: linear-gradient(160deg, #c5b3ff, #8e7bff); }

.icoon { font-size: 64px; line-height: 1; filter: drop-shadow(2px 3px 0 rgba(0,0,0,.18)); }

.naam { font-size: 1.45rem; font-weight: 800; }

.uitleg { font-size: 1rem; line-height: 1.35; opacity: .9; }

.speel {
  margin-top: auto;
  background: var(--inkt);
  color: #fff;
  font-weight: 700;
  padding: 10px 22px;
  border-radius: 999px;
  font-size: 1.05rem;
}

footer { text-align: center; margin-top: 30px; font-size: .95rem; opacity: .65; }