@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Lora:wght@400;500;600&display=swap");:root{--kleur-inkt-donker:#1a1410;--kleur-inkt-licht:#2c2318;--kleur-roest:#b5451b;--kleur-saliegroen:#87a087;--kleur-creme:#f3e9d2;--kleur-goud:#d4a017;--kleur-rood:#c84135;--kleur-blauw:#3a6b9c;--kleur-geel:#d4a017;--kleur-groen:#87a087;--kleur-paars:#7e5a8c;--kleur-oranje:#d97a2c;--font-titel:"Playfair Display",Georgia,serif;--font-tekst:"Lora",Georgia,serif;--rondje:0.5rem}*{box-sizing:border-box;margin:0;padding:0}body,html{background:var(--kleur-inkt-donker);font-family:var(--font-tekst);min-height:100vh}body,h1,h2,h3,html{color:var(--kleur-creme)}h1,h2,h3{font-family:var(--font-titel)}h1{font-size:2.5rem;margin-bottom:1rem}a{color:var(--kleur-goud);text-decoration:none}a:hover{text-decoration:underline}button{background:var(--kleur-roest);color:var(--kleur-creme);border:none;padding:.75rem 1.5rem;font-family:var(--font-tekst);font-size:1rem;border-radius:var(--rondje);cursor:pointer;transition:background .15s}button:hover:not(:disabled){background:#c95423}button:disabled{background:var(--kleur-inkt-licht);color:#6c5e4c;cursor:not-allowed}button.secundair{background:var(--kleur-inkt-licht);color:var(--kleur-creme)}input[type=number],input[type=password],input[type=text],select,textarea{background:var(--kleur-inkt-licht);color:var(--kleur-creme);border:1px solid #4a3e30;padding:.5rem .75rem;font-family:var(--font-tekst);font-size:1rem;border-radius:var(--rondje);width:100%}input:focus,select:focus,textarea:focus{outline:2px solid var(--kleur-goud);outline-offset:1px}.container{max-width:960px;margin:0 auto;padding:2rem 1rem}.kaart{background:var(--kleur-inkt-licht);padding:1.5rem;border-radius:var(--rondje);margin-bottom:1rem}.knop-rij{display:flex;gap:.5rem;flex-wrap:wrap}.foutmelding{background:#4a1c1a;color:#ffb3b0;padding:.75rem;border-radius:var(--rondje);margin:1rem 0}.scherm-volledig{min-height:100vh;width:100vw;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2vh 2vw;box-sizing:border-box;overflow-x:hidden}.scherm-volledig h1{font-size:clamp(2.5rem,6vw,5.5rem);text-align:center}.scherm-volledig .pin{font-size:clamp(4rem,12vw,9rem);letter-spacing:.5rem;color:var(--kleur-goud);font-family:var(--font-titel)}.scherm-volledig h2{font-size:clamp(1.5rem,3vw,2.5rem)}.categorie-balk{position:fixed;top:0;left:0;right:0;background:var(--kleur-roest);color:var(--kleur-creme);padding:.5rem 1.5rem;display:flex;justify-content:space-between;align-items:center;font-size:clamp(.9rem,1.2vw,1.2rem);z-index:50;font-family:var(--font-titel);letter-spacing:.05em}.quizmaster{position:fixed;right:1.5vw;bottom:1.5vw;display:flex;align-items:flex-end;gap:.75rem;z-index:60;pointer-events:none;max-width:38vw}.quizmaster .ballon{background:var(--kleur-creme);color:var(--kleur-inkt-donker);padding:.75rem 1rem;border-radius:1rem;font-size:clamp(.85rem,1.1vw,1.05rem);line-height:1.3;box-shadow:0 4px 12px rgba(0,0,0,.3);position:relative;font-family:var(--font-tekst);max-width:32vw;animation:ballonIn .4s ease-out}.quizmaster .ballon:after{content:"";position:absolute;right:-10px;bottom:18px;border:8px solid transparent;border-left:8px solid var(--kleur-creme)}.quizmaster .poppetje{font-size:clamp(3rem,5vw,5rem);background:var(--kleur-inkt-licht);border-radius:50%;width:clamp(60px,7vw,90px);height:clamp(60px,7vw,90px);display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.4);border:3px solid var(--kleur-goud);flex-shrink:0}@keyframes ballonIn{0%{opacity:0;transform:translateY(8px) scale(.9)}to{opacity:1;transform:translateY(0) scale(1)}}.reveal-uitslag{font-size:clamp(2rem,5vw,4rem);color:var(--kleur-goud);text-align:center;margin:1rem 0;font-weight:700}.mc-opties{display:grid;grid-template-columns:1fr 1fr;grid-gap:1rem;gap:1rem;margin-top:2rem}.mc-opties.breed{grid-template-columns:repeat(4,1fr);gap:1.5rem;width:90vw;max-width:1400px}.mc-opties.breed .mc-optie{font-size:clamp(1rem,1.6vw,1.6rem);padding:clamp(1rem,2vw,2rem);text-align:center}.mc-optie{padding:1.5rem;border-radius:var(--rondje);font-size:1.25rem;cursor:pointer;transition:transform .1s;border:2px solid transparent}.mc-optie:hover:not(:disabled){transform:scale(1.02)}.mc-optie.rood{background:var(--kleur-rood)}.mc-optie.blauw{background:var(--kleur-blauw)}.mc-optie.geel{background:var(--kleur-geel);color:var(--kleur-inkt-donker)}.mc-optie.groen{background:var(--kleur-groen);color:var(--kleur-inkt-donker)}.mc-optie.paars{background:var(--kleur-paars)}.mc-optie.oranje{background:var(--kleur-oranje);color:var(--kleur-inkt-donker)}.mc-optie.juist{border:4px solid var(--kleur-goud)}.mc-optie.gekozen{outline:3px solid var(--kleur-creme)}@keyframes aftellen{0%{width:100%}to{width:0}}.timer-bar-vulling{height:100%;background:var(--kleur-goud);border-radius:3px;animation-name:aftellen;animation-timing-function:linear;animation-fill-mode:forwards}.timer-bar-vulling.bijna-op{background:var(--kleur-rood)}.leaderboard{width:100%;max-width:600px}.leaderboard-rij{display:flex;justify-content:space-between;padding:.5rem 1rem;background:var(--kleur-inkt-licht);margin-bottom:.25rem;border-radius:var(--rondje)}.leaderboard-rij.top-1{background:var(--kleur-goud);color:var(--kleur-inkt-donker);font-size:1.25rem;font-weight:700}.leaderboard-rij.top-2{background:#b8a888;color:var(--kleur-inkt-donker)}.leaderboard-rij.top-3{background:var(--kleur-roest)}