/* Gedeelde vormgeving voor alle rekenspelletjes. */

@font-face {
  font-family: 'Fredoka';
  src: url('/fonts/fredoka.woff2') format('woff2');
  font-weight: 300 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --lucht-1: #6cc4ff;
  --lucht-2: #b5e3ff;
  --lucht-3: #fff1cc;
  --inkt: #243049;
  --inkt-zacht: #5a6580;
  --lijn: #dfe6f2;
  --knop-rand: #c9d6ea;
  --rood: #ff6b6b;   --rood-d: #e03131;
  --oranje: #ffa94d; --oranje-d: #e8590c;
  --geel: #ffd43b;   --geel-d: #f59f00;
  --groen: #40c057;  --groen-d: #2b8a3e;
  --blauw: #339af0;  --blauw-d: #1864ab;
  --paars: #845ef7;  --paars-d: #5f3dc4;
  --roze: #f783ac;   --roze-d: #d6336c;
  --ster: #ffc419;   --ster-d: #e8a200;
  --schaduw: 0 10px 30px rgb(36 48 73 / 0.16);
  --font: 'Fredoka', ui-rounded, 'Arial Rounded MT Bold', 'Segoe UI', system-ui, sans-serif;
  --rand-l: max(16px, env(safe-area-inset-left));
  --rand-r: max(16px, env(safe-area-inset-right));
}

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

/* De lucht hoort op html, niet op body: anders valt hij over de zon, wolken en duinen heen. */
html {
  min-height: 100%;
  background: linear-gradient(180deg, var(--lucht-1) 0%, var(--lucht-2) 45%, var(--lucht-3) 100%) fixed;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.1rem;
  line-height: 1.4;
  color: var(--inkt);
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

[hidden] { display: none !important; }

:focus-visible {
  outline: 4px solid var(--paars-d);
  outline-offset: 3px;
}

a { color: var(--blauw-d); }

.vh {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ------------------------------------------------------------ achtergrond */

.decor {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

.zon {
  position: absolute;
  top: -50px;
  right: -50px;
  width: 190px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle at 45% 45%, #fff6b3 0 30%, #ffe066 55%, #ffd43b 70%);
  box-shadow: 0 0 60px 20px rgb(255 230 120 / 0.55);
}

.zon::before {
  content: '';
  position: absolute;
  inset: -90px;
  border-radius: 50%;
  background: repeating-conic-gradient(rgb(255 236 150 / 0.5) 0 7deg, transparent 7deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%);
  mask: radial-gradient(circle, #000 35%, transparent 70%);
  animation: draai 80s linear infinite;
}

.wolk {
  position: absolute;
  left: 0;
  width: 130px;
  height: 42px;
  border-radius: 40px;
  background: #fff;
  opacity: 0.92;
  animation: drijf 75s linear infinite;
}

.wolk::before,
.wolk::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: #fff;
}

.wolk::before { width: 60px; height: 60px; top: -30px; left: 18px; }
.wolk::after { width: 46px; height: 46px; top: -20px; left: 64px; }

.wolk.w1 { top: 11%; animation-delay: -12s; }
.wolk.w2 { top: 27%; scale: 0.7; animation-duration: 95s; animation-delay: -60s; }
.wolk.w3 { top: 6%; scale: 0.85; animation-duration: 85s; animation-delay: -38s; }

.duinen {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* Minstens zo hoog als de tekening bij deze breedte (1600 bij 300), zodat 'cover'
     alleen aan de zijkanten afsnijdt en de toppen van de piramides zichtbaar blijven. */
  height: max(24vh, 18.75vw, 120px);
  background: url('/img/duinen.svg') center bottom / cover no-repeat;
}

@keyframes draai { to { rotate: 360deg; } }
@keyframes drijf { from { translate: -30vw 0; } to { translate: 110vw 0; } }

/* ------------------------------------------------------------ opbouw */

.app {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) var(--rand-r) max(12px, env(safe-area-inset-bottom)) var(--rand-l);
}

main {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}

.balk {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  max-width: 1100px;
  min-height: 52px;
  margin: 0 auto 12px;
}

.balk h1 {
  flex: 1;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font-size: clamp(1.35rem, 2.6vw + 0.7rem, 2.2rem);
  font-weight: 700;
  line-height: 1.15;
  color: #fff;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-shadow: 0 3px 0 var(--blauw-d), 0 6px 14px rgb(24 100 171 / 0.3);
}

.kop {
  margin: 0.2em 0 0.7em;
  font-size: clamp(1.5rem, 2.4vw + 0.9rem, 2.4rem);
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}

.kaart {
  padding: clamp(16px, 3vw, 28px);
  border-radius: 28px;
  background: rgb(255 255 255 / 0.95);
  box-shadow: var(--schaduw);
}

.voet {
  margin-top: 24px;
  font-size: 0.95rem;
  text-align: center;
}

.voet a {
  padding: 8px 14px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.7);
  color: var(--inkt-zacht);
  text-decoration: none;
}

/* ------------------------------------------------------------ knoppen */

.knop {
  --k: var(--blauw);
  --kd: var(--blauw-d);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  min-height: 52px;
  padding: 0.55em 1.2em;
  border: 0;
  border-radius: 18px;
  background: var(--k);
  box-shadow: 0 5px 0 var(--kd), 0 8px 18px rgb(36 48 73 / 0.18);
  color: #fff;
  font: inherit;
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  transition: transform 0.08s, box-shadow 0.08s;
}

.knop:active {
  transform: translateY(4px);
  box-shadow: 0 1px 0 var(--kd), 0 3px 8px rgb(36 48 73 / 0.18);
}

.knop:disabled { opacity: 0.5; cursor: default; }

.knop.groen { --k: var(--groen); --kd: var(--groen-d); }
.knop.oranje { --k: var(--oranje); --kd: var(--oranje-d); }
.knop.paars { --k: var(--paars); --kd: var(--paars-d); }
.knop.rood { --k: var(--rood); --kd: var(--rood-d); }
.knop.wit { --k: #fff; --kd: var(--knop-rand); color: var(--inkt); }
.knop.klein { min-height: 42px; padding: 0.35em 0.9em; font-size: 1rem; border-radius: 14px; }

.knop-rond {
  display: grid;
  place-items: center;
  flex: none;
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 0 var(--knop-rand), 0 6px 14px rgb(36 48 73 / 0.15);
  color: inherit;
  font: inherit;
  font-size: 1.45rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}

.knop-rond:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--knop-rand);
}

