/* Bewaar je Snapyard (id.wrongfloor.club): dezelfde vensters, kleuren en letters als het spel (r24 B). */
@font-face { font-family: BC; src: url(fonts/BarlowCondensed-BlackItalic.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: B; src: url(fonts/Barlow-ExtraBold.woff2) format("woff2"); font-weight: 800; font-display: swap; }
@font-face { font-family: B; src: url(fonts/Barlow-Bold.woff2) format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --navy: #13264A;
  --creme: #FFF8EC;
  --goud1: #FFE066;
  --goud2: #FFC21A;
  --goudrand: #C98A00;
  --tekst: #FFFFFF;
  --geel: #FFD23F;
  --rood: #FFB3B3;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: B, system-ui, sans-serif;
  font-weight: 800;
  color: var(--tekst);
  text-align: center;
  background: linear-gradient(165deg, #4BB8FA 0%, #3A86EE 28%, #3A62E0 58%, #4A3CC6 100%) fixed;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  padding: 24px 16px 40px;
  position: relative;
}
/* het patroon van sterren en bliksems uit het spel, licht over de verloopkleur */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  opacity: .11;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%22144%22 height=%22168%22 fill=%22%23fff%22%3E%3Cpath d=%22M26 14h4v4h-4zM22 18h4v4h-4zM26 18h4v4h-4zM30 18h4v4h-4zM14 22h4v4h-4zM18 22h4v4h-4zM22 22h4v4h-4zM26 22h4v4h-4zM30 22h4v4h-4zM34 22h4v4h-4zM38 22h4v4h-4zM18 26h4v4h-4zM22 26h4v4h-4zM26 26h4v4h-4zM30 26h4v4h-4zM34 26h4v4h-4zM22 30h4v4h-4zM26 30h4v4h-4zM30 30h4v4h-4zM18 34h4v4h-4zM22 34h4v4h-4zM30 34h4v4h-4zM34 34h4v4h-4zM18 38h4v4h-4zM34 38h4v4h-4zM94 60h4v4h-4zM98 60h4v4h-4zM102 60h4v4h-4zM90 64h4v4h-4zM94 64h4v4h-4zM98 64h4v4h-4zM86 68h4v4h-4zM90 68h4v4h-4zM94 68h4v4h-4zM86 72h4v4h-4zM90 72h4v4h-4zM94 72h4v4h-4zM98 72h4v4h-4zM102 72h4v4h-4zM94 76h4v4h-4zM98 76h4v4h-4zM90 80h4v4h-4zM94 80h4v4h-4zM90 84h4v4h-4zM38 92h4v4h-4zM42 92h4v4h-4zM46 92h4v4h-4zM34 96h4v4h-4zM42 96h4v4h-4zM50 96h4v4h-4zM34 100h4v4h-4zM42 100h4v4h-4zM50 100h4v4h-4zM34 104h4v4h-4zM42 104h4v4h-4zM50 104h4v4h-4zM38 108h4v4h-4zM42 108h4v4h-4zM46 108h4v4h-4zM116 126h4v4h-4zM112 130h4v4h-4zM116 130h4v4h-4zM120 130h4v4h-4zM104 134h4v4h-4zM108 134h4v4h-4zM112 134h4v4h-4zM116 134h4v4h-4zM120 134h4v4h-4zM124 134h4v4h-4zM128 134h4v4h-4zM108 138h4v4h-4zM112 138h4v4h-4zM116 138h4v4h-4zM120 138h4v4h-4zM124 138h4v4h-4zM112 142h4v4h-4zM116 142h4v4h-4zM120 142h4v4h-4zM108 146h4v4h-4zM112 146h4v4h-4zM120 146h4v4h-4zM124 146h4v4h-4zM108 150h4v4h-4zM124 150h4v4h-4z%22/%3E%3C/svg%3E");
}

.kaart {
  position: relative;
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.logo { width: 240px; height: auto; margin: 4px 0 2px; }
.slot { width: 64px; height: 64px; margin-top: 18px; }
section { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 14px; }
section[hidden], .fout[hidden] { display: none; }

h1 {
  font-family: BC, sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-size: 30px;
  line-height: 1;
  margin: 6px 0 0;
  letter-spacing: .01em;
}
h1.groot { font-size: 46px; }
p { margin: 0; font-size: 16px; line-height: 1.35; }
p.klein { font-size: 13px; opacity: .85; }
a { color: var(--geel); }

.veld {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 14px;
  background: var(--creme);
  color: var(--navy);
  font: 800 19px B, sans-serif;
  text-align: center;
  padding: 0 14px;
  outline: none;
}
.veld:focus { box-shadow: 0 0 0 4px var(--geel); }
.veld.letters, .veld.code {
  font-family: BC, sans-serif;
  font-style: italic;
  font-size: 34px;
  letter-spacing: .32em;
  text-transform: uppercase;
  padding-left: calc(14px + .32em);
}

.vink { display: flex; gap: 12px; align-items: flex-start; text-align: left; font-size: 14px; line-height: 1.3; cursor: pointer; }
.vink input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.vakje {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  background: var(--creme);
  box-shadow: inset 0 0 0 3px var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
}
.vink input:checked + .vakje { background: var(--goud2); }
.vink input:checked + .vakje::after { content: "✓"; color: var(--navy); font-size: 18px; font-weight: 900; }
.vink input:focus-visible + .vakje { outline: 3px solid var(--geel); outline-offset: 2px; }

.knop {
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, var(--goud1), var(--goud2));
  box-shadow: 0 5px 0 var(--goudrand);
  color: var(--navy);
  font-family: BC, sans-serif;
  font-style: italic;
  text-transform: uppercase;
  font-size: 22px;
  cursor: pointer;
}
.knop:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--goudrand); }
.knop:disabled { opacity: .55; cursor: default; }
.knop.licht { background: var(--creme); box-shadow: 0 4px 0 #E2D2B6; font-size: 16px; min-height: 44px; }

.fout { color: var(--navy); background: var(--rood); border-radius: 12px; padding: 10px 14px; font-size: 15px; width: 100%; }
.voet { font-size: 12px; opacity: .6; margin-top: 18px; }

/* de privacyverklaring: lange tekst, links uitgelijnd */
.kaart.lang { max-width: 640px; text-align: left; align-items: stretch; }
.kaart.lang .logo { align-self: center; }
.kaart.lang h1 { font-size: 34px; text-align: center; }
.kaart.lang h2 { font-family: BC, sans-serif; font-style: italic; text-transform: uppercase; font-size: 22px; margin: 12px 0 0; }
.kaart.lang ul { margin: 0; padding-left: 20px; line-height: 1.4; }
.kaart.lang .voet { text-align: center; }