/* Basis van Grabbel: de viltachtergrond, koppen, knoppen, velden, kaarten, tabbladen, de laag, het blad en de melding. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
html, body { height: 100%; overflow: hidden; }
body {
  font-family: var(--tekst); font-size: 1rem; line-height: 1.45; color: var(--krijt);
  /* Het licht van een lamp boven de tafel, met fijne vezels van het vilt eroverheen */
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='v'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23v)'/%3E%3C/svg%3E"),
    radial-gradient(130% 62% at 50% -6%, var(--vilt-licht) 0%, var(--vilt) 52%, var(--vilt-diep) 100%);
  -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; color: inherit; }
button { border: 0; background: none; cursor: pointer; touch-action: manipulation; }
a { color: inherit; }
ul { list-style: none; }
[hidden] { display: none !important; }

#app { position: relative; max-width: 30rem; height: 100dvh; margin: 0 auto; overflow: hidden; }
#scherm { height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: calc(var(--boven) + 1rem) 1.25rem calc(var(--onder) + 7rem); scrollbar-width: none; }
#scherm::-webkit-scrollbar { display: none; }
#scherm.komt > * { animation: kom-op 0.6s var(--glij) backwards; }
#scherm.komt > :nth-child(2) { animation-delay: 50ms; }
#scherm.komt > :nth-child(3) { animation-delay: 100ms; }
#scherm.komt > :nth-child(4) { animation-delay: 150ms; }
#scherm.komt > :nth-child(n+5) { animation-delay: 200ms; }
@keyframes kom-op { from { opacity: 0; transform: translateY(1.4rem); } }