.knoppen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}

/* ------------------------------------------------------------ spelers */

.avatar {
  display: grid;
  place-items: center;
  flex: none;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--kleur, var(--paars));
  box-shadow: inset 0 -5px 0 rgb(0 0 0 / 0.13);
  line-height: 1;
}

.speler-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 40vw;
  padding: 4px 16px 4px 4px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 4px 0 var(--knop-rand);
  color: var(--inkt);
  font-weight: 600;
  text-decoration: none;
}

.speler-chip .avatar { width: 40px; font-size: 1.4rem; }

.speler-chip .naam {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 440px) {
  .speler-chip { padding: 4px; }
  .speler-chip .naam { display: none; }
}

/* ------------------------------------------------------------ sterren */

.sterren {
  display: inline-flex;
  gap: 2px;
  font-size: 1.3rem;
  line-height: 1;
  letter-spacing: 0;
}

.ster { color: #d3dbe9; }

.ster.aan {
  color: var(--ster);
  text-shadow: 0 2px 0 var(--ster-d);
}

/* ------------------------------------------------------------ piramide-kleuren */

/* Laag 0 is de onderste rij. Gebruikt door de stenen en de mini-piramides. */
[data-laag="0"] { --laag: #74c0fc; --laag-d: #1c7ed6; }
[data-laag="1"] { --laag: #8ce99a; --laag-d: #2f9e44; }
[data-laag="2"] { --laag: #ffe066; --laag-d: #f59f00; }
[data-laag="3"] { --laag: #ffa8a8; --laag-d: #e03131; }

.mini {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(var(--mini-b, 14px) * 0.18);
}

.mini-rij {
  display: flex;
  gap: calc(var(--mini-b, 14px) * 0.18);
}

.mini-blok {
  width: var(--mini-b, 14px);
  height: calc(var(--mini-b, 14px) * 0.66);
  border-radius: calc(var(--mini-b, 14px) * 0.22);
  background: var(--laag);
  box-shadow: 0 calc(var(--mini-b, 14px) * 0.12) 0 var(--laag-d);
}

/* Sudoku: de vakken wisselen van kleur als een dambord. */
:root {
  --vak-a: #d0ebff;
  --vak-b: #ffe8cc;
}

.mini-rooster {
  display: grid;
  grid-template-columns: repeat(var(--vakken-breed, 2), auto);
  gap: calc(var(--mc, 10px) * 0.35);
}

.mini-vak {
  display: grid;
  grid-template-columns: repeat(var(--breed, 2), var(--mc, 10px));
  gap: calc(var(--mc, 10px) * 0.14);
  padding: calc(var(--mc, 10px) * 0.18);
  border-radius: calc(var(--mc, 10px) * 0.4);
  background: var(--vak-a);
}

.mini-vak[data-kleur="1"] { background: var(--vak-b); }

.mini-cel {
  display: grid;
  place-items: center;
  width: var(--mc, 10px);
  height: var(--mc, 10px);
  border-radius: calc(var(--mc, 10px) * 0.25);
  background: rgb(255 255 255 / 0.8);
  color: var(--inkt);
  font-size: calc(var(--mc, 10px) * 0.62);
  font-weight: 700;
  line-height: 1;
}

/* Tafels: kaartjes met de tafels op de niveautegels, en een somkaartje op de startpagina. */
.mini-tafels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 5px;
  max-width: 130px;
  margin: 4px 0;
}

.mini-tafel {
  padding: 3px 9px;
  border-radius: 10px;
  background: #f3f0ff;
  box-shadow: 0 2px 0 #d0bfff;
  color: var(--paars-d);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}

.mini-tafelsom {
  display: grid;
  justify-items: center;
  gap: 10px;
}

.mini-tafelsom-som {
  padding: 4px 16px;
  border: 2px solid var(--lijn);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 4px 0 var(--knop-rand);
  color: var(--paars-d);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.2;
}

.mini-groepjes { display: flex; gap: 8px; }

.mini-groepje {
  display: grid;
  grid-template-columns: repeat(2, 10px);
  gap: 4px;
  padding: 5px;
  border-radius: 8px;
  background: #fff3e6;
}

.mini-stip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--oranje);
}

.mini-groepje:nth-child(even) .mini-stip { background: var(--paars); }

/* Vormen voor Patronen, getekend met CSS zodat ze overal hetzelfde zijn. */
.vorm {
  display: block;
  width: var(--vorm, 40px);
  height: var(--vorm, 40px);
  background: var(--vk, var(--blauw));
  box-shadow: inset 0 calc(var(--vorm, 40px) * -0.1) 0 rgb(0 0 0 / 0.15);
}

.vorm.rond { border-radius: 50%; }
.vorm.vierkant { border-radius: 18%; }
.vorm.driehoek { clip-path: polygon(50% 5%, 97% 92%, 3% 92%); }
.vorm.ster { clip-path: polygon(50% 2%, 62% 36%, 98% 37%, 69% 59%, 79% 95%, 50% 74%, 21% 95%, 31% 59%, 2% 37%, 38% 36%); }
.vorm.ruit { clip-path: polygon(50% 2%, 98% 50%, 50% 98%, 2% 50%); }

.vorm.rood { --vk: #fa5252; }
.vorm.blauw { --vk: #339af0; }
.vorm.geel { --vk: #fcc419; }
.vorm.groen { --vk: #40c057; }
.vorm.paars { --vk: #845ef7; }
.vorm.oranje { --vk: #fd7e14; }

.mini-patroon {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 4px 0;
}

.mini-patroon .kraaltje {
  display: grid;
  place-items: center;
  width: var(--kraaltje, 26px);
  height: var(--kraaltje, 26px);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 0 var(--knop-rand);
  color: var(--paars-d);
  font-size: calc(var(--kraaltje, 26px) * 0.5);
  font-weight: 700;
  --vorm: calc(var(--kraaltje, 26px) * 0.62);
}

.mini-patroon .kraaltje.vraag {
  border: 2px dashed var(--knop-rand);
  box-shadow: none;
  color: rgb(36 48 73 / 0.35);
}

/* Winkeltje: euromunten en -briefjes, getekend met CSS. --geld is de maat van een 2 euro. */
.munt {
  --m: calc(var(--geld, 48px) * var(--schaal, 1));
  display: inline-grid;
  flex: none;
  place-content: center;
  justify-items: center;
  width: var(--m);
  height: var(--m);
  border-radius: 50%;
  background: var(--munt-bg);
  box-shadow:
    inset 0 0 0 calc(var(--m) * 0.07) var(--munt-rand),
    inset 0 calc(var(--m) * -0.06) 0 rgb(0 0 0 / 0.12),
    0 calc(var(--m) * 0.05) 0 rgb(0 0 0 / 0.2);
  color: #5a4210;
  line-height: 0.95;
}

.munt b { font-size: calc(var(--m) * 0.4); font-weight: 700; }
.munt small { font-size: calc(var(--m) * 0.17); font-weight: 600; }

.munt.goud { --munt-bg: radial-gradient(circle at 35% 30%, #fff3c4, #f2c14e 45%, #d9a22b); --munt-rand: #c98f1f; }
.munt.euro1 { --munt-bg: radial-gradient(circle, #eef1f4 0 54%, #f2c14e 56%); --munt-rand: #c98f1f; color: #3d4652; }
.munt.euro2 { --munt-bg: radial-gradient(circle, #f5c95a 0 54%, #e3e7ec 56%); --munt-rand: #a9b2bc; }

.biljet {
  --b: var(--geld, 48px);
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: baseline;
  justify-content: flex-end;
  gap: calc(var(--b) * 0.06);
  width: calc(var(--b) * 1.9);
  height: calc(var(--b) * 1.02);
  padding: calc(var(--b) * 0.2) calc(var(--b) * 0.14) 0 0;
  overflow: hidden;
  border-radius: calc(var(--b) * 0.14);
  background: var(--biljet-bg);
  box-shadow: inset 0 0 0 calc(var(--b) * 0.05) rgb(255 255 255 / 0.35), 0 calc(var(--b) * 0.05) 0 rgb(0 0 0 / 0.2);
  color: #fff;
  line-height: 1;
}

/* Een poortje, zoals op de echte briefjes. */
.biljet::before {
  content: '';
  position: absolute;
  left: 12%;
  bottom: 14%;
  width: 28%;
  height: 64%;
  border-radius: 999px 999px 3px 3px;
  background: rgb(255 255 255 / 0.28);
}

.biljet b { font-size: calc(var(--b) * 0.52); font-weight: 700; text-shadow: 0 2px 0 rgb(0 0 0 / 0.15); }
.biljet small { font-size: calc(var(--b) * 0.2); font-weight: 600; }

.biljet.b500 { --biljet-bg: #8f9c95; }
.biljet.b1000 { --biljet-bg: #e0605a; }
.biljet.b2000 { --biljet-bg: #4f8fdc; }
.biljet.b5000 { --biljet-bg: #f0a14a; }

.mini-geld {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 6px 0;
  --geld: 26px;
}

.mini-winkel {
  display: grid;
  justify-items: center;
  gap: 8px;
  --geld: 40px;
}

.mini-winkel-artikel { display: flex; align-items: center; gap: 8px; font-size: 3rem; line-height: 1; }

.prijskaartje {
  padding: 3px 10px;
  border-radius: 8px;
  background: #fff3bf;
  box-shadow: 0 2px 0 var(--geel-d);
  color: var(--inkt);
  font-size: 1.05rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ------------------------------------------------------------ meldingen */

.melding {
  max-width: 600px;
  margin: 18px auto;
  padding: 14px 20px;
  border-radius: 20px;
  background: rgb(255 255 255 / 0.92);
  box-shadow: var(--schaduw);
  text-align: center;
}

/* ------------------------------------------------------------ confetti */

.confetti {
  position: fixed;
  inset: 0;
  z-index: 50;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition: none !important;
  }
}