/* Alles rond het trekken: het lootje, de hoed, een trekking maken, schudden, uitdelen, doorgeven en onthullen.
   Lootje en hoed zijn in em gemaakt: zet font-size op de omringende doos om ze groter of kleiner te tonen. */

/* Het lootje: papier met twee inkepingen en links een afscheurstrookje */
.lootje { --k: var(--papier); display: inline-flex; align-items: center; width: 6.6em; height: 2.6em; flex: none; border-radius: 0.3em; background: var(--k); color: var(--inkt);
  -webkit-mask: radial-gradient(circle 0.34em at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.34em at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 0.34em at 0 50%, #0000 96%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.34em at 100% 50%, #0000 96%, #000) right / 51% 100% no-repeat; }
.lootje--k1 { --k: var(--geel); }
.lootje--k2 { --k: var(--roze); }
.lootje--k3 { --k: var(--blauw); }
.lootje--k4 { --k: var(--mint); }
.lootje__strook { display: grid; justify-items: center; align-content: center; width: 2.7em; height: 100%; padding-left: 0.9em; border-right: 0.1em dashed rgba(29, 27, 22, 0.35); font-size: 0.5em; font-weight: 600; line-height: 1.1; }
.lootje__strook b { font-family: var(--kop); font-weight: 400; font-size: 1.7em; }
.lootje__naam { flex: 1; min-width: 0; padding: 0.15em 0.6em 0 0.35em; font-family: var(--pen); font-size: 1.12em; line-height: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* De hoed */
.hoed { position: relative; width: 15em; aspect-ratio: 240 / 250; margin: 0 auto; }
.hoed::after { content: ''; position: absolute; left: 12%; right: 12%; bottom: -4%; height: 11%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(3, 14, 11, 0.7), transparent); }
.hoed__deel { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hoed__lootjes { position: absolute; left: 50%; top: 26.5%; }
.hoed__lootjes .lootje { position: absolute; left: -3.3em; bottom: 0; transform-origin: 50% 100%; transform: translate(var(--x), var(--y)) rotate(var(--r));
  transition: transform 0.7s var(--veer); animation: lootje-valt 0.75s var(--veer) var(--wacht) backwards; }
@keyframes lootje-valt { from { transform: translate(var(--x), -13em) rotate(calc(var(--r) * -4 + 40deg)); opacity: 0; } 30% { opacity: 1; } }

/* Beginscherm: de hoed staat in het licht en deint zacht */
.podium { display: block; width: 100%; padding: 3.4rem 0 1.4rem; font-size: 1.05rem; }
.podium .hoed { animation: deinen 5s ease-in-out infinite; transition: transform 0.5s var(--veer); }
.podium:active .hoed { transform: scale(0.94) rotate(-3deg); }
.podium .hoed__lootjes .lootje:nth-child(odd) { animation: lootje-valt 0.75s var(--veer) var(--wacht) backwards, wiebel 4s ease-in-out calc(var(--wacht) * 6 + 1s) infinite; }
@keyframes deinen { 50% { translate: 0 -0.5rem; rotate: 1.5deg; } }
@keyframes wiebel { 50% { translate: 0 -0.35em; rotate: 3deg; } }

/* Een trekking maken, in drie stappen */
.maak { display: grid; grid-template-rows: auto auto 1fr auto; height: 100%; padding: calc(var(--boven) + 1rem) 1.25rem calc(var(--onder) + 1.25rem); }
.maak__kop { display: flex; align-items: center; gap: 1rem; }
.stappen { display: flex; gap: 0.4rem; flex: 1; justify-content: center; padding-right: 3.75rem; }
.stappen i { width: 1.9rem; height: 0.5rem; border-radius: 1rem; background: rgba(248, 238, 217, 0.18); transition: background 0.3s, transform 0.5s var(--veer); }
.stappen i.aan { background: var(--geel); transform: scaleY(1.3); }
.maak__hoed { padding: 2.2rem 0 0.75rem; font-size: 0.66rem; }
.maak__inhoud { overflow-y: auto; padding: 0.25rem 0.15rem 1rem; scrollbar-width: none; }
.maak__inhoud > * { animation: kom-op 0.55s var(--glij) backwards; }
.maak__inhoud > :nth-child(n+3) { animation-delay: 70ms; }
.maak__inhoud > :nth-child(n+5) { animation-delay: 140ms; }
.vraag { margin-bottom: 0.8rem; font-family: var(--kop); font-weight: 400; font-size: 1.5rem; line-height: 1.12; color: var(--papier); text-wrap: balance; }
.vraag--klein { margin: 1.3rem 0 0.6rem; font-size: 1.05rem; color: var(--krijt-zacht); }
.erbij { display: flex; gap: 0.6rem; }
.erbij .knop { width: 3.25rem; padding: 0; flex: none; }
.namen { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.naam { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.4rem 0.6rem 0.4rem 0.9rem; border-radius: 1.5rem; background: rgba(248, 238, 217, 0.13); font-weight: 600; animation: plop 0.5s var(--veer) backwards; transition: transform 0.4s var(--veer), background 0.2s, color 0.2s; }
.naam .icoon { width: 1rem; height: 1rem; opacity: 0.6; }
.naam:active { transform: scale(0.9); }
.naam--kies { padding-right: 0.9rem; }
.naam--kies.aan { background: var(--geel); color: var(--inkt); transform: scale(1.1) rotate(-3deg); }
.paren { display: grid; gap: 0.5rem; margin-top: 1.1rem; }
.paar { display: flex; align-items: center; justify-content: center; gap: 0.4rem; padding: 0.6rem 1rem; border-radius: 1rem; background: var(--rood); color: #fff; font-family: var(--pen); font-size: 1.2rem; animation: plop 0.5s var(--veer) backwards; }
.paar i { font-family: var(--tekst); font-size: 0.85rem; font-style: normal; opacity: 0.8; }
.paar .icoon { width: 1rem; height: 1rem; margin-left: 0.4rem; }
@keyframes plop { from { transform: scale(0); } }

/* Schudden en trekken */
.trek { display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; height: 100%; padding: 2rem 1.25rem; }
.trek__hoed { grid-row: 2; position: relative; font-size: 1.25rem; padding-top: 9rem; }
.trek__hoed.schudt .hoed { animation: schudden 0.33s ease-in-out infinite; }
.trek__hoed.schudt .lootje { animation: rammel 0.2s ease-in-out infinite alternate; }
.trek__hoed.spuit .hoed__lootjes { z-index: 2; }
.trek__hoed.spuit .lootje { animation: none; transition: transform 1.1s var(--veer) var(--wacht); }
.trek__hoed.spuit .hoed { animation: opveer 0.7s var(--veer); }
.trek__tekst { grid-row: 3; align-self: start; margin-top: 2.2rem; font-family: var(--kop); font-weight: 400; font-size: 1.7rem; color: var(--papier); }
.trek__tekst.knal { font-size: 2.6rem; color: var(--geel); animation: knal 0.7s var(--veer); rotate: -4deg; }
@keyframes schudden { 0%, 100% { transform: translateX(-0.8em) rotate(-9deg); } 50% { transform: translateX(0.8em) rotate(9deg); } }
@keyframes rammel { from { translate: -0.4em 0.2em; } to { translate: 0.4em -0.5em; } }
@keyframes opveer { 0% { transform: scale(1.12, 0.84); } }
@keyframes knal { from { transform: scale(0.2); opacity: 0; } }

/* Uitdelen: een rij lootjes met elk een stuurknop */
.uitdelen { display: grid; gap: 0.75rem; margin-top: 1.25rem; }
.uitdeel { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 1.22rem; animation: kaart-in 0.7s var(--veer) calc(var(--nr) * 70ms + 200ms) backwards; }
.uitdeel .lootje { rotate: -2deg; filter: none; }
.uitdeel:nth-child(even) .lootje { rotate: 1.5deg; }
.uitdeel .knop { font-size: 0.9rem; }

/* Doorgeven en onthullen */
.geef, .onthul { position: relative; display: grid; align-content: center; justify-items: center; gap: 0.5rem; height: 100%; padding: calc(var(--boven) + 1.25rem) 1.5rem calc(var(--onder) + 1.5rem); text-align: center; }
.geef > *, .onthul > * { animation: kom-op 0.6s var(--glij) backwards; }
.geef__sluit { position: absolute; left: 1.25rem; top: calc(var(--boven) + 1rem); }
.geef__klein { font-weight: 600; color: var(--krijt-zacht); }
.geef__naam { font-family: var(--kop); font-weight: 400; font-size: 3rem; line-height: 1; color: var(--papier); overflow-wrap: anywhere; animation: knal 0.7s var(--veer) 0.1s backwards; }
.geef__lootje { margin: 2.2rem 0 2.6rem; font-size: 2.3rem; rotate: -5deg; animation: deinen 4s ease-in-out infinite; }
.geef .knop--groot, .onthul .knop--groot { margin-top: 0.5rem; }

.onthul { perspective: 60rem; }
.kaartje { position: relative; width: 17.5rem; height: 11.5rem; margin: 1.6rem 0 1.8rem; transform-style: preserve-3d; transition: transform 1.1s var(--veer); animation: kaartje-in 0.9s var(--veer) backwards, lonken 2.4s ease-in-out 1s infinite; }
.kaartje.om { transform: rotateY(180deg) rotate(2deg); animation: none; }
.kaartje__zijde { position: absolute; inset: 0; display: grid; align-content: center; justify-items: center; gap: 0.2rem; padding: 1rem 1.5rem; border-radius: 1.1rem; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: var(--schaduw);
  -webkit-mask: radial-gradient(circle 0.9rem at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.9rem at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat;
  mask: radial-gradient(circle 0.9rem at 0 50%, #0000 97%, #000) left / 51% 100% no-repeat, radial-gradient(circle 0.9rem at 100% 50%, #0000 97%, #000) right / 51% 100% no-repeat; }
.kaartje__dicht { background: radial-gradient(circle at 0.6rem 0.6rem, rgba(255, 255, 255, 0.16) 0.16rem, transparent 0.2rem) 0 0 / 1.2rem 1.2rem, var(--rood); color: #fff; }
.kaartje__dicht b { font-family: var(--kop); font-weight: 400; font-size: 5rem; line-height: 1; color: var(--geel); }
.kaartje__dicht i { font-style: normal; font-weight: 600; }
.kaartje__open { background: var(--papier); color: var(--inkt); transform: rotateY(180deg); }
.kaartje__open small { font-size: 0.95rem; font-weight: 600; color: var(--inkt-zacht); }
.kaartje__open strong { max-width: 100%; font-family: var(--pen); font-size: 3.4rem; line-height: 1.05; overflow-wrap: anywhere; }
.kaartje__open em { font-style: normal; font-weight: 600; color: var(--rood-diep); }
.onthul__na { display: grid; gap: 0.25rem; width: 100%; opacity: 0; transform: translateY(1.5rem); pointer-events: none; transition: opacity 0.5s 0.6s, transform 0.7s var(--veer) 0.6s; }
.onthul__na.aan { opacity: 1; transform: none; pointer-events: auto; }
@keyframes kaartje-in { from { transform: translateY(-30rem) rotate(-25deg); } }
@keyframes lonken { 50% { transform: rotate(-3deg) scale(1.03); } }