.icoon { width: 1.5rem; height: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Koppen */
.kop { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.kop__naam { font-family: var(--kop); font-weight: 400; font-size: 2.6rem; line-height: 1; letter-spacing: -0.01em; color: var(--papier); text-shadow: 0 0.22rem 0 var(--vilt-diep); }
.kop--sub { justify-content: flex-start; margin-bottom: 1.25rem; }
.kop__titel { font-family: var(--kop); font-weight: 400; font-size: 1.7rem; line-height: 1.05; color: var(--papier); overflow-wrap: anywhere; }
.kop__onder { font-size: 0.95rem; font-weight: 600; color: var(--geel); }
.tussenkop { margin: 2rem 0 0.75rem; font-family: var(--kop); font-weight: 400; font-size: 1.15rem; color: var(--krijt-zacht); }
.uitleg { margin: 0.9rem 0; font-size: 0.95rem; color: var(--krijt-zacht); text-wrap: pretty; }
.leus { margin: -0.25rem 0 1.25rem; text-align: center; font-family: var(--pen); font-size: 1.3rem; color: var(--geel); rotate: -2deg; }

.rondje { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; flex: none; border-radius: 50%; background: rgba(248, 238, 217, 0.1); color: var(--papier); transition: transform 0.4s var(--veer), background 0.2s; }
.rondje:active { transform: scale(0.86); background: rgba(248, 238, 217, 0.2); }

/* Knoppen: een dikke knop die je echt indrukt (de onderrand verdwijnt) */
.knop { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 3rem; padding: 0.6rem 1.2rem; border-radius: 1.5rem; font-weight: 600; text-decoration: none;
  background: var(--geel); color: var(--inkt); box-shadow: 0 0.3rem 0 #b9831a; transition: transform 0.35s var(--veer), box-shadow 0.12s; }
.knop:active { transform: translateY(0.25rem) scale(0.98); box-shadow: 0 0.05rem 0 #b9831a; transition-duration: 0.06s; }
.knop--groot { display: flex; width: 100%; min-height: 3.6rem; font-family: var(--kop); font-weight: 400; font-size: 1.1rem; letter-spacing: 0.01em; }
.knop--klein { min-height: 2.5rem; padding: 0.3rem 0.9rem; font-size: 0.9rem; }
.knop--klein .icoon { width: 1.1rem; height: 1.1rem; }
.knop--klaar { background: var(--vilt-rand); color: var(--papier); box-shadow: 0 0.3rem 0 var(--vilt-diep); }
.knop--licht { background: var(--papier); box-shadow: 0 0.3rem 0 #b3a27c; }
.knop--rood { background: var(--rood); color: #fff; box-shadow: 0 0.3rem 0 var(--rood-diep); }
.knop--stil { background: none; box-shadow: none; color: var(--krijt-zacht); font-weight: 600; }
.knop--stil:active { box-shadow: none; }
.voetknoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.75rem; }

/* Invoervelden en snelkeuzes */
.veld { width: 100%; min-height: 3.25rem; padding: 0.6rem 1rem; border: 0.125rem solid transparent; border-radius: 1rem; background: var(--papier); color: var(--inkt); font-size: 1.05rem; font-weight: 600; outline: none; transition: border-color 0.2s, transform 0.4s var(--veer); }
.veld::placeholder { color: #a39a85; font-weight: 400; }
.veld:focus { border-color: var(--geel); transform: scale(1.015); }
.etiket { display: block; margin: 1rem 0 0.4rem; font-weight: 600; }
.snel { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
.snel__knop { padding: 0.45rem 0.9rem; border-radius: 1.5rem; background: rgba(248, 238, 217, 0.12); font-weight: 600; font-size: 0.95rem; transition: transform 0.4s var(--veer), background 0.2s, color 0.2s; }
.snel__knop:active { transform: scale(0.9); }
.snel__knop.aan { background: var(--rood); color: #fff; transform: rotate(-3deg) scale(1.06); }
.blad .snel__knop { background: rgba(29, 27, 22, 0.08); }
.blad .snel__knop.aan { background: var(--rood); }

/* Kaarten: een rijtje kaartjes van papier met een inkeping, zoals een toegangsbewijs */
.stapel { display: grid; gap: 0.7rem; margin-bottom: 1.1rem; }
.kaart { position: relative; display: grid; gap: 0.1rem; width: 100%; padding: 0.9rem 1.1rem 0.9rem 2.6rem; border-radius: 0.9rem; background: var(--papier); color: var(--inkt); text-align: left;
  -webkit-mask: radial-gradient(circle 0.55rem at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.55rem at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 0.55rem at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.55rem at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  animation: kaart-in 0.7s var(--veer) calc(var(--nr) * 70ms + 150ms) backwards; transition: transform 0.4s var(--veer); }
.kaart::before { content: ''; position: absolute; left: 1.7rem; top: 0.6rem; bottom: 0.6rem; border-left: 0.125rem dashed rgba(29, 27, 22, 0.3); }
.kaart:nth-child(3n+1) { background: var(--papier); }
.kaart:nth-child(3n+2) { background: var(--geel); }
.kaart:nth-child(3n) { background: var(--roze); }
.kaart:active { transform: scale(0.96) rotate(-1deg); }
.kaart__titel { font-family: var(--kop); font-size: 1.15rem; line-height: 1.15; overflow-wrap: anywhere; }
.kaart__onder { font-size: 0.9rem; font-weight: 600; color: rgba(29, 27, 22, 0.66); }
@keyframes kaart-in { from { opacity: 0; transform: translateX(-2.5rem) rotate(-5deg); } }

/* Tabbladen: een zwevende balk met een gele vlek die naar het gekozen tabblad glijdt */
#tabs { position: absolute; left: 50%; bottom: calc(var(--onder) + 1rem); z-index: 3; display: grid; grid-template-columns: repeat(3, 1fr); width: 20rem; max-width: calc(100% - 1.5rem); padding: 0.3rem; translate: -50% 0; border-radius: 2rem; background: var(--vilt-diep); box-shadow: 0 0 0 0.0625rem var(--vilt-rand), var(--schaduw); }
.tabs__vlek { position: absolute; left: 0.3rem; top: 0.3rem; bottom: 0.3rem; width: calc((100% - 0.6rem) / 3); border-radius: 2rem; background: var(--geel); transition: transform 0.6s var(--veer); }
#tabs[data-actief="lijstjes"] .tabs__vlek { transform: translateX(100%); }
#tabs[data-actief="prikken"] .tabs__vlek { transform: translateX(200%); }
.tab { position: relative; display: flex; align-items: center; justify-content: center; gap: 0.3rem; min-height: 3rem; font-weight: 600; font-size: 0.9rem; color: var(--krijt-zacht); transition: color 0.25s; }
.tab .icoon { width: 1.3rem; height: 1.3rem; transition: transform 0.5s var(--veer); }
.tab.aan { color: var(--inkt); }
.tab.aan .icoon { transform: rotate(-10deg) scale(1.15); }

/* De laag over het hele scherm (trekking maken, doorgeven, onthullen) */
.laag { position: absolute; inset: 0; z-index: 5; overflow: hidden; animation: laag-in 0.5s var(--glij);
  background: radial-gradient(130% 62% at 50% -6%, var(--vilt-licht) 0%, var(--vilt) 52%, var(--vilt-diep) 100%); }
.laag.weg { opacity: 0; transform: scale(1.04); transition: opacity 0.26s, transform 0.26s; pointer-events: none; }
@keyframes laag-in { from { opacity: 0; transform: translateY(3rem) scale(0.97); } }

/* Het blad dat van onderen omhoog schuift */
.blad { position: absolute; inset: 0; z-index: 8; display: flex; align-items: flex-end; }
.blad__achter { position: absolute; inset: 0; background: rgba(5, 18, 14, 0.62); animation: vervaag-in 0.3s; }
.blad__vel { position: relative; width: 100%; max-height: 92%; overflow-y: auto; padding: 0.75rem 1.25rem calc(var(--onder) + 1.25rem); border-radius: 1.75rem 1.75rem 0 0; background: var(--papier); color: var(--inkt); animation: blad-in 0.6s var(--veer); }
.blad__vel form, .blad__vel { display: grid; gap: 0.75rem; align-content: start; }
.blad__greep { justify-self: center; width: 2.75rem; height: 0.3rem; border-radius: 1rem; background: rgba(29, 27, 22, 0.2); }
.blad__titel { font-family: var(--kop); font-weight: 400; font-size: 1.35rem; line-height: 1.15; text-wrap: balance; }
.blad .veld { background: #fff; border-color: rgba(29, 27, 22, 0.12); }
.blad .veld:focus { border-color: var(--rood); }
.blad .etiket { margin: 0.25rem 0 -0.35rem; }
.blad .snel { margin-top: -0.15rem; }
.blad .uitleg, .blad .knop--stil { color: var(--inkt-zacht); }
.blad.weg .blad__achter { opacity: 0; transition: opacity 0.25s; }
.blad.weg .blad__vel { transform: translateY(100%); transition: transform 0.25s ease-in; }
@keyframes blad-in { from { transform: translateY(100%); } }
@keyframes vervaag-in { from { opacity: 0; } }

/* Schakelaar in de instellingen */
.schakel { display: flex; align-items: center; justify-content: space-between; min-height: 3rem; font-weight: 600; }
.schakel input { position: absolute; opacity: 0; }
.schakel i { position: relative; width: 3.4rem; height: 2rem; border-radius: 1rem; background: rgba(29, 27, 22, 0.2); transition: background 0.25s; }
.schakel i::after { content: ''; position: absolute; left: 0.2rem; top: 0.2rem; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #fff; transition: transform 0.5s var(--veer); }
.schakel input:checked + i { background: var(--rood); }
.schakel input:checked + i::after { transform: translateX(1.4rem); }

/* Korte melding bovenaan */
#melding { position: absolute; left: 1rem; right: 1rem; top: calc(var(--boven) + 0.75rem); z-index: 9; padding: 0.8rem 1.1rem; border-radius: 1rem; background: var(--papier); color: var(--inkt); font-weight: 600; text-align: center; box-shadow: var(--schaduw); pointer-events: none; opacity: 0; transform: translateY(-5rem) rotate(-2deg); transition: transform 0.6s var(--veer), opacity 0.3s; }
#melding.aan { opacity: 1; transform: none; }

/* Confetti: snippers in de lootjeskleuren */
.confetti { position: absolute; left: 50%; top: 45%; z-index: 6; pointer-events: none; }
.confetti i { position: absolute; width: 0.6rem; height: 0.9rem; border-radius: 0.15rem; background: var(--k); animation: snipper 1.9s cubic-bezier(0.1, 0.8, 0.3, 1) var(--wacht) both; }
.confetti i:nth-child(3n) { background: var(--rood); width: 0.5rem; height: 0.5rem; border-radius: 50%; }
@keyframes snipper {
  0% { transform: translate(0, 0) rotate(0) scale(0.2); opacity: 1; }
  70% { opacity: 1; }
  100% { transform: translate(var(--x), calc(var(--y) + 9rem)) rotate(var(--r)) scale(1); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; }
}