/* ===========================================================
   De Grote SinterKerst-Quiz 2026 - het grote scherm in de zaal
   Alles schaalt mee met de breedte van het scherm: 1rem = 1,3vw.
   =========================================================== */

html { font-size: clamp(7px, 1.3vw, 34px); }
body { overflow: hidden; }

.mon {
    position: relative; z-index: 1;
    height: 100vh; height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    padding: 1.4rem 2.4rem 1.2rem;
    gap: 1rem;
}

/* --- kop -------------------------------------------------------- */
.mon-kop { display: flex; align-items: center; gap: 1.2rem; }
.mon-kop .logo { height: 2.6rem; }
.mon-kop .titel { font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; font-size: 1.25rem; line-height: 1.1; }
.mon-kop .pad { font-family: var(--mono); font-size: .72rem; color: var(--zalm); letter-spacing: .04em; min-height: 1.2em; }
.mon-kop .knoppen { margin-left: auto; display: flex; gap: .4rem; opacity: .5; transition: opacity .2s; }
.mon-kop .knoppen:hover { opacity: 1; }
.mon-kop .knop { min-height: 2.2rem; width: 2.2rem; padding: 0; font-size: 1rem; }

/* --- podium: hier staat de scène --------------------------------- */
.mon-podium {
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.4rem;
    text-align: center;
}
.mon-podium.vers > * { animation: opkomst .5s both; }
.mon-podium.vers > :nth-child(2) { animation-delay: .08s; }
.mon-podium.vers > :nth-child(3) { animation-delay: .16s; }
.mon-podium.vers > :nth-child(4) { animation-delay: .24s; }
@keyframes opkomst { from { opacity: 0; transform: translateY(1.2rem); } }

.overlijn { font-family: var(--mono); font-size: .95rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--oker-licht); }
.reuze { font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; font-size: 5.2rem; line-height: 1.02; margin: 0; text-wrap: balance; max-width: 16ch; }
.onderkop { font-size: 1.5rem; color: var(--zalm); max-width: 34ch; margin: 0; text-wrap: balance; }
.sier { display: flex; align-items: center; gap: 1rem; color: var(--oker); font-size: 1.2rem; }
.sier::before, .sier::after { content: ''; width: 7rem; height: 1px; background: currentColor; opacity: .6; }

/* --- voet: wie heeft al geantwoord, en de klok -------------------- */
.mon-voet { display: flex; align-items: center; gap: 1.5rem; min-height: 5.4rem; }
.mon-voet .tekst { font-size: 1rem; color: rgba(243, 236, 226, .8); white-space: nowrap; }
.mon-voet .tekst b { font-family: var(--mono); font-weight: 600; font-size: 1.6rem; color: var(--oker-licht); }
.stippen { display: flex; flex-wrap: wrap; gap: .5rem; flex: 1; min-width: 0; }
.stippen .avatar { --maat: 2.6rem; opacity: .32; filter: grayscale(.7); transition: opacity .3s, filter .3s, transform .3s; }
.stippen .avatar.klaar { opacity: 1; filter: none; transform: translateY(-.25rem); box-shadow: 0 0 0 .18rem var(--oker-licht); }
.mon-voet .klok { --maat: 5.4rem; margin-left: auto; }
.mon-voet .klok .cijfer { color: var(--creme); }

/* --- lobby: cadeaus ------------------------------------------------ */
.mon-podium.lobby { justify-content: flex-start; padding-bottom: 20vh; gap: 1rem; }
.lobby-kop h1 { font-size: 3rem; margin: .2rem 0; }
.lobby-kop p { margin: 0; font-size: 1.15rem; color: rgba(243, 236, 226, .8); }
.cadeaus {
    flex: 1; min-height: 0;
    display: flex; flex-wrap: wrap;
    align-items: center; align-content: center; justify-content: center;
    gap: 2.2rem 2.6rem;
    --pak: 11rem;
}
.cadeaus.veel { --pak: 8rem; gap: 1.6rem 1.8rem; }
.cadeaus.heel-veel { --pak: 6rem; gap: 1.2rem 1.4rem; }

