/* ===========================================================
   De Grote SinterKerst-Quiz 2026 - de iPads
   Teamtablet en quizmaster: bordeaux zoals de monitor, crème kaarten, grote aanraakvlakken.
   =========================================================== */

html { font-size: 17px; }
@media (min-width: 700px) { html { font-size: 21px; } }

body {
    /* geen tekstselectie of dubbeltik-zoom midden in het spel */
    user-select: none; -webkit-user-select: none;
    touch-action: manipulation;
    overscroll-behavior: none;
}
input, textarea { user-select: text; -webkit-user-select: text; }

.tab {
    position: relative; z-index: 1;
    max-width: 46rem; margin: 0 auto;
    min-height: 100vh; min-height: 100dvh;
    display: flex; flex-direction: column; gap: 1rem;
    padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right))
             max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
}
.tab > section { display: flex; flex-direction: column; gap: 1rem; flex: 1; }
.groei { flex: 1; }
.rij { display: flex; align-items: center; gap: .7rem; }
.rij.wrap { flex-wrap: wrap; }
.rij > .groei { min-width: 0; }
.centreer { text-align: center; }

/* --- balk bovenin ------------------------------------------------ */
.balk {
    display: flex; align-items: center; gap: .8rem;
    padding: .6rem .8rem;
    background: rgba(0, 0, 0, .22);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: var(--rond);
}
.balk .avatar { --maat: 3rem; }
.balk .wie { flex: 1; min-width: 0; }
.balk .naam { font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; font-size: 1.25rem; line-height: 1.15; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balk .klok { --maat: 3.4rem; }

/* --- teamkeuze ----------------------------------------------------- */
.welkom { text-align: center; padding: 1.5rem 0 .5rem; }
.welkom .logo { margin: 0 auto 1rem; }
.teamkeuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .7rem; }
.teamkeuze button {
    display: flex; align-items: center; gap: .8rem;
    min-height: 4.4rem; padding: .7rem 1rem;
    border: 1.5px solid var(--rand); border-left: .5rem solid var(--kleur);
    border-radius: var(--rond);
    background: var(--papier);
    font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; font-size: 1.2rem; text-align: left;
    box-shadow: var(--schaduw);
    cursor: pointer;
}
.teamkeuze button:active { transform: scale(.98); }
.teamkeuze button:disabled { opacity: .45; box-shadow: none; }
.teamkeuze small { display: block; font-family: var(--schrift); font-size: .78rem; color: var(--gedempt); }

/* --- selfie -------------------------------------------------------- */
.selfie-vak {
    position: relative;
    aspect-ratio: 4 / 3;
    width: min(100%, calc((100dvh - 19rem) * 1.333)); min-width: 14rem;
    margin: 0 auto;
    background: var(--inkt);
    border: .5rem solid #fff;
    border-radius: var(--rond);
    box-shadow: var(--schaduw);
    overflow: hidden;
}
.selfie-vak video, .selfie-vak img { width: 100%; height: 100%; object-fit: cover; display: block; }
.selfie-vak video { transform: scaleX(-1); }       /* spiegelbeeld, zoals de camera-app */
.aftel {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; font-size: 9rem; color: #fff;
    text-shadow: 0 .2rem 1.5rem rgba(0, 0, 0, .6);
}

/* --- wachtschermen en uitslag -------------------------------------- */
.wacht {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .4rem; text-align: center;
    padding: 2rem 1.2rem;
}
.wacht .icoon { font-size: 3.6rem; line-height: 1; margin-bottom: .6rem; }
.wacht.zweef .icoon { animation: zweef 2.4s ease-in-out infinite; }
.wacht h2 { margin: 0; font-size: 1.8rem; }
.wacht p { margin: 0; color: var(--gedempt); max-width: 28ch; }
@keyframes zweef { 50% { transform: translateY(-.5rem) rotate(-4deg); } }

