:root{
  --hout:#7a4a22;--hout-donker:#4e2d12;--papier:#fff8e8;--inkt:#1d1d1d;
  --groen:#2f8a3a;--roze:#ec1e8c;--geel:#ffd43a;
  --schaduw:0 6px 18px rgba(0,0,0,.28);
  --kaart-b:clamp(128px,11vw,190px);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:Nunito,system-ui,sans-serif;color:var(--inkt);
  background:#3a8fd6;
  display:flex;flex-direction:column;min-height:100vh;min-height:100dvh;
}
body::before{content:"";position:fixed;inset:0;background:linear-gradient(rgba(0,0,0,.1),rgba(0,0,0,.1)),url(../achtergrond.jpg?v=8ee6a2eb2d) center bottom/cover no-repeat;z-index:-1}
button{font:inherit;cursor:pointer}
button:disabled{cursor:default}
h1,h2,.naam,.feest-titel,.einde-titel,.knop{font-family:"Luckiest Guy",Nunito,sans-serif;letter-spacing:.02em;font-weight:400}

/* ---------- Kop ---------- */
.kop{display:flex;align-items:center;gap:16px;padding:8px 16px;background:linear-gradient(var(--hout),var(--hout-donker));border-bottom:4px solid #2e1a0a;box-shadow:var(--schaduw);position:relative;z-index:2}
.logo{height:56px;width:auto;display:block}
.kop-midden{flex:1;min-width:0;text-align:center}
.status{color:#fff;font-weight:900;font-size:clamp(14px,1.6vw,20px);text-shadow:0 2px 0 rgba(0,0,0,.5)}
.voortgang{color:var(--geel);font-weight:800;font-size:13px}
.kop-knoppen{display:flex;gap:8px}

.knop{border:0;border-radius:12px;padding:10px 16px;font-size:17px;color:#fff;background:linear-gradient(#ff3fa4,var(--roze));box-shadow:0 4px 0 #a40e5f,var(--schaduw);text-shadow:0 2px 0 rgba(0,0,0,.25)}
.knop:hover:not(:disabled){filter:brightness(1.08)}
.knop:active:not(:disabled){transform:translateY(2px);box-shadow:0 2px 0 #a40e5f}
.knop.licht{background:var(--papier);color:var(--hout-donker);box-shadow:0 4px 0 #c9b48a,var(--schaduw);text-shadow:none}
.knop.groot{font-size:22px;padding:14px 22px;width:100%}
.knop:disabled{background:#b9b0a0;box-shadow:0 4px 0 #8c8475;font-family:Nunito,sans-serif;font-weight:800;font-size:16px}
.link{background:none;border:0;color:var(--hout);text-decoration:underline;margin-top:10px;font-weight:800}

/* ---------- Tafel ---------- */
.tafel{flex:1;display:grid;grid-template-columns:1fr minmax(240px,320px);grid-template-rows:auto 1fr;gap:12px;padding:12px 16px 16px;min-height:0}
.tegenstanders{grid-column:1;display:flex;gap:12px;flex-wrap:wrap}
.midden{grid-column:2;grid-row:1 / span 2;background:rgba(255,248,232,.94);border-radius:16px;box-shadow:var(--schaduw);padding:12px 14px;display:flex;flex-direction:column;min-height:0;max-height:calc(100dvh - 110px);position:sticky;top:12px}
.midden h2{margin:0 0 6px;font-size:20px;color:var(--hout)}
.log{list-style:none;margin:0;padding:0;overflow-y:auto;font-size:14px;line-height:1.35;flex:1}
.log li{padding:6px 0;border-bottom:1px dashed #d9c9a3}
.log li:last-child{font-weight:800}

.tegenstander,.ik-kop{position:relative;display:flex;align-items:flex-start;gap:10px;background:rgba(255,248,232,.94);border-radius:16px;padding:10px 12px;box-shadow:var(--schaduw);border:3px solid transparent;transition:border-color .2s,transform .2s}
.tegenstander{flex:1 1 220px;min-width:200px}
.aan-de-beurt{border-color:var(--geel)!important;box-shadow:0 0 0 4px rgba(255,212,58,.45),var(--schaduw)}
.tegenstander.uit{opacity:.6}
.avatar{font-size:40px;line-height:1;width:52px;height:52px;display:grid;place-items:center;background:#fff;border-radius:50%;box-shadow:inset 0 0 0 3px #e9dcbc;flex:none}
.info{min-width:0;flex:1}
.naam{font-size:20px;color:var(--hout-donker);line-height:1.1}
.telling{font-size:13px;font-weight:800;color:#6d5a3a}
.ruggen{position:relative;height:40px;margin-top:6px;width:calc(26px + (var(--n) - 1) * 9px);max-width:100%}
.rug{position:absolute;left:calc(var(--i) * 9px);top:0;width:28px;height:40px;border-radius:5px;border:2px solid #fff;background:radial-gradient(circle at 50% 42%,#7be26a 0 6px,transparent 7px),linear-gradient(135deg,#1c3d8f,#5b2bb3);box-shadow:0 1px 3px rgba(0,0,0,.35)}
.chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.chip{background:var(--k);color:#fff;font-size:12px;font-weight:900;padding:3px 8px;border-radius:999px;box-shadow:0 2px 0 rgba(0,0,0,.25);white-space:nowrap}
.geen{font-size:13px;color:#8a7a5a;font-weight:700}

.ik{grid-column:1;display:flex;flex-direction:column;gap:10px;min-height:0}
.ik-kop{align-items:center;flex-wrap:wrap}
.ik-kop .chips{margin:0 0 0 auto}
.hand{display:flex;flex-wrap:wrap;gap:10px;align-content:flex-start;padding:4px 0 8px}
.hand .kaart{transition:transform .15s,box-shadow .15s}
.hand.kan-vragen .kaart{cursor:pointer}
.hand.kan-vragen .kaart:hover,.hand.kan-vragen .kaart:focus-visible{transform:translateY(-8px) rotate(-1deg);box-shadow:0 14px 26px rgba(0,0,0,.4);outline:none}
.hand:not(.kan-vragen) .kaart{cursor:zoom-in}
.leeg{color:#fff;font-weight:800;text-shadow:0 2px 3px rgba(0,0,0,.6);padding:20px 0}

/* ---------- Kaart ---------- */
.kaart{
  --b:var(--kaart-b);
  width:var(--b);flex:none;background:#fff;border-radius:calc(var(--b) * .07);
  border:calc(var(--b) * .03) solid var(--k);box-shadow:0 5px 12px rgba(0,0,0,.35);
  overflow:hidden;display:flex;flex-direction:column;font-size:calc(var(--b) * .066);user-select:none;
}
.kaart-kop{display:flex;align-items:stretch;background:var(--k);color:#fff;min-height:2.6em}
.kaart-kop .nr{font-family:"Luckiest Guy",sans-serif;background:rgba(255,255,255,.95);color:var(--k);padding:.35em .4em 0;font-size:1.15em;border-bottom-right-radius:.4em}
.kaart-kop .titel{flex:1;font-family:"Luckiest Guy",sans-serif;text-transform:uppercase;font-size:.95em;line-height:1.05;padding:.35em .4em;display:flex;align-items:center;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.foto{aspect-ratio:4/3;background:#ddd;overflow:hidden}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.geen-foto{display:grid;place-items:center;height:100%;font-size:3em;background:color-mix(in srgb,var(--k) 18%,#fff)}
.vraag-kaart .geen-foto{aspect-ratio:4/3;font-size:32px}
.tekst{display:flex;gap:.35em;align-items:flex-start;padding:.4em .45em;font-weight:700;line-height:1.2;min-height:4.1em;font-size:.92em}
.tekst .ic{font-size:1.5em;line-height:1}
.lijst{margin:0;padding:.3em .5em .3em 1.7em;background:color-mix(in srgb,var(--k) 12%,#fff);border-top:1px solid color-mix(in srgb,var(--k) 35%,#fff);font-size:.82em;line-height:1.25;flex:1}
.lijst li{color:#555}
.lijst li.deze{color:var(--k);font-weight:900}
.kaart-voet{background:var(--k);color:#fff;font-weight:900;text-align:center;font-size:.85em;padding:.25em}
.kaart.nieuw{animation:nieuw 1.2s ease}
@keyframes nieuw{0%{transform:translateY(-40px) scale(1.15);box-shadow:0 0 0 8px var(--geel)}100%{transform:none}}
.kaart.groot{--b:min(330px,80vw)}

/* ---------- Bubbels en meldingen ---------- */
.bubbel-plek{position:absolute;left:50%;top:100%;z-index:5;width:max-content;max-width:min(320px,80vw);transform:translateX(-50%)}
.ik .bubbel-plek{top:auto;bottom:100%}
.bubbel{margin-top:10px;background:#fff;border:3px solid var(--inkt);border-radius:16px;padding:8px 12px;font-weight:800;font-size:15px;box-shadow:var(--schaduw);animation:plop .25s ease}
.ik .bubbel{margin:0 0 10px}
.bubbel{position:relative}
.bubbel::after{content:"";position:absolute;left:50%;top:-11px;margin-left:-9px;border:9px solid transparent;border-top:0;border-bottom:11px solid var(--inkt)}
.ik .bubbel::after{top:auto;bottom:-11px;border:9px solid transparent;border-bottom:0;border-top:11px solid var(--inkt)}
.bubbel.ja::after{border-bottom-color:var(--groen)}
.bubbel.nee::after{border-bottom-color:#c62828}
.bubbel.ja{background:#dcf7d6;border-color:var(--groen)}
.bubbel.nee{background:#ffe0e0;border-color:#c62828}
@keyframes plop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
.melding{position:fixed;left:50%;top:22%;transform:translateX(-50%);z-index:50;background:var(--geel);color:var(--hout-donker);font-family:"Luckiest Guy",sans-serif;font-size:clamp(24px,4vw,40px);padding:14px 26px;border-radius:18px;border:4px solid var(--hout-donker);box-shadow:var(--schaduw);animation:plop .3s ease;pointer-events:none}

.feest{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(0,0,0,.55);animation:plop .3s ease;padding:16px}
.feest.weg{opacity:0;transition:opacity .3s}
.feest-binnen{text-align:center;max-width:100%}
.feest-titel{font-size:clamp(48px,10vw,110px);color:var(--geel);-webkit-text-stroke:3px var(--hout-donker);text-shadow:0 6px 0 var(--hout-donker);line-height:1}
.feest-naam{color:#fff;font-weight:900;font-size:clamp(16px,2.2vw,24px);margin:6px 0 14px;text-shadow:0 2px 4px #000}
.feest-kaarten{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.feest-kaarten .kaart{--b:clamp(110px,15vw,180px);animation:waaier .5s ease backwards}
.feest-kaarten .kaart:nth-child(2){animation-delay:.08s}.feest-kaarten .kaart:nth-child(3){animation-delay:.16s}.feest-kaarten .kaart:nth-child(4){animation-delay:.24s}
@keyframes waaier{from{transform:translateY(60px) rotate(-10deg);opacity:0}}
.feest-wie{color:var(--geel);font-family:"Luckiest Guy",sans-serif;font-size:28px;margin-top:12px;text-shadow:0 3px 0 var(--hout-donker)}

/* ---------- Modals ---------- */
.modal{position:fixed;inset:0;z-index:40;background:rgba(0,0,0,.55);display:grid;place-items:center;padding:16px;overflow-y:auto}
.modal[hidden]{display:none}
.paneel{position:relative;background:var(--papier);border:5px solid var(--hout);border-radius:22px;box-shadow:0 20px 50px rgba(0,0,0,.5);padding:22px;width:min(560px,100%);text-align:center}
.sluit{position:absolute;right:10px;top:6px;border:0;background:none;font-size:32px;color:var(--hout);line-height:1}
.start-logo{width:min(360px,90%);height:auto;margin-top:-10px}
.start h1{margin:4px 0 0;color:var(--roze);font-size:34px;-webkit-text-stroke:1px var(--hout-donker)}
.start p{margin:2px 0 14px;font-weight:800;color:var(--hout)}
.instelling{margin:10px 0;text-align:left}
.instelling>span{display:block;font-weight:900;margin-bottom:4px;color:var(--hout-donker)}
.keuzes{display:flex;flex-wrap:wrap;gap:6px}
.keuzes button,.vraag-speler{flex:1;border:3px solid #d9c9a3;background:#fff;border-radius:12px;padding:8px 10px;font-weight:800;color:var(--hout-donker)}
.keuzes button.gekozen,.vraag-speler.gekozen{border-color:var(--roze);background:#ffe3f2}
.start-doe{margin-top:12px}

.vraag{border-color:var(--k);width:min(640px,100%)}
.vraag-label{font-weight:800;color:#777}
.vraag-groep{font-family:"Luckiest Guy",sans-serif;font-size:24px;color:var(--k);margin-bottom:8px}
.vraag-stap{text-align:left;font-weight:900;margin:12px 0 6px;color:var(--hout-donker)}
.vraag-kaarten{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.vraag-kaart{border:3px solid #ddd;border-radius:12px;background:#fff;padding:0 0 6px;overflow:hidden;font-weight:800;font-size:13px;line-height:1.15;display:flex;flex-direction:column;gap:4px;color:var(--inkt)}
.vraag-kaart img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.vraag-kaart span{padding:0 4px}
.vraag-kaart em{font-style:normal;font-size:11px;color:var(--groen)}
.vraag-kaart.heb{opacity:.55}
.vraag-kaart.gekozen{border-color:var(--k);box-shadow:0 0 0 3px color-mix(in srgb,var(--k) 40%,transparent)}
.vraag-spelers{display:flex;gap:8px;flex-wrap:wrap}
.vraag-speler small{display:block;font-size:12px;color:#8a7a5a}
.vraag-speler:disabled{opacity:.4}
.vraag-doe{margin-top:16px}

.groot-binnen{display:flex;flex-direction:column;align-items:center;gap:14px}
.regels{text-align:left}
.regels h2{margin:0 0 8px;color:var(--roze);text-align:center}
.regels li{margin-bottom:8px;line-height:1.4}
.tip{background:#fff3c4;border-radius:10px;padding:8px 12px;font-weight:700}
.einde-titel{font-size:42px;color:var(--roze);margin:0}
.einde-lijst{text-align:left;padding:0;list-style:none;counter-reset:r}
.einde-lijst li{display:flex;justify-content:space-between;padding:8px 12px;border-radius:10px;font-weight:800;counter-increment:r}
.einde-lijst li::before{content:counter(r) ".";margin-right:8px;color:var(--hout)}
.einde-lijst li span{flex:1}
.einde-lijst li:first-child{background:#fff3c4}
.einde-knoppen{display:flex;flex-direction:column;gap:10px}

/* ---------- Kleine schermen ---------- */
@media (max-width:900px){
  .tafel{grid-template-columns:1fr;grid-template-rows:auto auto auto}
  .midden{grid-column:1;grid-row:2;position:static;max-height:130px}
  .midden h2{display:none}
  .ik{grid-row:3}
}
@media (max-width:600px){
  :root{--kaart-b:calc((100vw - 32px - 10px) / 2)}
  .kop{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .logo{height:40px}
  .kop-midden{order:3;flex-basis:100%}
  .kop-knoppen{margin-left:auto}
  .knop{font-size:14px;padding:8px 12px}
  .tafel{padding:10px 12px 16px}
  .tegenstander{min-width:0;flex:1 1 calc(50% - 6px);padding:8px}
  .avatar{width:40px;height:40px;font-size:28px}
  .naam{font-size:16px}
  .vraag-kaarten{grid-template-columns:repeat(2,1fr)}
}

/* ---------- Spelersaccount ---------- */
[hidden]{display:none!important}
.fout{color:#c62828;font-weight:800;min-height:1.2em;margin:4px 0}
.account{text-align:left;background:#fff;border:3px solid #eadfc5;border-radius:14px;padding:10px 12px;margin-bottom:6px}
.account-ingelogd{font-weight:800;text-align:center}
.account form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.account small{color:#8a7a5a;font-weight:700}
.tabs button{padding:6px 8px}
.veld{display:flex;flex-direction:column;gap:4px;font-weight:900;color:var(--hout-donker);font-size:14px}
.veld input{font:inherit;font-weight:700;border:2px solid #d9c9a3;border-radius:10px;padding:8px 10px;background:#fff;width:100%}
.veld input:focus{outline:none;border-color:var(--roze)}
.start-links{display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.rood{color:#c62828}

/* ---------- Top 10 ---------- */
.top10 h2{margin:0;color:var(--roze);font-size:34px}
.top10 p{margin:2px 0 10px;font-weight:700;color:#6d5a3a}
.top10 table{width:100%;border-collapse:collapse;font-weight:800}
.top10 th{font-size:12px;text-transform:uppercase;color:#8a7a5a;text-align:left;padding:4px 6px}
.top10 td{padding:7px 6px;border-top:1px dashed #d9c9a3;text-align:left}
.top10 tr.ik-rij td{background:#ffe3f2}
.top10 h3{margin:16px 0 4px;font-size:16px;color:#c62828}
.top-dwangsom ol{text-align:left;margin:0;padding-left:22px;font-weight:800}

/* ---------- Dwangsom ---------- */
.ik .bubbel-plek{left:70px;transform:none}
.ik .bubbel::after{left:24px}
.bubbel .wie{color:#8a7a5a}
.dwangsom{position:relative;display:inline-flex;align-items:baseline;gap:6px;margin-top:6px;background:#fff1f1;border:2px solid #c62828;color:#c62828;border-radius:10px;padding:3px 9px;font-weight:900;font-size:13px;line-height:1.2}
.dwangsom .dw-bedrag{font-family:Nunito,sans-serif;font-weight:900;font-size:17px}
.dwangsom.loopt{background:#c62828;color:#fff;animation:dwPuls 1.1s ease-in-out infinite;box-shadow:0 0 0 0 rgba(198,40,40,.6)}
.dwangsom.schud{animation:dwSchud .5s ease,dwPuls 1.1s ease-in-out .5s infinite}
.ik-kop #mijn-dwangsom .dwangsom{margin-top:0}
.dw-plus{position:absolute;right:-6px;top:-4px;font-family:Nunito,sans-serif;font-weight:900;color:#c62828;font-size:22px;text-shadow:0 0 3px #fff,0 0 3px #fff;pointer-events:none;animation:dwPlus 1.4s ease-out forwards}
@keyframes dwPuls{0%,100%{box-shadow:0 0 0 0 rgba(198,40,40,.55)}50%{box-shadow:0 0 0 7px rgba(198,40,40,0)}}
@keyframes dwSchud{0%,100%{transform:none}20%{transform:rotate(-6deg) scale(1.15)}40%{transform:rotate(5deg) scale(1.15)}60%{transform:rotate(-3deg) scale(1.08)}80%{transform:rotate(2deg)}}
@keyframes dwPlus{0%{opacity:0;transform:translateY(6px) scale(.6)}15%{opacity:1;transform:translateY(-6px) scale(1.2)}100%{opacity:0;transform:translateY(-46px) scale(1)}}
.foto{position:relative}
.stempel{position:absolute;right:4%;bottom:8%;transform:rotate(-14deg);border:3px solid #c62828;color:#c62828;background:rgba(255,255,255,.75);font-family:"Luckiest Guy",sans-serif;font-size:1.1em;padding:.1em .35em;border-radius:6px;letter-spacing:.05em}
.vraag-dwangsom{background:#c62828;color:#fff;font-weight:900;border-radius:10px;padding:8px 12px;margin:6px 0}
.einde-lijst em{font-style:normal;font-weight:900;margin-right:12px}
.einde-dwangsom{font-weight:800;color:#c62828}
.einde-score{font-weight:800;background:#fff3c4;border-radius:10px;padding:8px 12px}
.einde-score:empty,.einde-dwangsom:empty{display:none}

.sommatie .brief{position:relative;background:#fffdf5;width:min(460px,100%);padding:24px 26px;border-radius:6px;box-shadow:0 20px 50px rgba(0,0,0,.6);font-family:Georgia,"Times New Roman",serif;color:#222;text-align:left;transform:rotate(-2deg);animation:briefIn .45s cubic-bezier(.2,1.4,.4,1)}
.brief-kop{font-family:"Luckiest Guy",sans-serif;color:#c62828;font-size:34px;border-bottom:3px double #c62828;margin-bottom:10px}
.brief p{margin:8px 0;line-height:1.4}
.brief-onder{font-style:italic}
.brief-stempel{position:absolute;right:18px;bottom:26px;transform:rotate(-18deg);border:4px solid #c62828;color:#c62828;font-family:"Luckiest Guy",sans-serif;font-size:34px;padding:2px 12px;border-radius:8px;opacity:.85;animation:stempel .35s ease .7s backwards}
@keyframes briefIn{from{transform:translateY(80px) rotate(-12deg);opacity:0}}
@keyframes stempel{from{transform:rotate(-18deg) scale(2.5);opacity:0}}

/* Sommatie bevestigen; de weigerknop vlucht */
.brief-knoppen{display:flex;gap:12px;margin-top:18px;font-family:Nunito,sans-serif}
.brief-knoppen .knop{flex:1;font-size:20px}
.weigeren{background:#fff;color:#c62828;box-shadow:0 4px 0 #c62828,var(--schaduw);border:2px solid #c62828;text-shadow:none}
.weigeren.vluchtend{position:fixed;flex:none;z-index:70;transition:left .18s ease,top .18s ease;white-space:nowrap}
.sommatie .brief-stempel{bottom:92px}

/* ---------- Multiplayer ---------- */
.start .knop.groot+.knop.groot{margin-top:10px}
.kamer h2{margin:0;color:var(--roze);font-size:30px}
.kamer-code{font-family:Nunito,sans-serif;font-weight:900;letter-spacing:.12em;background:var(--hout-donker);color:var(--geel);border-radius:8px;padding:2px 10px;font-size:22px;vertical-align:middle}
.kamer-status{font-weight:800;color:#6d5a3a;margin:6px 0 10px}
.kamer-plekken{list-style:none;padding:0;margin:0 0 12px;display:grid;grid-template-columns:1fr 1fr;gap:8px;text-align:left}
.kamer-plekken li{border:3px dashed #d9c9a3;border-radius:12px;padding:10px 12px;font-weight:800;min-height:46px;display:flex;align-items:center;gap:6px}
.kamer-plekken li.bezet{border-style:solid;border-color:var(--groen);background:#effbe9}
.kamer-plekken li.computer{border-style:solid;background:#f3eee3;color:#6d5a3a}
.kamer-plekken li.leeg-plek{color:#a8977a}
.puntjes::after{content:"";animation:puntjes 1.4s steps(4) infinite}
@keyframes puntjes{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}
.kamer-delen{background:#fff;border:3px solid #eadfc5;border-radius:14px;padding:10px 12px;text-align:left;margin-bottom:8px}
.kamer-deelknoppen{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.kamer-deelknoppen .knop{flex:1;text-align:center;text-decoration:none;font-size:16px}
.x-knop{background:#000;box-shadow:0 4px 0 #444,var(--schaduw)}
.kamer-gast{font-weight:800;color:var(--hout)}
.kamer-gast:not(:empty)::after{content:"";display:inline-block;width:1em;animation:puntjes 1.4s steps(4) infinite}
.meedoen h2{margin:6px 0 4px;color:var(--roze);font-size:30px}
.meedoen .veld{text-align:left;margin:10px 0}
.label-mens{font-family:Nunito,sans-serif;font-size:11px;font-weight:900;background:#effbe9;color:var(--groen);border-radius:999px;padding:2px 7px;vertical-align:middle;letter-spacing:0}
.tegenstander.mens .avatar{box-shadow:inset 0 0 0 3px var(--groen)}
@media (max-width:600px){.kamer-plekken{grid-template-columns:1fr}}
.meedoen-gast form,.meedoen-gast [data-mpaneel]{display:flex;flex-direction:column;gap:8px;text-align:left;margin-top:8px}
.meedoen-gast small{color:#8a7a5a;font-weight:700}

/* ---------- Bovenbalk: licht en doorschijnend, met een streep in de kwartetkleuren ---------- */
.kop{background:linear-gradient(180deg,rgba(255,255,255,.9),rgba(255,248,232,.84));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:0;box-shadow:0 6px 20px rgba(20,40,80,.18)}
.kop::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;background:linear-gradient(90deg,#1f5fd1 0 14.3%,#e8650c 0 28.6%,#e0218a 0 42.9%,#d42020 0 57.1%,#7a2fd0 0 71.4%,#d99a00 0 85.7%,#14915a 0)}
.kop .status{color:var(--hout-donker);text-shadow:none}
.kop .voortgang{color:var(--roze)}
.logo{filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
.knop.licht{background:#fff;box-shadow:0 4px 0 #e2d3b0,0 4px 12px rgba(0,0,0,.12)}

/* ---------- Over ons ---------- */
.over{text-align:left;width:min(620px,100%)}
.over h2{margin:0 0 6px;color:var(--roze);font-size:34px;text-align:center}
.over-intro{font-weight:700;line-height:1.45}
.over-lijst{padding-left:20px;margin:8px 0 14px;line-height:1.45}
.over-lijst li{margin-bottom:8px}
.dossier{background:#f4ecd8;border:2px dashed #b9a57a;border-radius:10px;padding:12px 14px;font-family:"Courier New",monospace;font-size:14px;line-height:1.5}
.dossier-regel{margin-top:8px}
.zwart{display:inline-block;width:var(--w);max-width:100%;height:1.05em;vertical-align:-.15em;background:#111;border-radius:2px;user-select:none}
.over-slot{font-weight:800;margin:14px 0 6px}
.over-klein{font-size:13px;color:#8a7a5a;font-weight:700}
.over .knop{display:block;margin:12px auto 0}
.rec{position:absolute;left:16px;top:12px;font-weight:900;font-size:13px;color:#c62828;display:flex;align-items:center;gap:6px;letter-spacing:.08em}
.rec span{width:11px;height:11px;border-radius:50%;background:#e53935;animation:rec 1.2s steps(2) infinite}
@keyframes rec{50%{opacity:0}}
.drops{display:flex;flex-direction:column;gap:10px;margin:10px 0 14px}
.drop{background:#fff;border:2px solid #e6dcc4;border-left:6px solid #c62828;border-radius:10px;padding:10px 14px;box-shadow:0 2px 6px rgba(0,0,0,.08)}
.drop:nth-child(even){transform:rotate(.4deg)}
.drop:nth-child(odd){transform:rotate(-.3deg)}
.drop-kop{font-family:"Courier New",monospace;font-size:12px;color:#8a7a5a;font-weight:700;margin-bottom:4px}
.drop p{margin:0;line-height:1.5;font-weight:600}
.drop b{color:#c62828}
.over{max-height:calc(100dvh - 32px);overflow-y:auto}

/* Omgekeerde wereld: alles even ondersteboven */
body.omgekeerd .kop,body.omgekeerd .tafel{transform:rotate(180deg);transition:transform .8s cubic-bezier(.5,-.3,.5,1.3)}
.kop,.tafel{transition:transform .8s cubic-bezier(.5,-.3,.5,1.3)}
@media (prefers-reduced-motion:reduce){body.omgekeerd .kop,body.omgekeerd .tafel{transform:scaleY(-1);transition:none}}
.bezoekers{margin:-8px 0 12px!important;font-weight:800;color:#6d5a3a!important;font-size:14px}
.bezoekers b{color:var(--roze);font-size:16px}
.bezoekers small{font-weight:700;color:#8a7a5a}