/* Uploadpagina voor gasten, in de huisstijl van het feest: dezelfde kleuren, lettertypen, patronen, knoppen en
   vallende deeltjes als het beginscherm van de booth (booth/ui/style.css en themes.css). */
:root { --bg: #1b0f33; --accent: #ffd166; --tekst: #ffffff; --accent-tekst: #1b0f33; --kop: "PB Abril", Georgia, serif; --u: min(1.6vw, 1vh); }
* { box-sizing: border-box; }
html, body { margin: 0; overflow-x: clip; }
html { background: var(--bg); }
body { min-height: 100dvh; color: var(--tekst); font: 400 17px/1.5 "PB Fredoka", system-ui, sans-serif; background-attachment: fixed; position: relative; isolation: isolate; }
main { position: relative; z-index: 1; width: min(100%, 560px); margin: 0 auto; padding: 44px 20px 40px; display: flex; flex-direction: column; gap: 18px; }
.evenement { margin: 0; color: var(--accent); font-weight: 600; font-size: 20px; overflow-wrap: anywhere; }
h1 { margin: 0; font-family: var(--kop); font-weight: 400; font-size: clamp(38px, 11vw, 60px); line-height: 1.04; overflow-wrap: anywhere; }
.uitleg { margin: 0; font-size: 19px; }
.klein { margin: 8px 0 0; font-size: 14px; color: color-mix(in srgb, var(--tekst) 72%, var(--bg)); }
.knop { display: inline-flex; align-items: center; justify-content: center; gap: .5em; border: 0; border-radius: 999px; background: var(--accent); color: var(--accent-tekst); font: 700 20px/1.1 "PB Fredoka", system-ui, sans-serif; padding: 16px 28px; min-height: 60px; cursor: pointer; transition: transform .12s; -webkit-tap-highlight-color: transparent; }
.knop.groot { font-size: 22px; min-height: 72px; width: 100%; }
.knop.leeg { background: transparent; color: var(--tekst); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--tekst) 60%, transparent); }
.knop:active { transform: scale(.96); }
.knop:focus-within, .knop:focus-visible { outline: 3px solid var(--tekst); outline-offset: 3px; }
.knop[hidden], .voortgang[hidden], .gedeeld[hidden] { display: none; }
.voortgang { display: flex; flex-direction: column; gap: 10px; }
.balk { height: 14px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--tekst) 16%, transparent); }
.balk span { display: block; width: 0; height: 100%; background: var(--accent); border-radius: 999px; transition: width .25s; }
#stand { margin: 0; }
.gedeeld { display: flex; flex-direction: column; gap: 12px; }
.gedeeld-rij { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.gedeeld-rij > div { aspect-ratio: 1; border-radius: 10px; overflow: hidden; display: grid; place-items: center; background: color-mix(in srgb, var(--tekst) 14%, transparent); font-size: 24px; animation: omhoog .4s cubic-bezier(.16,1,.3,1) both; }
.gedeeld-rij img { width: 100%; height: 100%; object-fit: cover; }

/* Binnenkomst en de ademende knop, zoals op de booth. */
@keyframes omhoog { from { opacity: 0; transform: translateY(16px); } }
@keyframes ademt { 50% { transform: scale(1.06); box-shadow: 0 0 34px color-mix(in srgb, var(--accent) 55%, transparent); } }
.beweeg main > * { animation: omhoog .55s cubic-bezier(.16,1,.3,1) both; }
.beweeg main > :nth-child(2) { animation-delay: 60ms; }
.beweeg main > :nth-child(n+3) { animation-delay: 120ms; }
.beweeg .knop.groot { animation: omhoog .55s cubic-bezier(.16,1,.3,1) 120ms both, ademt 2.2s ease-in-out .7s infinite; }

/* De laag voor de animatie (animaties.js en themes.css): over het hele scherm, achter de inhoud. */
.sfeer { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; isolation: isolate; }
@media (prefers-reduced-motion: reduce) { .beweeg main > *, .beweeg .knop.groot { animation: none; } }

/* Code van het feest invullen (het kale adres, zonder code). */
.code { display: flex; flex-direction: column; gap: 10px; }
.code[hidden] { display: none; }
.code label { font-weight: 600; }
.code input { min-height: 60px; padding: 0 18px; border-radius: 16px; border: 2px solid color-mix(in srgb, var(--tekst) 40%, transparent); background: color-mix(in srgb, var(--tekst) 10%, transparent); color: var(--tekst); font: 600 24px/1 "PB Fredoka", system-ui, sans-serif; letter-spacing: .12em; }
.code input:focus { outline: 3px solid var(--accent); outline-offset: 2px; }