.pak { width: var(--pak); text-align: center; }
.pak-vorm { position: relative; width: 100%; aspect-ratio: 1; }
.pak .doos, .pak .deksel {
    position: absolute;
    background: var(--kleur);
    box-shadow: inset 0 0 0 .12rem rgba(255, 255, 255, .2), 0 .8rem 1.6rem rgba(0, 0, 0, .35);
}
.pak .doos { inset: 34% 7% 0 7%; border-radius: .2rem .2rem .6rem .6rem; }
.pak .deksel { inset: 20% 0 auto 0; height: 17%; border-radius: .4rem; filter: brightness(1.18); z-index: 2; }
.pak .doos::before, .pak .deksel::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
    width: 16%; transform: translateX(-50%);
    background: var(--oker-licht);
}
.pak .strik { position: absolute; left: 50%; top: 5%; width: 44%; height: 17%; transform: translateX(-50%); z-index: 3; }
.pak .strik::before, .pak .strik::after {
    content: ''; position: absolute; bottom: 0; width: 52%; height: 100%;
    border: .32rem solid var(--oker-licht);
    border-radius: 60% 60% 10% 60%;
}
.pak .strik::before { left: 0; transform: rotate(-18deg); }
.pak .strik::after { right: 0; transform: scaleX(-1) rotate(-18deg); }
.pak .foto {
    position: absolute; inset: 2% 12% 30% 12%;
    background: var(--kleur) center / cover;
    border: .4rem solid #fff; border-bottom-width: 1.1rem;
    border-radius: .2rem;
    box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .4);
    transform: rotate(-3deg) scale(0);
    transform-origin: 50% 100%;
    z-index: 1;
}
.pak-naam { margin-top: .6rem; font-size: 1rem; font-weight: 600; line-height: 1.2; min-height: 2.4em; }
.pak-naam small { display: block; font-weight: 400; font-size: .78rem; color: rgba(243, 236, 226, .65); }