.uitslag { text-align: center; padding: 1.8rem 1.2rem; border-width: 2px; }
.uitslag .icoon { font-size: 3.4rem; line-height: 1; }
.uitslag h2 { font-size: 2.1rem; margin: .4rem 0 .1rem; }
.uitslag .plus { font-family: var(--mono); font-weight: 600; font-size: 1.5rem; color: var(--oker-diep); }
.uitslag.goed { background: var(--groen-licht); border-color: var(--groen); }
.uitslag.fout { background: var(--rood-licht); border-color: var(--rood); }
.uitslag .juiste { margin-top: 1rem; padding-top: .9rem; border-top: 1px solid rgba(42, 26, 20, .15); }
.uitslag .juiste b { display: block; font-weight: 600; font-size: 1.35rem; }

.hint { text-align: center; color: var(--o-zacht); font-size: .95rem; margin: 0; }
.plaats-groot { font-family: var(--mono); font-weight: 600; font-size: 4rem; line-height: 1; color: var(--wijn); }

/* --- meerkeuze ------------------------------------------------------ */
.keuzes { display: grid; grid-template-columns: 1fr 1fr; gap: .7rem; }
.keuzes.smal { grid-template-columns: 1fr; }
@media (max-width: 520px) { .keuzes { grid-template-columns: 1fr; } }
.keuze {
    display: flex; align-items: center; gap: .9rem;
    min-height: 5.4rem; padding: .9rem 1.1rem;
    border: 0; border-radius: var(--rond);
    background: var(--papier); color: var(--inkt);
    font-size: 1.2rem; font-weight: 600; text-align: left; line-height: 1.2;
    box-shadow: 0 .25rem 0 rgba(0, 0, 0, .28), 0 .5rem 1.2rem rgba(0, 0, 0, .25);
    cursor: pointer;
    transition: transform .08s, opacity .25s, box-shadow .08s;
}
.keuze:active:not(:disabled) { transform: translateY(.2rem); box-shadow: 0 .05rem 0 rgba(0, 0, 0, .22); }
.keuze .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(--mono); font-size: 1.35rem; font-weight: 600;
}
.keuze .tekst { flex: 1; min-width: 0; }
.keuze.gedimd { opacity: .38; box-shadow: none; }
.keuze.gekozen { background: #fff; box-shadow: 0 0 0 .3rem var(--oker-licht), 0 .6rem 1.4rem rgba(0, 0, 0, .35); }
.keuze.gekozen .tekst::after { content: ' \2713'; color: var(--groen); }
.variant-foto { width: 100%; max-height: 38vh; object-fit: contain; border-radius: var(--rond); }

/* --- foto zoom ------------------------------------------------------ */
.zoomvak {
    position: relative;
    width: min(100%, 28rem, calc((100dvh - 11rem) * 1.333)); margin: 0 auto;
    aspect-ratio: 4 / 3; overflow: hidden;
    border: .35rem solid #fff; border-radius: var(--rond);
    background: #000; box-shadow: var(--schaduw);
}
.zoomvak img { width: 100%; height: 100%; object-fit: cover; display: block; will-change: transform; }
.zoomvak .waard {
    position: absolute; right: .5rem; bottom: .5rem;
    padding: .2rem .7rem; border-radius: 999px;
    background: rgba(0, 0, 0, .65); color: #fff;
    font-size: .85rem; font-weight: 600; font-variant-numeric: tabular-nums;
}

/* --- verbinden ------------------------------------------------------ */
.kp-bord { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.kp-kolom { display: grid; gap: .6rem; align-content: start; }
.kp-vak {
    display: flex; align-items: center; gap: .6rem;
    min-height: 3.8rem; padding: .6rem .8rem;
    border: 2px solid var(--rand); border-radius: var(--rond-klein);
    background: var(--papier);
    font-weight: 600; text-align: left; line-height: 1.2;
    cursor: pointer;
}
.kp-vak .kp-nr {
    flex: none; display: grid; place-items: center;
    width: 1.8rem; height: 1.8rem; border-radius: 50%;
    background: var(--zand); color: #fff; font-size: .9rem;
}
.kp-vak.aan { border-color: var(--kp); }
.kp-vak.aan .kp-nr { background: var(--kp); }
.kp-vak.actief { border-color: var(--oker); box-shadow: 0 0 0 .2rem rgba(200, 132, 43, .35); }
.kp-vak:disabled { opacity: .7; }

/* --- volgorde ------------------------------------------------------- */
.vg-rand { text-align: center; font-size: .8rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--o-zacht); padding: .2rem; }
.vg-lijst { display: grid; gap: .5rem; }
.vg-item {
    display: flex; align-items: center; gap: .7rem;
    padding: .45rem .5rem .45rem .7rem;
    border: 1.5px solid var(--rand); border-radius: var(--rond-klein);
    background: var(--papier);
}
.vg-plek { font-family: var(--mono); font-weight: 600; font-size: 1.3rem; color: var(--gedempt); width: 1.2em; text-align: center; }
.vg-foto { flex: none; width: 3.4rem; height: 3.4rem; border-radius: .5rem; background: var(--zand) center / cover; }
.vg-naam { flex: 1; min-width: 0; font-weight: 600; line-height: 1.2; }
.vg-waarde { font-family: var(--mono); font-weight: 600; color: var(--wijn); white-space: nowrap; }
.vg-pijl {
    flex: none; width: 3.2rem; height: 3.2rem;
    border: 0; border-radius: .7rem;
    background: var(--wijn); color: #fff; font-size: 1.1rem;
    cursor: pointer;
}
.vg-pijl:disabled { background: var(--zand); color: var(--rand); }
.vg-item.goed { border-color: var(--groen); background: var(--groen-licht); }
.vg-item.fout { border-color: var(--rood); background: var(--rood-licht); }

/* --- schuifpuzzel ---------------------------------------------------- */
.pz-rij { display: flex; gap: 1rem; align-items: flex-start; justify-content: center; }
.pz-voorbeeld { width: 24%; border-radius: var(--rond-klein); border: 3px solid #fff; box-shadow: var(--schaduw); }
.pz-bord {
    --verhouding: 1.333;
    flex: 0 1 auto;
    /* nooit hoger dan het scherm: de hele puzzel moet zonder scrollen passen */
    width: min(100%, calc((100dvh - 12rem) * var(--verhouding)));
    display: grid; gap: 3px;
    aspect-ratio: 4 / 3;
    padding: 3px; border-radius: var(--rond-klein);
    background: var(--inkt);
    box-shadow: var(--schaduw);
}
.pz-stuk { border: 0; padding: 0; border-radius: 4px; background-color: var(--zand); background-repeat: no-repeat; }
.pz-stuk.kan { cursor: pointer; }
.pz-leeg { background: rgba(255, 255, 255, .06); }
.pz-klaar { gap: 0; padding: 0; transition: gap .3s, padding .3s; }

/* --- loting ----------------------------------------------------------- */
.loting .naam-groot { font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; font-size: 3.2rem; line-height: 1.1; color: var(--wijn); min-height: 1.2em; }
.loting.draait .naam-groot { animation: klop .16s linear infinite alternate; color: var(--gedempt); }

/* ===========================================================
   Quizmaster
   =========================================================== */
.qm { padding-bottom: 0; }
.qm-hoofd { display: grid; gap: 1rem; align-content: start; flex: 1; }

/* de vijf stappen van een vraag */
.stappen { display: flex; gap: .3rem; }
.stappen span {
    flex: 1; text-align: center;
    padding: .35rem .2rem; border-radius: 999px;
    background: rgba(255, 255, 255, .1); color: var(--zalm);
    font-size: .72rem; font-weight: 600; letter-spacing: .03em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.stappen span.geweest { background: rgba(255, 255, 255, .22); color: #fff; }
.stappen span.nu { background: var(--oker-licht); color: var(--donker); }

.qm-vraag { font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; font-size: 1.45rem; line-height: 1.2; margin: .5rem 0; }
.qm-foto { max-height: 22vh; border-radius: var(--rond-klein); display: block; }
.qm-opties { display: grid; gap: .35rem; margin-top: .8rem; }
.qm-optie {
    display: flex; align-items: center; gap: .7rem;
    padding: .45rem .8rem .45rem .45rem;
    border-radius: var(--rond-klein);
    border: 1.5px solid var(--rand);
    background: #fff;
}
.qm-optie .letter {
    flex: none; display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem; border-radius: .5rem;
    background: var(--k, var(--gedempt)); color: #fff; font-family: var(--kop); font-weight: 600; letter-spacing: -.015em;
}
.qm-optie .tekst { flex: 1; min-width: 0; }
.qm-optie .aantal { font-family: var(--mono); font-weight: 600; color: var(--gedempt); }
.qm-optie.juist { border-color: var(--groen); background: var(--groen-licht); font-weight: 600; }
.qm-optie.juist .tekst::after { content: ' \2713'; color: var(--groen); }

/* teams: wie is klaar */
.qm-teams { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .45rem; }
.qm-team {
    display: flex; align-items: center; gap: .55rem;
    padding: .35rem .7rem .35rem .35rem;
    border-radius: var(--rond-klein);
    border: 1.5px solid var(--rand);
    background: #fff;
    font-size: .9rem;
}
.qm-team .avatar { --maat: 2rem; }
.qm-team .naam { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qm-team .extra { color: var(--gedempt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.qm-team.klaar { border-color: var(--groen); background: var(--groen-licht); }
.qm-team.klaar .extra { color: var(--groen); font-weight: 600; }

/* lobby: cadeaus uitpakken */
.qm-rooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); gap: .7rem; }
.qm-tegel {
    display: flex; flex-direction: column; gap: .35rem;
    padding: .5rem; text-align: left;
    border: 2px solid var(--rand); border-radius: var(--rond);
    background: #fff; cursor: pointer;
}
.qm-tegel .foto {
    aspect-ratio: 4 / 3; border-radius: .6rem;
    background: var(--kleur) center / cover;
    display: grid; place-items: center; font-size: 2rem;
}
.qm-tegel .naam { font-weight: 600; line-height: 1.2; }
.qm-tegel .staat { font-size: .78rem; color: var(--gedempt); }
.qm-tegel.klaar { border-color: var(--oker); box-shadow: 0 0 0 .2rem rgba(200, 132, 43, .3); }
.qm-tegel.klaar .staat { color: var(--oker-diep); font-weight: 600; }
.qm-tegel.open { border-color: var(--groen); }
.qm-tegel:disabled { opacity: .5; cursor: default; }
.qm-polaroid {
    width: min(100%, 22rem); aspect-ratio: 4 / 3; margin: .8rem auto;
    border: .5rem solid #fff; border-radius: .3rem;
    background: var(--kleur) center / cover;
    box-shadow: var(--schaduw);
}

/* punten uitdelen */
.punten-rij { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; border-bottom: 1px solid var(--zand); }
.punten-rij .naam { flex: 1; min-width: 0; font-weight: 600; }
.punten-rij input { width: 5rem; text-align: center; font-family: var(--mono); font-weight: 600; font-size: 1.2rem; padding: .4rem; }
.punten-rij button { width: 2.8rem; height: 2.8rem; border-radius: 50%; border: 1.5px solid var(--rand); background: #fff; font-size: 1.3rem; cursor: pointer; }
.punten-rij button.vol { width: auto; padding: 0 .9rem; border-radius: 999px; font-size: .85rem; font-weight: 600; }

details.inklap > summary { cursor: pointer; font-weight: 600; padding: .2rem 0; }
details.inklap[open] > summary { margin-bottom: .7rem; }
.route { display: grid; gap: .25rem; }
.route button {
    display: flex; gap: .6rem; align-items: baseline;
    padding: .45rem .7rem; text-align: left;
    border: 0; border-radius: .5rem; background: transparent; cursor: pointer;
}
.route button:active { background: var(--zand); }
.route .ronde { font-family: var(--kop); font-weight: 600; letter-spacing: -.015em; font-size: 1.05rem; padding: .6rem .7rem .1rem; color: var(--wijn); }
.route .huidig { background: var(--zand); font-weight: 600; }

/* vaste knoppenbalk onderin */
.actiebalk {
    position: sticky; bottom: 0; z-index: 5;
    display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
    margin: 0 -1rem;
    padding: .8rem 1rem max(.8rem, env(safe-area-inset-bottom));
    background: linear-gradient(rgba(69, 0, 15, 0), var(--wijn-diep) 26%);
}
.actiebalk .hoofd { grid-column: 1 / -1; }
.actiebalk:has(> :nth-child(2):last-child) > :nth-child(2) { grid-column: 1 / -1; }

/* ===========================================================
   Liggend: de iPads staan tijdens de quiz op hun kant
   =========================================================== */
.naast { display: grid; gap: 1rem; }
.qm-kolommen { display: grid; gap: 1rem; align-items: start; }
.qm-kolommen > div { display: grid; gap: 1rem; min-width: 0; }
.qm-kolommen > div:empty { display: none; }

@media (orientation: landscape) and (min-width: 900px) {
    .tab { max-width: 68rem; }
    .naast { grid-template-columns: 1.15fr 1fr; align-items: center; }
    .naast .zoomvak { width: min(100%, calc((100dvh - 11rem) * 1.333)); }
    .qm-kolommen { grid-template-columns: 1.2fr 1fr; }
    .qm-kolommen:has(> div:empty) { grid-template-columns: 1fr; }
    .keuze { min-height: 6.2rem; font-size: 1.35rem; }
    .vg-lijst { grid-template-columns: 1fr; }
    .wacht h2 { font-size: 2.2rem; }
    .teamkeuze { grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); }

    /* selfie: camera links, knoppen rechts, zodat alles zonder scrollen past */
    #s-selfie:not([hidden]) { display: grid; grid-template-columns: 1.25fr 1fr; grid-auto-rows: min-content; gap: 1rem 1.5rem; align-content: start; }
    #s-selfie > .balk { grid-column: 1 / -1; }
    #s-selfie > .selfie-vak { grid-column: 1; grid-row: 2 / span 6; width: min(100%, calc((100dvh - 8rem) * 1.333)); }
    #s-selfie > :not(.balk):not(.selfie-vak) { grid-column: 2; }
    #s-selfie > .centreer { text-align: left; }
    #s-selfie .rij.wrap { flex-direction: column; align-items: stretch; }
}

/* ===========================================================
   De uitslagronde: adventskalender op de iPad van het team
   =========================================================== */
.kalender-scherm { display: grid; gap: 1rem; flex: 1; align-content: start; }
.kalender-zij { display: grid; gap: 1rem; align-content: start; }

.deur-groot { position: relative; min-height: 21rem; perspective: 1600px; }
.deur-groot .achter { display: grid; gap: .8rem; align-content: center; min-height: 21rem; }
.deur-groot .voor {
    position: absolute; inset: 0; z-index: 2;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .7rem;
    padding: 1.5rem; text-align: center;
    border-radius: var(--rond);
    border: .35rem solid var(--oker-licht);
    background:
        radial-gradient(circle at 92% 50%, var(--oker-licht) 0 .5rem, transparent .55rem),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, .05) 0 1.2rem, transparent 1.2rem 2.4rem),
        var(--wijn);
    color: #fff;
    transform-origin: left center;
    transition: transform 1s cubic-bezier(.6, 0, .3, 1), box-shadow 1s;
    box-shadow: 0 .5rem 1.4rem rgba(69, 0, 15, .3);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
}
.deur-groot .voor .nr { font-family: var(--mono); font-weight: 600; font-size: 5.5rem; line-height: 1; color: var(--oker-licht); }
.deur-groot .voor .vraagtekst { font-weight: 600; font-size: 1.6rem; line-height: 1.2; max-width: 24ch; text-wrap: balance; }
.deur-groot .voor .mijn { font-size: 1.15rem; padding: .7rem 1.1rem; border-radius: var(--rond-klein); background: rgba(0, 0, 0, .22); color: #f6e3d0; max-width: 100%; }
.deur-groot .voor .mijn b { color: #fff; }
.deur-groot .voor .tip { font-size: .9rem; color: var(--zalm); letter-spacing: .04em; }
.deur-groot:not(.open) .voor { animation: deur-wiebel 2.2s ease-in-out infinite; }
.deur-groot.open .voor { transform: rotateY(-108deg); box-shadow: none; pointer-events: none; }
@keyframes deur-wiebel { 0%, 84%, 100% { transform: rotateY(0); } 88% { transform: rotateY(-7deg); } 94% { transform: rotateY(-3deg); } }

.totaal { display: flex; align-items: baseline; gap: .6rem; padding: .9rem 1.2rem; }
.totaal .label { flex: 1; }
.totaal b { font-family: var(--mono); font-size: 2.6rem; line-height: 1; color: var(--wijn); font-variant-numeric: tabular-nums; }

.kalender { display: grid; grid-template-columns: repeat(auto-fill, minmax(4.4rem, 1fr)); gap: .5rem; }
.deurtje {
    aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    border-radius: var(--rond-klein);
    background: var(--wijn); color: var(--oker-licht);
    border: 2px solid var(--wijn);
    font-family: var(--mono); font-weight: 600; font-size: 1.5rem; line-height: 1.1;
}
.deurtje i { font-style: normal; font-size: 1.3rem; }
.deurtje b { font-size: .95rem; }
.deurtje.goed { background: var(--groen-licht); border-color: var(--groen); color: var(--groen); }
.deurtje.fout { background: var(--rood-licht); border-color: var(--rood); color: var(--rood); }
.deurtje.nu { box-shadow: 0 0 0 .22rem var(--oker-licht); }
.deurtje.wacht { background: var(--wijn); border-color: var(--wijn); color: var(--oker-licht); }
.deurtje.wacht > * { visibility: hidden; }

@media (orientation: landscape) and (min-width: 900px) {
    .kalender-scherm { grid-template-columns: 1.35fr 1fr; align-items: start; }
    .deur-groot, .deur-groot .achter { min-height: calc(100dvh - 9rem); }
}

/* ===========================================================
   Op bordeaux: wat anders is dan op een crème kaart
   =========================================================== */
/* wachtschermen staan los op de ondergrond, net als de teksten op de monitor */
.donker .kaart.wacht { background: transparent; border-color: transparent; box-shadow: none; color: #fff; }
.donker .wacht p { color: var(--zalm); }
.donker .wacht h2 { font-size: 2.2rem; }
.donker .loting .naam-groot { color: var(--oker-licht); }
.donker .loting.draait .naam-groot { color: var(--zalm); }
/* gesloten deurtjes hebben een gouden rand nodig om van de ondergrond los te komen */
.donker .deurtje:not(.goed):not(.fout) { border-color: rgba(234, 181, 79, .55); background: rgba(0, 0, 0, .25); }
/* crème vlakken die los op de ondergrond staan houden donkere tekst */
.teamkeuze button, .kp-vak, .vg-item { color: var(--inkt); }
.teamkeuze small { color: var(--gedempt); }