.pak.wacht .pak-vorm { opacity: .8; filter: saturate(.55) brightness(.9); }
.pak.klaar .pak-vorm { animation: wiebel 1.5s ease-in-out infinite; }
.pak.klaar .pak-naam small { color: var(--oker-licht); }
.pak.open .deksel, .pak.open .strik { opacity: 0; transform: translate(-50%, -140%) rotate(-25deg); }
.pak.open .deksel { transform: translateY(-140%) rotate(-14deg); }
.pak.open .foto { transform: rotate(-3deg) scale(1); }
.vers .pak.open .foto, .pak.net-open .foto { animation: uit-de-doos .6s cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes wiebel {
    0%, 100% { transform: rotate(0); }
    20% { transform: rotate(-5deg); } 40% { transform: rotate(5deg); }
    60% { transform: rotate(-3deg); } 80% { transform: rotate(2deg); }
}
@keyframes uit-de-doos { from { transform: translateY(40%) rotate(-3deg) scale(0); } }

/* één team groot in beeld */
.onthulling { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; }
.polaroid {
    width: 32rem; aspect-ratio: 4 / 3;
    background: var(--kleur, var(--wijn-diep)) center / cover;
    border: 1rem solid #fff; border-bottom-width: 1rem;
    border-radius: .3rem;
    box-shadow: var(--schaduw-diep);
    transform: rotate(-2deg);
    animation: pof .7s cubic-bezier(.3, 1.5, .5, 1) both;
}
.onthulling h1 { font-size: 4.2rem; margin: .4rem 0 0; }
.leden { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 50rem; }
.leden .pil { font-size: 1.05rem; padding: .3em 1em; }
@keyframes pof { from { transform: rotate(8deg) scale(.3); opacity: 0; } }

/* het tafereel onderin de lobby */
.tafereel {
    position: fixed; left: 0; right: 0; bottom: 0;
    height: 21vh;
    pointer-events: none; z-index: 0;
    display: flex; align-items: flex-end; justify-content: space-between;
    padding: 0 2vw;
}
.tafereel svg { height: 100%; width: auto; display: block; }
.tafereel .rechts { height: 100%; display: flex; align-items: flex-end; gap: 1.2vw; }
.tafereel .boom { height: 86%; }
.tafereel .figuur { height: 74%; }
.tafereel .schoorsteen { height: 68%; }
.rookpluim { animation: rook 4s ease-out infinite; transform-origin: center; }
.rookpluim:nth-of-type(2) { animation-delay: 1.3s; }
.rookpluim:nth-of-type(3) { animation-delay: 2.6s; }
.zwaai-arm { animation: zwaai 2.6s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; }
@keyframes rook {
    0% { opacity: 0; transform: translate(0, 0) scale(.6); }
    25% { opacity: .55; }
    100% { opacity: 0; transform: translate(-14px, -70px) scale(1.7); }
}
@keyframes zwaai { 50% { transform: rotate(9deg); } }

/* --- de vraag ------------------------------------------------------ */
.vraag-groot { font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; font-size: 3.6rem; line-height: 1.12; max-width: 22ch; margin: 0; text-wrap: balance; }
.vraag-klein { font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; font-size: 2rem; line-height: 1.15; max-width: 36ch; margin: 0; text-wrap: balance; }
.vraag-foto { max-height: 34vh; max-width: 60%; border-radius: .8rem; box-shadow: var(--schaduw-diep); }
.vraag-foto.klein { max-height: 20vh; }
.uitleg { font-size: 1.4rem; color: rgba(243, 236, 226, .85); max-width: 40ch; margin: 0; text-wrap: balance; }
.uitleg.oker { color: var(--oker-licht); }
.toelichting {
    max-width: 50rem; padding: .8rem 1.4rem;
    border-left: .25rem solid var(--oker);
    background: rgba(0, 0, 0, .18);
    border-radius: 0 .6rem .6rem 0;
    font-size: 1.15rem; text-align: left;
}

/* antwoorden */
.antw-rooster { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; width: min(74rem, 100%); }
.antw-rooster.smal { grid-template-columns: 1fr; width: min(44rem, 100%); }
.antw {
    display: flex; align-items: center; gap: 1rem;
    padding: .9rem 1.2rem .9rem .9rem;
    border-radius: 1rem;
    background: var(--papier); color: var(--inkt);
    font-size: 1.5rem; font-weight: 500; text-align: left; line-height: 1.2;
    box-shadow: 0 .5rem 1.2rem rgba(0, 0, 0, .25);
    transition: opacity .4s, transform .4s, background .4s;
}
.antw .letter {
    flex: none; display: grid; place-items: center;
    width: 2.6rem; height: 2.6rem; border-radius: .7rem;
    background: var(--k); color: #fff;
    font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; font-size: 1.5rem;
}
.antw .tekst { flex: 1; min-width: 0; }
.antw .aantal { font-family: var(--mono); font-weight: 600; color: var(--gedempt); font-size: 1.3rem; }
.antw.fout { opacity: .38; transform: scale(.97); }
.antw.juist { background: #fff; box-shadow: 0 0 0 .3rem var(--oker-licht), 0 .8rem 2rem rgba(0, 0, 0, .35); transform: scale(1.02); }
.antw.juist .tekst::after { content: ' \2713'; color: var(--groen); font-weight: 700; }
.vers .antw { animation: opkomst .4s both; animation-delay: calc(var(--i) * 90ms); }

/* foto zoom */
.zoomvak {
    width: 30rem; aspect-ratio: 4 / 3;
    overflow: hidden; border-radius: 1rem;
    border: .35rem solid #fff;
    box-shadow: var(--schaduw-diep);
    background: #000;
}
.zoomvak img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.met-zoom { display: flex; align-items: center; justify-content: center; gap: 2rem; width: 100%; }
.met-zoom .antw-rooster { grid-template-columns: 1fr; width: 28rem; }

/* volgorde */
.kaartjes { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem; }
.kaartje {
    position: relative; width: 11rem;
    padding: .6rem .6rem .8rem;
    background: var(--papier); color: var(--inkt);
    border-radius: .8rem;
    box-shadow: 0 .6rem 1.4rem rgba(0, 0, 0, .3);
}
.kaartje .foto { aspect-ratio: 1; border-radius: .5rem; background: var(--zand) center / cover; }
.kaartje .naam { margin-top: .5rem; font-weight: 600; font-size: 1.05rem; line-height: 1.2; }
.kaartje .waarde { font-family: var(--mono); font-weight: 600; font-size: 1.3rem; color: var(--wijn); }
.kaartje .plek {
    position: absolute; top: -.8rem; left: -.8rem;
    width: 2.2rem; height: 2.2rem; border-radius: 50%;
    display: grid; place-items: center;
    background: var(--oker); color: var(--donker);
    font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; font-size: 1.2rem;
}
.vers .kaartje { animation: opkomst .45s both; animation-delay: calc(var(--i) * 120ms); }

/* verbinden */
.mon-podium .paren { width: min(46rem, 100%); font-size: 1.3rem; }

/* wie had het goed / wie komt naar voren */
.koppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.2rem 1.6rem; max-width: 100%; }
.kop-team { display: flex; flex-direction: column; align-items: center; gap: .3rem; width: 7.5rem; }
.kop-team .avatar { --maat: 4.4rem; border-width: .2rem; }
.kop-team .naam { font-size: .95rem; font-weight: 600; line-height: 1.15; }
.kop-team .plus { font-family: var(--mono); font-weight: 600; font-size: 1.2rem; color: var(--oker-licht); }
.kop-team.groot { width: 12rem; padding: 1rem; background: var(--papier); color: var(--inkt); border-radius: 1rem; }
.kop-team.groot .wie { font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; font-size: 1.9rem; color: var(--wijn); }
.vers .kop-team { animation: pof .5s both; animation-delay: calc(var(--i) * 80ms); }

/* tussenstand en eindstand */
.mon-podium .rang { width: min(60rem, 100%); font-size: 1.3rem; max-height: 100%; overflow: hidden; }
.mon-podium .rang .avatar { --maat: 2.8rem; }
.mon-podium .rang.krap { font-size: 1rem; gap: .3rem; }
.mon-podium .rang.krap .avatar { --maat: 2rem; }

.erepodium { display: flex; align-items: flex-end; justify-content: center; gap: 1.2rem; }
.trede { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 15rem; }
.trede .avatar { --maat: 7rem; border-width: .3rem; border-color: #fff; box-shadow: var(--schaduw-diep); }
.trede .naam { font-size: 1.4rem; font-weight: 600; line-height: 1.15; }
.trede .score { font-family: var(--mono); font-weight: 600; font-size: 1.5rem; color: var(--oker-licht); }
.trede .blok {
    width: 100%; border-radius: .8rem .8rem 0 0;
    background: linear-gradient(var(--oker-licht), var(--oker));
    color: var(--donker); font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; font-size: 3.4rem;
    display: grid; place-items: center;
    transform-origin: bottom; animation: groei .9s cubic-bezier(.2, .9, .3, 1) both;
}
.trede.p1 .blok { height: 11rem; animation-delay: .9s; }
.trede.p2 .blok { height: 8rem; animation-delay: .5s; background: linear-gradient(#f3ece2, #cdbfa8); }
.trede.p3 .blok { height: 5.5rem; animation-delay: .1s; background: linear-gradient(#d9a273, #a86b3c); }
.trede.p1 .avatar { --maat: 9rem; }
.trede > :not(.blok) { animation: opkomst .5s both; animation-delay: inherit; }
.trede.p1 > :not(.blok) { animation-delay: 1.5s; }
.trede.p2 > :not(.blok) { animation-delay: 1.1s; }
.trede.p3 > :not(.blok) { animation-delay: .7s; }
@keyframes groei { from { transform: scaleY(0); } }
.rest-lijst { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1rem; font-size: 1.1rem; color: rgba(243, 236, 226, .85); }
.rest-lijst b { font-family: var(--mono); font-weight: 600; color: var(--oker-licht); }

/* het juiste paar: twee rijtjes naast elkaar */
.paar-kolommen { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.6rem; width: min(64rem, 100%); }
.paar-rijtje { display: grid; gap: .7rem; }
.paar-rijtje .antw { justify-content: center; text-align: center; padding: .8rem 1.2rem; font-size: 1.4rem; }
.paar-rijtje .antw .tekst { flex: none; }
.paar-teken { font-family: var(--mono); font-size: 3rem; font-weight: 600; color: var(--oker-licht); }