/* PROTESTcraft, geport uit het Claude Design-canvas "PROTESTcraft site ontwerp".
   Desktop gebruikt een schaalbare eenheid --u; onder 900px geldt de mobiele opmaak uit het ontwerp. */

@font-face{font-family:'Minecraft';src:url('/fonts/minecraft.ttf') format('truetype');font-display:block}

:root{--rood:#f9374a;--geel:#fff042;--paars:#2b264c}
html,body{margin:0;padding:0;background:#f9374a}
*{box-sizing:border-box}
button,input{font:inherit}
a{color:inherit}

/* ---------- scrollbalken in pixelstijl ---------- */
/* Chrome/Edge/Safari: blokje met dezelfde 3D-rand als de knoppen; de rand in de kleur van het vlak eromheen geeft
   ruimte rond het blokje. Firefox kent alleen kleuren (scrollbar-color); die zetten we alleen daar, want Chrome
   negeert de webkit-stijl zodra scrollbar-color staat. */
::-webkit-scrollbar{width:14px;height:14px}
::-webkit-scrollbar-track{background:#f9374a}
::-webkit-scrollbar-corner{background:#f9374a}
::-webkit-scrollbar-thumb{background:#2b264c;border:3px solid #f9374a;box-shadow:inset 2px 2px 0 #5d5694,inset -2px -2px 0 #181430}
::-webkit-scrollbar-thumb:hover{background:#3b3566}
::-webkit-scrollbar-button{display:none}
/* donkere vlakken, menu's en vensters op paars: geel blokje */
.dark::-webkit-scrollbar-track,.dark::-webkit-scrollbar-corner,.filtermenu::-webkit-scrollbar-track,.live::-webkit-scrollbar-track,.nav::-webkit-scrollbar-track{background:#2b264c}
.dark::-webkit-scrollbar-thumb,.filtermenu::-webkit-scrollbar-thumb,.nav::-webkit-scrollbar-thumb{background:#fff042;border-color:#2b264c;box-shadow:inset 2px 2px 0 #fffbb0,inset -2px -2px 0 #d3bf00}
/* rode kaarten en vensters */
.card::-webkit-scrollbar-track,.card::-webkit-scrollbar-corner{background:#f9374a}
.card::-webkit-scrollbar-thumb{background:#fff042;border-color:#f9374a;box-shadow:inset 2px 2px 0 #fffbb0,inset -2px -2px 0 #d3bf00}
@supports (-moz-appearance:none){
  html{scrollbar-color:#2b264c #f9374a}
  .dark,.filtermenu,.nav{scrollbar-color:#fff042 #2b264c}
  .card{scrollbar-color:#fff042 #f9374a}
}

.root{
  --gx:max(calc(var(--u) * 2),calc((100% - 1200px) / 2));
  --u:max(26px,min(calc(100vw / 39.18),calc(100vh / 22.04)));
  --t:calc(var(--u) * 1.75);
  --b:calc(var(--u) * 4);
  --n:calc(var(--gx) + var(--u) * 11.4);
  --ui:min(var(--u),36px); /* maat voor knoppen: groeit mee, maar niet onbeperkt */
  position:relative;min-height:100vh;overflow:hidden;background:#f9374a;color:#2b264c;
  font-family:'Minecraft','Pixelify Sans',monospace;font-size:calc(var(--u) * 0.36);line-height:1.35;-webkit-font-smoothing:none;
}
.root[data-mode="page"]{overflow:visible}

/* ---------- het gele (of donkere) kader ---------- */
.frame{position:absolute;inset:0;background:#fff042;transition:background 0.5s steps(6,end);clip-path:polygon(
  0 calc(var(--t) + 3 * var(--u)),
  var(--u) calc(var(--t) + 3 * var(--u)),
  var(--u) calc(var(--t) + 2 * var(--u)),
  calc(2 * var(--u)) calc(var(--t) + 2 * var(--u)),
  calc(2 * var(--u)) calc(var(--t) + var(--u)),
  calc(var(--gx) + var(--u) * 18.2) calc(var(--t) + var(--u)),
  calc(var(--gx) + var(--u) * 18.2) var(--t),
  100% var(--t),
  100% calc(100% - var(--b)),
  calc(var(--n) + 7 * var(--u)) calc(100% - var(--b)),
  calc(var(--n) + 7 * var(--u)) calc(100% - var(--b) + 2 * var(--u)),
  calc(var(--n) + 6 * var(--u)) calc(100% - var(--b) + 2 * var(--u)),
  calc(var(--n) + 6 * var(--u)) calc(100% - var(--b) + 3 * var(--u)),
  calc(var(--n) + 2 * var(--u)) calc(100% - var(--b) + 3 * var(--u)),
  calc(var(--n) + 2 * var(--u)) calc(100% - var(--b) + var(--u)),
  var(--n) calc(100% - var(--b) + var(--u)),
  var(--n) calc(100% - var(--b)),
  0 calc(100% - var(--b)))}
.root[data-mode="map"] .frame{background:#2b264c}
.hole{position:absolute;z-index:2;left:calc(var(--n) + 3 * var(--u));bottom:calc(var(--b) - 2 * var(--u));width:calc(3 * var(--u));height:var(--u);background:#f9374a}
.clouds{position:absolute;inset:0;background:url('/img/wolken.png') repeat-x 0 calc(var(--t) + var(--u) * 0.2) / calc(var(--u) * 60) auto;image-rendering:pixelated;animation:drift 300s steps(3600,end) infinite;transition:opacity 0.5s steps(6,end)}
.root[data-mode="map"] .clouds{opacity:0}
@keyframes drift{from{background-position:0 calc(var(--t) + var(--u) * 0.2)}to{background-position:calc(var(--u) * -60) calc(var(--t) + var(--u) * 0.2)}}
@media (prefers-reduced-motion:reduce){.clouds{animation:none}.pcdlg.schuif,.pcdlg.schuif .pcdlg-card{transition:none!important}}

/* ---------- logo ---------- */
.lgwrap{transform-origin:0 0;position:absolute;z-index:3;left:var(--gx);top:calc(var(--u) * 0.2);width:calc(var(--u) * 5.78);height:calc(var(--u) * 2.4);display:block}
.lg-icoon{position:absolute;left:calc(var(--u) * 1.5986);top:0;width:calc(var(--u) * 2.6478);height:calc(var(--u) * 1.5945);transform-origin:0 0;image-rendering:pixelated;display:block}
/* Hartje van het logo: zelfde vak als het icoon, maar alleen de hartpixels (mask van hetzelfde plaatje, rechtsboven
   afgesneden) in de kleur van de serverstatus. Online: pulserend groen (het groen van PROTEST, #008b3f). Offline: in
   het rood van de kop, zodat het hart verdwijnt. */
.lg-hart{position:absolute;left:calc(var(--u) * 1.5986);top:0;width:calc(var(--u) * 2.6478);height:calc(var(--u) * 1.5945);transform-origin:0 0;display:block;pointer-events:none;
  -webkit-mask:url('/img/logo-icoon.png') 0 0/100% 100% no-repeat;mask:url('/img/logo-icoon.png') 0 0/100% 100% no-repeat;
  clip-path:inset(0 0 53.4% 71.7%);background:transparent}
.lg-hart.aan{background:#008b3f;animation:pcHart 1.6s ease-in-out infinite}
.lg-hart.uit{background:#f9374a}
@keyframes pcHart{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.lg-hart.aan{animation:none;opacity:.9}}
.lg-protest{position:absolute;left:0;top:calc(var(--u) * 1.7225);width:calc(var(--u) * 2.7842);height:calc(var(--u) * 0.6775);transform-origin:0 0;image-rendering:pixelated;display:block}
.lg-craft{position:absolute;left:calc(var(--u) * 2.8750);top:calc(var(--u) * 1.7225);width:calc(var(--u) * 2.9081);height:calc(var(--u) * 0.6775);transform-origin:0 0;image-rendering:pixelated;display:block}
/* compacte stand: altijd als je ingelogd bent */
.root.ingelogd .lgwrap{transform:scale(0.7724)}
.root.ingelogd .lg-icoon,.root.ingelogd .lg-hart{transform:translate(calc(var(--u) * -1.4543),0)}
.root.ingelogd .lg-protest{transform:translate(0,calc(var(--u) * -0.0558)) scale(1.0595)}
.root.ingelogd .lg-craft{transform:translate(calc(var(--u) * -2.8750),calc(var(--u) * 0.7350)) scale(0.9929)}
/* animatie van breed naar compact en terug (keyframes in logo-anim.css) */
.root.lg-toC .lgwrap{animation:toC_wrap 1.6667s linear both}
.root.lg-toC .lg-icoon,.root.lg-toC .lg-hart{animation:toC_icoon 1.6667s linear both}
.root.lg-toC .lg-protest{animation:toC_protest 1.6667s linear both}
.root.lg-toC .lg-craft{animation:toC_craft 1.6667s linear both}
.root.lg-toW .lgwrap{animation:toW_wrap 1.6667s linear both}
.root.lg-toW .lg-icoon,.root.lg-toW .lg-hart{animation:toW_icoon 1.6667s linear both}
.root.lg-toW .lg-protest{animation:toW_protest 1.6667s linear both}
.root.lg-toW .lg-craft{animation:toW_craft 1.6667s linear both}
@media (prefers-reduced-motion:reduce){.lgwrap img{animation-duration:0.01s !important}}

/* ---------- kop, menu, footer ---------- */
.top{position:absolute;z-index:4;top:0;right:var(--gx);height:var(--t);display:flex;align-items:center;gap:calc(var(--u) * 0.8);font-size:calc(var(--u) * 0.34)}
.toplinks{display:flex;align-items:center;gap:calc(var(--u) * 0.8)}
/* Taalknop (NL/EN) rechts in de kop: blokje met de huidige taal. Het pixellettertype houdt ruimte vrij onder de
   letters (die hoofdletters niet gebruiken); de padding boven zet NL/EN optisch in het midden. */
.lk-taal{display:inline-flex;align-items:center;justify-content:center;min-width:calc(var(--u) * 0.95);height:calc(var(--u) * 0.7);padding:0.4em calc(var(--u) * 0.15) 0;line-height:1;box-sizing:border-box;box-shadow:inset 0 0 0 calc(var(--u) * 0.05) currentColor;text-decoration:none;font-size:calc(var(--u) * 0.3)}
.lk-taal:hover{background:#fff042;color:#2b264c;box-shadow:none}
/* Op de kaart: gebruiker, Beheer en Uitloggen links uitgelijnd met de knoppenbalk van de kaart (zie pcBarLeft in kaart.js). */
.root[data-mode="map"] .top{left:calc(var(--gx) + var(--u) * 18.2);right:auto}
.lk{color:#fff042;text-decoration:none;background:none;border:0;padding:0;font:inherit;cursor:pointer;display:inline-flex;align-items:center;gap:calc(var(--u) * 0.25)}
.lk:hover{color:#ffffff;text-decoration:underline}
.uic{display:block;height:calc(var(--u) * 1.1);width:calc(var(--u) * 1.1);image-rendering:pixelated}
/* Spelershoofd in de kop: rand in de kleur van de speler; klikken opent het accountvenster. */
[data-account-kleurrand]{box-shadow:0 0 0 calc(var(--u) * 0.1) var(--pc-kleur,#fff042)}
.lk-user{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:flex;align-items:center;gap:calc(var(--u) * 0.3)}
.account-kop{display:flex;align-items:center;gap:calc(var(--u) * 0.45);margin-bottom:calc(var(--u) * 0.4)}
.account-kop .ct{margin:0}
.account-kop .uic{box-shadow:0 0 0 calc(var(--u) * 0.1) var(--pc-kleur,#fff042)}
.account-uitleg{margin:0 0 calc(var(--u) * 0.25);font-size:calc(var(--u) * 0.32)}
.account-kleuren{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 0.18)}
.account-vak{width:calc(var(--u) * 0.85);height:calc(var(--u) * 0.85);border:0;padding:0;cursor:pointer;box-shadow:inset 0 0 0 calc(var(--u) * 0.06) rgba(0,0,0,.35)}
.account-vak[aria-checked="true"]{outline:calc(var(--u) * 0.08) solid #fff042;outline-offset:calc(var(--u) * 0.06)}
.account-rij{margin-top:calc(var(--u) * 0.3);gap:calc(var(--u) * 0.3);align-items:center;flex-wrap:wrap}
.account-eigen{display:flex;align-items:center;gap:calc(var(--u) * 0.2);cursor:pointer;color:#fff042;font-size:calc(var(--u) * 0.34)}
.account-eigen input{width:calc(var(--u) * 1.1);height:calc(var(--u) * 0.85);padding:0;border:0;background:none;cursor:pointer}
.account-lb2{display:block;margin-top:calc(var(--u) * 0.45)}
.account-eigen input[type=checkbox]{width:calc(var(--u) * 0.55);height:calc(var(--u) * 0.55);accent-color:#fff042}
.account-eigen input:disabled{opacity:.4;cursor:default}
.account-ok{margin:calc(var(--u) * 0.4) 0 0;color:#ffffff}
.mlogo,.muser,.mn,.nav{display:none}
.taalwissel{display:none}
.bot{position:absolute;z-index:2;bottom:0;left:var(--gx);right:var(--gx);height:calc(var(--b) - var(--u) * 0.2);display:flex;align-items:center;justify-content:space-between;gap:calc(var(--u) * 0.8);font-size:calc(var(--u) * 0.3)}
.botl{display:flex;align-items:center;gap:calc(var(--u) * 0.8)}
.dom{color:#ffffff}

/* ---------- podium ---------- */
.stage{position:relative;z-index:1;min-height:100vh;padding:var(--t) 0 var(--b);display:flex;align-items:center;justify-content:center}
.panel{width:100%}
.in2{position:relative;z-index:1;width:100%}

/* ---------- typografie en knoppen ---------- */
.hd{margin:0;font-weight:400;font-size:calc(var(--u) * 1.1);line-height:1;color:#2b264c}
.tx{margin:calc(var(--u) * 0.45) 0 calc(var(--u) * 0.35);font-size:calc(var(--u) * 0.36);line-height:1.2}
.go{display:inline-block;background:none;border:calc(var(--u) * 0.06) solid #2b264c;padding:calc(var(--u) * 0.14) calc(var(--u) * 0.35);font:inherit;font-size:calc(var(--u) * 0.36);color:#2b264c;cursor:pointer}
.go:hover{background:#2b264c;color:#fff042}
.go2{background:#2b264c;color:#fff042;border-color:#2b264c}
.acts{display:flex;flex-wrap:wrap;gap:calc(var(--u) * 0.3)}
a.go{text-decoration:none}
.card{--c:calc(var(--u) * 0.2);background:#f9374a;padding:calc(var(--u) * 1.1) calc(var(--u) * 1.08) calc(var(--u) * 1.08);color:#ffffff;
  box-shadow:inset calc(var(--u) * 0.1) calc(var(--u) * 0.1) 0 #ff7c89,inset calc(var(--u) * -0.1) calc(var(--u) * -0.1) 0 #b81d30;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,calc(100% - var(--c)) var(--c),100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,var(--c) calc(100% - var(--c)),0 calc(100% - var(--c)),0 var(--c),var(--c) var(--c))}
.ct{margin:0 0 calc(var(--u) * 0.6);font-weight:400;font-size:calc(var(--u) * 1.05);line-height:1;color:#fff042}
.lb{display:block;margin:0 0 calc(var(--u) * 0.12);font-size:calc(var(--u) * 0.3);color:#fff042}
.in{display:block;width:100%;height:calc(var(--u) * 1.5);margin:0;padding:0 calc(var(--u) * 0.3);background:#fff042;color:#2b264c;border:0;border-radius:0;font:inherit;font-size:calc(var(--u) * 0.5);box-shadow:inset calc(var(--u) * 0.08) calc(var(--u) * 0.08) 0 #d3bf00,inset calc(var(--u) * -0.08) calc(var(--u) * -0.08) 0 #fffbb0}
.in::placeholder{color:#f9374a;opacity:1}
.in:focus{outline:calc(var(--u) * 0.07) solid #ffffff;outline-offset:0}
.bt{height:calc(var(--u) * 1.5);padding:0 calc(var(--u) * 0.6);background:#2b264c;color:#fff042;border:0;border-radius:0;font:inherit;font-size:calc(var(--u) * 0.5);cursor:pointer;box-shadow:inset calc(var(--u) * 0.08) calc(var(--u) * 0.08) 0 #5d5694,inset calc(var(--u) * -0.08) calc(var(--u) * -0.08) 0 #181430}
.bt:hover{background:#fff042;color:#2b264c;box-shadow:inset calc(var(--u) * 0.08) calc(var(--u) * 0.08) 0 #fffbb0,inset calc(var(--u) * -0.08) calc(var(--u) * -0.08) 0 #c9b300}
.bt:active{transform:translateY(calc(var(--u) * 0.06))}
.bt2{background:none;color:#fff042;box-shadow:inset 0 0 0 calc(var(--u) * 0.06) #fff042}
.bt2:hover{background:#fff042;color:#2b264c}
.bt[disabled]{opacity:0.6;cursor:wait}
.err{color:#ffffff;background:#2b264c;padding:calc(var(--u) * 0.1) calc(var(--u) * 0.3);margin-top:calc(var(--u) * 0.35)}
.stack{display:flex;flex-direction:column;gap:calc(var(--u) * 0.7)}
.row{display:flex;gap:calc(var(--u) * 0.4);margin-top:calc(var(--u) * 0.7)}
.row.end{justify-content:flex-end}
.mob{display:none !important}

.srv{--c:calc(var(--u) * 0.15);margin-top:calc(var(--u) * 0.9);background:#2b264c;color:#fff042;padding:calc(var(--u) * 0.45) calc(var(--u) * 0.55);display:flex;flex-direction:column;gap:calc(var(--u) * 0.2);font-size:calc(var(--u) * 0.3);
  box-shadow:inset calc(var(--u) * 0.07) calc(var(--u) * 0.07) 0 #4a4380,inset calc(var(--u) * -0.07) calc(var(--u) * -0.07) 0 #181430;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,calc(100% - var(--c)) var(--c),100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,var(--c) calc(100% - var(--c)),0 calc(100% - var(--c)),0 var(--c),var(--c) var(--c))}
.srvh{color:#ffffff;font-size:calc(var(--u) * 0.26);letter-spacing:0.05em;margin:0;font-weight:400}
.srvr{display:flex;align-items:center;gap:calc(var(--u) * 0.25)}
.srvr img{display:block;width:calc(var(--u) * 0.4);height:calc(var(--u) * 0.4);image-rendering:pixelated}
.dot{display:block;width:calc(var(--u) * 0.32);height:calc(var(--u) * 0.32);background:#4be07f;margin:0 calc(var(--u) * 0.04)}
.dot.off{background:#ff7c89}

/* ---------- startscherm ---------- */
.gate{display:none;align-items:center;justify-content:center;gap:calc(var(--u) * 4);width:100%;padding:0 calc(var(--u) * 2)}
.root[data-view="gate"] .gate,.root[data-view="login"] .gate{display:flex}
.gl{width:calc(var(--u) * 9);flex:none}
.gr{width:calc(var(--u) * 12.2);flex:none;position:relative;top:calc(var(--u) * -0.9)}
.apply{display:none;width:100%;justify-content:center;padding:0 calc(var(--u) * 2)}
.root[data-view="apply"] .apply,.root[data-view="sent"] .apply{display:flex}
.apply .card{width:min(100%,calc(var(--u) * 17.5))}
.apply-sent,.apply-code{display:none}
.root[data-view="code"] .apply{display:flex}
.root[data-view="code"] .apply-form{display:none}
.root[data-view="code"] .apply-code{display:block}
.root[data-view="sent"] .apply-form{display:none}
.root[data-view="sent"] .apply-sent{display:block}
.intro{margin:0 0 calc(var(--u) * 0.6);font-size:calc(var(--u) * 0.34);line-height:1.2}
.big{margin:0 0 calc(var(--u) * 0.8);font-size:calc(var(--u) * 0.4);line-height:1.25}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u) * 0.45) calc(var(--u) * 0.6)}
.note{font-size:calc(var(--u) * 0.28);line-height:1.2;align-self:end;grid-column:1 / -1;color:#ffffff}
.chk{display:flex;gap:calc(var(--u) * 0.3);align-items:flex-start;margin-top:calc(var(--u) * 0.55);font-size:calc(var(--u) * 0.3);line-height:1.2;cursor:pointer}
.chk input{flex:none;width:calc(var(--u) * 0.6);height:calc(var(--u) * 0.6);margin:0;accent-color:#2b264c}
.chk a{color:#fff042}

/* ---------- kaart ---------- */
.sw{position:absolute;z-index:4;left:calc(var(--gx) + var(--u) * 6.4);width:calc(var(--u) * 11.4);container-type:inline-size;flex-wrap:wrap;align-content:center;top:calc(var(--u) * 0.2);height:calc(var(--u) * 2.4);display:flex;align-items:center;gap:calc(var(--ui) * 0.2) calc(var(--ui) * 0.2);pointer-events:none}
.sw>*{pointer-events:auto}
/* Te weinig ruimte tot de inkeping voor drie knoppen met tekst: alleen het blokje (naam als tooltip en voor schermlezers). */
@container (max-width: 500px){.sw .seg{gap:0}.sw .seg span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
.seg{--c:calc(var(--ui) * 0.12);display:flex;align-items:center;gap:calc(var(--ui) * 0.3);border:0;padding:calc(var(--ui) * 0.3) calc(var(--ui) * 0.55);font:inherit;text-align:left;cursor:pointer;background:#2b264c;color:#fff042;
  box-shadow:inset calc(var(--u) * 0.07) calc(var(--u) * 0.07) 0 #4a4380,inset calc(var(--u) * -0.07) calc(var(--u) * -0.07) 0 #181430;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,calc(100% - var(--c)) var(--c),100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,var(--c) calc(100% - var(--c)),0 calc(100% - var(--c)),0 var(--c),var(--c) var(--c))}
.seg[aria-pressed="true"]{background:#fff042;color:#2b264c;box-shadow:inset calc(var(--ui) * 0.07) calc(var(--ui) * 0.07) 0 #fffbb0,inset calc(var(--ui) * -0.07) calc(var(--ui) * -0.07) 0 #c9b300}
.seg img{display:block;width:calc(var(--ui) * 0.7);height:calc(var(--ui) * 0.7);image-rendering:pixelated;flex:none}
.seg b{display:block;font-weight:400;font-size:calc(var(--ui) * 0.46);line-height:1}
.seg small{display:block;font-size:calc(var(--ui) * 0.26);line-height:1.2;margin-top:calc(var(--ui) * 0.08)}
.root[data-mode="map"] .sw .swstat{display:none}
.swstat{display:flex;align-items:center;gap:calc(var(--ui) * 0.2);color:#fff042;font-size:calc(var(--ui) * 0.3);margin-left:0;flex-basis:100%;white-space:nowrap}
.swm{display:none}
.kaart{display:flex;justify-content:center;width:100%}
.mapouter{position:relative;height:calc(var(--u) * 15);aspect-ratio:179 / 254;margin-right:calc(var(--u) * 9)}
.map{position:absolute;inset:0;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.maplayer{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:0 0}
.maplayer img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;display:block}
.pinline{position:absolute;z-index:1;background:#fff042}
.pinv{width:calc(var(--u) * 0.1)}
.pinh{height:calc(var(--u) * 0.1)}
.mk{position:absolute;transform:translate(-50%,-100%);padding:0;margin:0;border:0;background:none;line-height:0;cursor:pointer;width:calc(var(--u) * 0.42);z-index:2}
.mk img{display:block;width:100%;height:auto;image-rendering:pixelated}
.mk[aria-pressed="true"]{width:calc(var(--u) * 0.85);z-index:3}
.mk:focus-visible{outline:calc(var(--u) * 0.07) solid #fff042;outline-offset:2px}
.zoom{display:none}
.zb{width:44px;height:44px;border:0;padding:0;background:#fff042;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:inset 3px 3px 0 #fffbb0,inset -3px -3px 0 #c9b300}
.pop{--s:calc(var(--u) * 0.375);position:absolute;left:calc(100% + var(--u) * 1.3);top:52%;transform:translateY(-86%);width:calc(var(--u) * 9.8);color:#2b264c;padding:calc(var(--u) * 0.5) calc(var(--u) * 1.5) calc(var(--u) * 0.5) calc(var(--u) * 0.5);z-index:5}
.pop[hidden]{display:none}
.pop::before{content:'';position:absolute;inset:0;background:#fff042;z-index:0;
  clip-path:polygon(0 0,100% 0,100% calc(100% - 4 * var(--s)),calc(100% - var(--s)) calc(100% - 4 * var(--s)),calc(100% - var(--s)) calc(100% - 2 * var(--s)),calc(100% - 2 * var(--s)) calc(100% - 2 * var(--s)),calc(100% - 2 * var(--s)) calc(100% - var(--s)),calc(100% - 3 * var(--s)) calc(100% - var(--s)),calc(100% - 3 * var(--s)) 100%,0 100%)}
.pop::after{content:'';position:absolute;right:var(--s);bottom:0;width:var(--s);height:var(--s);background:#fff042;z-index:0}
.pop > *{position:relative;z-index:1}
.popx{display:none}
.popname{font-size:calc(var(--u) * 0.62);line-height:1}
.popowner{display:flex;align-items:center;gap:calc(var(--u) * 0.15);margin:calc(var(--u) * 0.2) 0;color:#f9374a;font-size:calc(var(--u) * 0.34)}
.popowner img{display:block;width:calc(var(--u) * 0.4);height:calc(var(--u) * 0.4);image-rendering:pixelated}
.popdesc{margin:0 0 calc(var(--u) * 0.2);font-size:calc(var(--u) * 0.32);line-height:1.2;white-space:pre-line}
.popshots{display:flex;gap:calc(var(--u) * 0.2);margin-top:calc(var(--u) * 0.2)}
.popshots a{flex:1 1 0;aspect-ratio:16 / 10;background:#2b264c;display:block;overflow:hidden}
.popshots img{width:100%;height:100%;object-fit:cover;display:block}
.online{display:none}
/* live spelers op de pixelkaart (uit het ontwerp: wit labeltje met pijltje) */
.pl{position:absolute;z-index:4;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;pointer-events:none}
.pll{display:flex;align-items:center;gap:calc(var(--u) * 0.08);background:#ffffff;padding:calc(var(--u) * 0.05)}
.pll img{display:block;width:calc(var(--u) * 0.3);height:calc(var(--u) * 0.3);image-rendering:pixelated}
.pll span{font-size:calc(var(--u) * 0.24);line-height:1;color:#2b264c;white-space:nowrap}
.plp{width:calc(var(--u) * 0.42);height:calc(var(--u) * 0.21);background:#ffffff;clip-path:polygon(0 0,100% 0,100% 33.3%,83.3% 33.3%,83.3% 66.6%,66.7% 66.6%,66.7% 100%,33.3% 100%,33.3% 66.6%,16.7% 66.6%,16.7% 33.3%,0 33.3%)}
/* live kaart */
.chip{background:#2b264c;color:#fff042;border:calc(var(--u) * 0.06) solid #fff042;border-radius:0;padding:calc(var(--u) * 0.06) calc(var(--u) * 0.25);font:inherit;font-size:calc(var(--u) * 0.3);cursor:pointer}
.chip[aria-pressed="true"],.chip:hover{background:#fff042;color:#2b264c}
.map[hidden]{display:none}
.live{position:absolute;inset:0;background:#181430;box-shadow:inset calc(var(--u) * 0.07) calc(var(--u) * 0.07) 0 #4a4380,inset calc(var(--u) * -0.07) calc(var(--u) * -0.07) 0 #181430}
.live[hidden]{display:none}
.seg[hidden]{display:none!important}
/* Wereldknoppen: bounce bij verschijnen (van schaal 0) en verdwijnen (naar schaal 0). */
@keyframes pcIn{0%{transform:scale(0)}55%{transform:scale(1.18)}75%{transform:scale(.92)}90%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes pcUit{0%{transform:scale(1)}35%{transform:scale(1.15)}100%{transform:scale(0)}}
.seg.pc-in{animation:pcIn .5s ease-out both}
.seg.pc-uit{animation:pcUit .3s ease-in both;pointer-events:none}
@media (prefers-reduced-motion:reduce){.seg.pc-in,.seg.pc-uit{animation-duration:.01s}}
.live iframe[hidden]{display:none}
/* Server antwoordt niet, de site toont de kaart uit zijn cache (lib/livemap.js). */
.livecache{position:absolute;z-index:4;left:50%;transform:translateX(-50%);bottom:calc(var(--b) + var(--u) * 0.5);height:var(--ui);display:flex;align-items:center;padding:0 calc(var(--ui) * 0.4);white-space:nowrap;background:#f9374a;color:#fff042;font-size:calc(var(--ui) * 0.42);box-shadow:inset 3px 3px 0 #ff7c89,inset -3px -3px 0 #b81d30;pointer-events:none}
.livecache[hidden]{display:none}
.livemelding{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u) * 0.3);padding:calc(var(--u) * 1);text-align:center;color:#fff042;background:#181430}
.livemelding[hidden]{display:none}
.livemelding b{font-weight:400;font-size:calc(var(--u) * 0.7)}
.livemelding span{color:#ffffff;font-size:calc(var(--u) * 0.36)}
.live iframe{display:block;width:100%;height:100%;border:0;background:#181430}
/* Laden: donkere laag met het laadicoontje over de kaart tot BlueMap klaar is. */
.kaartladen{position:absolute;inset:0;z-index:6;background:rgba(24,20,48,0.88);opacity:1;transition:opacity 0.35s steps(4,end)}
.kaartladen[hidden]{display:none}
.kaartladen.weg{opacity:0;pointer-events:none}
.kaartladen .ld{top:50%;z-index:auto}
.kaartladen.boven{position:fixed;z-index:1000}
/* live kaart vult het hele donkere vlak, met dezelfde getrapte hoeken als het kader */
.root[data-mode="map"] .panel,.root[data-mode="map"] .in2{position:static}
.kaart[data-kaartmode="live"]{position:absolute;inset:0;display:block;clip-path:polygon(
0 calc(var(--t) + 3 * var(--u)),
  var(--u) calc(var(--t) + 3 * var(--u)),
  var(--u) calc(var(--t) + 2 * var(--u)),
  calc(2 * var(--u)) calc(var(--t) + 2 * var(--u)),
  calc(2 * var(--u)) calc(var(--t) + var(--u)),
  calc(var(--gx) + var(--u) * 18.2) calc(var(--t) + var(--u)),
  calc(var(--gx) + var(--u) * 18.2) var(--t),
  100% var(--t),
  100% calc(100% - var(--b)),
  calc(var(--n) + 7 * var(--u)) calc(100% - var(--b)),
  calc(var(--n) + 7 * var(--u)) calc(100% - var(--b) + 2 * var(--u)),
  calc(var(--n) + 6 * var(--u)) calc(100% - var(--b) + 2 * var(--u)),
  calc(var(--n) + 6 * var(--u)) calc(100% - var(--b) + 3 * var(--u)),
  calc(var(--n) + 2 * var(--u)) calc(100% - var(--b) + 3 * var(--u)),
  calc(var(--n) + 2 * var(--u)) calc(100% - var(--b) + var(--u)),
  var(--n) calc(100% - var(--b) + var(--u)),
  var(--n) calc(100% - var(--b)),
  0 calc(100% - var(--b)))}
.kaart[data-kaartmode="live"] .mapouter{position:absolute;inset:0;width:auto;height:auto;margin:0;aspect-ratio:auto}
.kaart[data-kaartmode="live"] .live{box-shadow:none;background:#181430}

/* ---------- pinnen plaatsen en bewerken ---------- */
/* Pin-knop linksonder in de kaart, een halve knop boven de voet (desktop). */
/* Knop "Gebieden" (claimgrenzen aan/uit): linksonder op desktop, in de rij met wereldknoppen op mobiel. */
.seg .gebied-icoon{display:block;flex:none;width:calc(var(--ui) * 0.64);height:calc(var(--ui) * 0.64)}
/* Knoppen linksonder in de kaart (desktop): Gebieden en Pins naast elkaar, een halve knop boven de voet. */
.kaartknoppen{position:absolute;z-index:4;left:var(--gx);bottom:calc(var(--b) + var(--u) * 0.5);display:flex;gap:calc(var(--ui) * 0.25)}
.pc-bm-menu .kaartknoppen{visibility:hidden}
/* Uitklapmenu met werelden (naast Gebieden): opent naar boven. */
.wereldkeuze{position:relative}
.wereldkeuze[hidden]{display:none}
.wereldkeuze summary{list-style:none;user-select:none}
.wereldkeuze summary::-webkit-details-marker{display:none}
/* Zelfde maat als de knoppen Gebieden en Pins ernaast. */
.wereldkeuze .seg{height:var(--ui);margin:0;padding:0 calc(var(--ui) * 0.4);gap:calc(var(--ui) * 0.25)}
.wereldkeuze .seg img{width:calc(var(--ui) * 0.6)!important;height:calc(var(--ui) * 0.6)!important}
.wereldkeuze .seg b{font-size:calc(var(--ui) * 0.4)!important}
.wereldkeuze summary .pijl{display:block;flex:none;width:calc(var(--ui) * 0.42);height:calc(var(--ui) * 0.24);margin-left:calc(var(--ui) * 0.05)}
.wereldkeuze[open] summary .pijl{transform:rotate(180deg)}
.wereldlijst{position:absolute;left:0;bottom:calc(100% + var(--ui) * 0.2);display:flex;flex-direction:column;gap:calc(var(--ui) * 0.15);min-width:100%}
.wereldkeuze:not([open]) .wereldlijst{display:none}
.wereldlijst .seg{width:100%;white-space:nowrap}
.wereldlijst .seg[aria-pressed="true"]{display:none}
.gebiedknop{height:var(--ui);margin:0;padding:0 calc(var(--ui) * 0.4);gap:calc(var(--ui) * 0.25)}
.gebiedknop img{width:calc(var(--ui) * 0.44)!important;height:calc(var(--ui) * 0.64)!important}
.seg-pins img{width:22px;height:32px}
.gebiedknop b{font-size:calc(var(--ui) * 0.4)!important}
.pcdlg-toewijzen .row{display:flex;gap:8px;align-items:stretch}
.pcdlg-toewijzen select{flex:1 1 auto;min-width:0}
.pcdlg{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:16px;background:rgba(24,20,48,.72)}
.pcdlg[hidden]{display:none}
.pcdlg-card{width:min(100%,calc(var(--u) * 17));max-height:calc(100vh - 32px);overflow:auto}
.pcdlg-eig{margin:calc(var(--u) * -0.3) 0 calc(var(--u) * 0.5);color:#fff042;font-size:calc(var(--u) * 0.34)}
.pcdlg-velden{display:flex;flex-direction:column;gap:calc(var(--u) * 0.45)}
.pcdlg-tekst{height:auto;min-height:calc(var(--u) * 3.2);padding:calc(var(--u) * 0.25) calc(var(--u) * 0.3);resize:vertical;line-height:1.25}
.pcdlg-tekst:disabled{opacity:.85;cursor:default}
.pcdlg-ro{color:#ffffff;font-size:calc(var(--u) * 0.4)}
.pcdlg-knoppen{flex-wrap:wrap;justify-content:flex-end}

/* ---------- overgang (wipe + lader) ---------- */
.wipe{position:absolute;inset:0;z-index:50;display:grid;grid-template-columns:repeat(42,1fr);grid-template-rows:repeat(24,1fr);overflow:hidden;pointer-events:none;clip-path:polygon(
  0 calc(var(--t) + 3 * var(--u)),
  var(--u) calc(var(--t) + 3 * var(--u)),
  var(--u) calc(var(--t) + 2 * var(--u)),
  calc(2 * var(--u)) calc(var(--t) + 2 * var(--u)),
  calc(2 * var(--u)) calc(var(--t) + var(--u)),
  calc(var(--gx) + var(--u) * 18.2) calc(var(--t) + var(--u)),
  calc(var(--gx) + var(--u) * 18.2) var(--t),
  100% var(--t),
  100% calc(100% - var(--b)),
  calc(var(--n) + 7 * var(--u)) calc(100% - var(--b)),
  calc(var(--n) + 7 * var(--u)) calc(100% - var(--b) + 2 * var(--u)),
  calc(var(--n) + 6 * var(--u)) calc(100% - var(--b) + 2 * var(--u)),
  calc(var(--n) + 6 * var(--u)) calc(100% - var(--b) + 3 * var(--u)),
  calc(var(--n) + 2 * var(--u)) calc(100% - var(--b) + 3 * var(--u)),
  calc(var(--n) + 2 * var(--u)) calc(100% - var(--b) + var(--u)),
  var(--n) calc(100% - var(--b) + var(--u)),
  var(--n) calc(100% - var(--b)),
  0 calc(100% - var(--b)))}
.wipe[hidden]{display:none}
.cell{display:block;background:#2b264c;margin:-1px;animation-duration:0.25s;animation-timing-function:steps(1,end);animation-fill-mode:forwards}
@keyframes cellIn{0%{opacity:1;background:#fff042}33.3%{opacity:1;background:#f9374a}66.7%{opacity:1;background:#2b264c}100%{opacity:1;background:#2b264c}}
@keyframes cellOut{0%{opacity:1;background:#2b264c}33.3%{opacity:1;background:#f9374a}66.7%{opacity:1;background:#fff042}100%{opacity:0;background:#fff042}}
@media (prefers-reduced-motion:reduce){.cell{animation-delay:0s !important}}
.ld{position:absolute;z-index:51;left:50%;top:calc((100% + var(--t) - var(--b)) / 2);width:calc(var(--u) * 5.6);aspect-ratio:820 / 485;transform:translate(-50%,-50%);pointer-events:none}
.ld[hidden]{display:none}
.ld img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;display:block}
.ld .hr{opacity:0;animation:hop 1.25s steps(1,end) infinite}
.ld .mg{opacity:0;animation:mgop 1.25s steps(1,end) infinite}
.ld .w1,.ld .w2,.ld .w3{opacity:0;animation:wop 1.25s steps(1,end) infinite}
@keyframes mgop{0%{opacity:0}40%{opacity:1}100%{opacity:1}}
@keyframes hop{0%{opacity:0}80%{opacity:1}100%{opacity:1}}
@keyframes wop{0%{opacity:0}60%{opacity:1}100%{opacity:1}}

/* ---------- inhoudspagina's en beheer ---------- */
.page{width:min(100% - calc(var(--u) * 4),calc(var(--u) * 20));margin:calc(var(--u) * 1) auto;font-size:calc(var(--u) * 0.36);line-height:1.3}
.page h2{font-weight:400;font-size:calc(var(--u) * 0.6);color:#fff042;margin:calc(var(--u) * 0.8) 0 calc(var(--u) * 0.2)}
.page p,.page li{margin:0 0 calc(var(--u) * 0.3)}
.page ol,.page ul{padding-left:calc(var(--u) * 0.8)}
.page a{color:#fff042}
.page code{font-family:inherit;background:#2b264c;color:#fff042;padding:0 calc(var(--u) * 0.15)}
/* Stappen voor de modpack (modpack-pagina en na het aanmelden). */
.stappen{padding-left:calc(var(--u) * 0.8);margin:0}
.stappen li{margin:0 0 calc(var(--u) * 0.25)}
.stappen code{font-family:inherit;background:#2b264c;color:#fff042;padding:0 calc(var(--u) * 0.15)}
.stappen .fingerprint{display:inline-block;margin-top:calc(var(--u) * 0.15);word-break:break-all;font-family:monospace;font-size:0.9em}
.stappen a{color:inherit}
.ct2{font-weight:400;font-size:calc(var(--u) * 0.5);margin:calc(var(--u) * 0.5) 0 calc(var(--u) * 0.2)}
.page .small{font-size:calc(var(--u) * 0.28);opacity:0.9}
.beheer{width:min(100% - calc(var(--u) * 4),1400px);margin:0 auto}
/* Pagina's met tekst: de inhoud begint onder het logo en de trap van het gele vlak (die zakt tot --t + 1u) en houdt
   afstand tot de rode rand onderaan; het gele vlak groeit mee met de inhoud. */
@media (min-width:1020px){.root[data-mode="page"] .stage{padding:calc(var(--t) + var(--u) * 1.8) 0 calc(var(--b) + var(--u) * 0.8)}}
.flash{background:#2b264c;color:#fff042;padding:calc(var(--u) * 0.3) calc(var(--u) * 0.5);margin:calc(var(--u) * 0.4) 0;font-size:calc(var(--u) * 0.42)}
.dark{--c:calc(var(--u) * 0.15);background:#2b264c;color:#fff042;padding:calc(var(--u) * 0.6) calc(var(--u) * 0.7);margin-top:calc(var(--u) * 0.8);font-size:calc(var(--u) * 0.44);overflow:auto;
  box-shadow:inset calc(var(--u) * 0.07) calc(var(--u) * 0.07) 0 #4a4380,inset calc(var(--u) * -0.07) calc(var(--u) * -0.07) 0 #181430;
  clip-path:polygon(var(--c) 0,calc(100% - var(--c)) 0,calc(100% - var(--c)) var(--c),100% var(--c),100% calc(100% - var(--c)),calc(100% - var(--c)) calc(100% - var(--c)),calc(100% - var(--c)) 100%,var(--c) 100%,var(--c) calc(100% - var(--c)),0 calc(100% - var(--c)),0 var(--c),var(--c) var(--c))}
.dark .srvh{margin-bottom:calc(var(--u) * 0.4);font-size:calc(var(--u) * 0.34)}
.tbl{width:100%;border-collapse:collapse}
.tbl th{text-align:left;font-weight:400;color:#ffffff;font-size:calc(var(--u) * 0.34);padding:calc(var(--u) * 0.15) calc(var(--u) * 0.3) calc(var(--u) * 0.15) 0;border-bottom:2px solid #4a4380}
.tbl td{vertical-align:top;padding:calc(var(--u) * 0.35) calc(var(--u) * 0.3) calc(var(--u) * 0.25) 0;border-bottom:2px solid #181430}
.tbl svg.ja{color:#4be07f;display:block}.tbl svg.nee{color:#ff7c89;display:block}
.tbl td.acts{display:table-cell}
.filterbalk{display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--u) * 0.2);margin:0 0 calc(var(--u) * 0.4)}
.filterbalk[hidden]{display:none}
.filters{position:relative;display:inline-block}
.filterbalk>.bt{height:calc(var(--u) * 1.1);font-size:calc(var(--u) * 0.36);padding:0 calc(var(--u) * 0.4)}
.filters summary{display:inline-flex;align-items:center;gap:calc(var(--u) * 0.2);height:calc(var(--u) * 1.1);font-size:calc(var(--u) * 0.36);padding:0 calc(var(--u) * 0.4);list-style:none;user-select:none}
.filters summary::-webkit-details-marker{display:none}
.filters[open] summary,.filters.actief summary{background:#fff042;color:#2b264c}
.filtermenu{position:absolute;z-index:50;top:calc(100% + var(--u) * 0.15);left:0;min-width:max-content;display:flex;flex-direction:column;background:#2b264c;box-shadow:inset 0 0 0 calc(var(--u) * 0.06) #fff042;padding:calc(var(--u) * 0.2) 0}
.filtermenu:not(.los){display:none}
.filtermenu label{display:flex;align-items:center;gap:calc(var(--u) * 0.3);padding:calc(var(--u) * 0.2) calc(var(--u) * 0.45);cursor:pointer;color:#fff042;font-size:calc(var(--u) * 0.36)}
.filtermenu label:hover{background:#3b3566}
.filtermenu input{flex:none;width:calc(var(--u) * 0.5);height:calc(var(--u) * 0.5);margin:0;accent-color:#fff042}
.tbl td.acts>form{margin:0 calc(var(--u) * 0.2) calc(var(--u) * 0.2) 0}
.inl{display:inline-flex;gap:calc(var(--u) * 0.2);align-items:center;margin:0}
.inl .bt{height:calc(var(--u) * 1.3);font-size:calc(var(--u) * 0.4);padding:0 calc(var(--u) * 0.5)}
.in.sm{height:calc(var(--u) * 1.3);font-size:calc(var(--u) * 0.4);width:calc(var(--u) * 7)}
.tag{background:#fff042;color:#2b264c;padding:0 calc(var(--u) * 0.15);font-size:calc(var(--u) * 0.3)}
.small{font-size:calc(var(--u) * 0.34)}

/* =====================================================================
   MOBIEL (uit de mobiele artboards van het ontwerp)
   ===================================================================== */
@media (max-width:1019px){
  .root{--s:12px;display:flex;flex-direction:column;font-size:16px;line-height:1.3;overflow:visible}
  .frame,.hole,.lgwrap,.toplinks,.sw,.dom{display:none}
  .top{position:relative;z-index:6;flex:none;height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;right:auto;gap:10px;font-size:16px}
  .root[data-mode="map"] .top{left:auto;right:auto} /* de uitlijning naast de kaartbalk geldt alleen op de desktop */
  /* Telefoon: altijd het brede logo, stil (geen animatie): megafoon met hart links, PROTESTCRAFT er rechts naast, alles
     even hoog (hooguit 30px). Elk plaatje groeit naar zijn beeldverhouding (breedte / hoogte), dus bij te weinig ruimte
     krimpt het hele logo mee en blijven de delen even hoog. */
  .mlogo{display:flex;align-items:center;gap:6px;flex:1 1 auto;min-width:0;max-width:calc(30px * 10.0625 + 8px);margin-right:12px;text-decoration:none}
  .mlogo img{display:block;width:0;min-width:0;height:auto;image-rendering:pixelated}
  .mlogo-icoon{flex:1.6606 1 0}
  .mlogo-tekst{display:contents}
  .mlogo-tekst img:first-child{flex:4.1095 1 0}
  .mlogo-tekst img:last-child{flex:4.2924 1 0;margin-left:-4px}
  /* Het logo staat altijd in de kop (ook als weg terug naar home); het grote logo van de startpagina valt dan weg. */
  .lgbreed{display:none !important}
  .muser{display:flex;align-items:center;gap:10px;color:#fff042;text-decoration:none;margin-left:auto;background:none;border:0;padding:0;font:inherit;cursor:pointer}
  [data-account-kleurrand]{box-shadow:0 0 0 3px var(--pc-kleur,#fff042)}
  .account-kop .uic{box-shadow:0 0 0 3px var(--pc-kleur,#fff042)}
  .account-vak{width:30px;height:30px}
  .muser img{display:block;height:32px;width:32px;image-rendering:pixelated}
  .mn{display:flex;align-items:center;justify-content:center;width:48px;height:48px;background:none;border:0;padding:0;margin:0;color:#fff042;cursor:pointer}
  .nav{position:absolute;z-index:8;top:60px;left:16px;right:16px;background:#2b264c;display:flex;flex-direction:column;padding:8px 20px;box-shadow:inset 3px 3px 0 #4a4380,inset -3px -3px 0 #181430}
  .nav[hidden]{display:none}
  .nav a,.nav .lk{display:flex;align-items:center;min-height:48px;color:#fff042;text-decoration:none;font-size:20px}
  /* Taalschakelaar onderaan het menu: twee helften, de gekozen taal met een gele achtergrond. */
  .nav .taalwissel{display:flex;align-self:flex-start;margin:12px 0 8px;box-shadow:inset 0 0 0 3px #fff042}
  .nav .taalwissel a{min-height:44px;min-width:64px;justify-content:center;padding:0.3em 16px 0;font-size:18px;line-height:1;color:#fff042}
  .nav .taalwissel a.aan{background:#fff042;color:#2b264c}
  .stage{display:block;min-height:0;padding:0;flex:1 1 auto}
  .panel{position:relative;min-height:calc(100vh - 60px - 70px);padding:36px 20px 28px;background:#fff042;clip-path:polygon(0 24px,12px 24px,12px 12px,24px 12px,24px 0,100% 0,100% 100%,0 100%)}
  .root[data-mode="map"] .panel{background:#2b264c}
  .panel::before{content:'';position:absolute;inset:0;background:url('/img/wolken.png') repeat-x 0 8px / 720px auto;image-rendering:pixelated;animation:driftm 300s steps(3600,end) infinite;pointer-events:none}
  .root[data-mode="map"] .panel::before{display:none}
  @keyframes driftm{from{background-position:0 8px}to{background-position:-720px 8px}}
  .bot{position:relative;flex:none;height:auto;left:auto;right:auto;display:flex;flex-wrap:wrap;gap:0 20px;align-items:center;justify-content:space-between;padding:12px 20px 16px;font-size:14px}
  .botl{flex-wrap:wrap;gap:0 20px}
  .bot .lk{min-height:44px}
  /* Telefoon: alles onder elkaar (voet, knoppenrijen, filters, tabellen). De kaartknoppen blijven een rij icoontjes. */
  .bot{flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:0}
  .botl{flex-direction:column;align-items:flex-start;gap:0}
  .acts{flex-direction:column;align-items:stretch}
  .acts .go{text-align:center}
  .row,.row.end,.account-rij,.filterbalk,.pcdlg-toewijzen .row{flex-direction:column;align-items:stretch}
  .row.end{flex-direction:column-reverse} /* de hoofdknop (laatste in de rij) bovenaan */
  .row.end .bt,.account-rij .bt,.filterbalk>.bt,.pcdlg-toewijzen .row .bt{flex:none;width:100%}
  .filters,.filters summary{width:100%}
  .inl{display:flex;width:100%}
  .inl .bt{flex:1 1 auto}
  .tbl,.tbl tbody,.tbl tr,.tbl td{display:block;width:100%}
  .tbl thead{display:none}
  .tbl tr{padding:10px 0;border-bottom:2px solid #181430}
  .tbl td{border-bottom:0;padding:2px 0}
  .tbl td.acts{display:flex;flex-direction:column;gap:8px;margin-top:6px}
  .tbl td.acts>form{margin:0}
  .tbl td.mid[data-label]{display:flex;align-items:center;gap:10px}
  /* Accountvenster: van onder inschuiven, de achtergrond fadet in (zie public/js/account.js). */
  .pcdlg.schuif{align-items:flex-end;padding:0;background:rgba(24,20,48,0);transition:background-color .3s ease}
  .pcdlg.schuif.toont{background:rgba(24,20,48,.72)}
  .pcdlg.schuif .pcdlg-card{width:100%;max-height:92vh;transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  .pcdlg.schuif.toont .pcdlg-card{transform:none}
  .tbl td.mid[data-label]::before{content:attr(data-label);min-width:130px;color:#ffffff;font-size:14px}
  .dom{display:block;flex-basis:100%;padding-top:4px}
  .mob{display:inline-block !important}
  p.mob{display:block !important}
  .hd{font-size:34px}
  .tx{margin:14px 0 18px;font-size:17px;line-height:1.25}
  .go{display:inline-flex;align-items:center;min-height:48px;border-width:3px;padding:0 18px;font-size:18px}
  .acts{gap:12px}
  .card{--c:8px;padding:28px 22px 24px;box-shadow:inset 4px 4px 0 #ff7c89,inset -4px -4px 0 #b81d30}
  .ct{margin:0 0 18px;font-size:34px}
  .lb{margin:0 0 4px;font-size:14px}
  .in{height:52px;padding:0 14px;font-size:20px;box-shadow:inset 3px 3px 0 #d3bf00,inset -3px -3px 0 #fffbb0}
  .in:focus{outline-width:3px}
  .bt{height:52px;padding:0 24px;font-size:20px;box-shadow:inset 3px 3px 0 #5d5694,inset -3px -3px 0 #181430}
  .bt2{box-shadow:inset 0 0 0 3px #fff042}
  .stack{gap:14px}
  .row{gap:12px;margin-top:18px}
  .row.end{justify-content:stretch}
  .row.end .bt{flex:none} /* onder elkaar (zie hieronder): elke knop zijn eigen hoogte */
  .err{padding:4px 10px;margin-top:14px}
  .srv{--c:6px;margin-top:24px;padding:14px 16px;gap:8px;font-size:14px;box-shadow:inset 3px 3px 0 #4a4380,inset -3px -3px 0 #181430}
  .srvh{font-size:12px}
  .srvr img{width:16px;height:16px}
  .dot{width:12px;height:12px}
  .gate{flex-direction:column;gap:0;padding:0;align-items:stretch}
  .gl,.gr{width:auto;top:auto}
  .root[data-view="login"] .gl{display:none}
  .root[data-view="gate"] .gr{display:none}
  .lgbreed{display:none !important} /* het logo staat in de kop */
  .apply{padding:0}
  .apply .card{width:100%}
  .intro{margin:0 0 20px;font-size:16px}
  .big{margin:0 0 22px;font-size:18px}
  .grid2{display:flex;flex-direction:column;gap:16px}
  .note{font-size:14px}
  .chk{gap:14px;margin-top:20px;font-size:15px}
  .chk input{width:28px;height:28px}
  /* kaart */
  .swm{display:flex;flex-direction:row;flex-wrap:wrap;gap:10px}
  .swm .seg{flex:1 1 0;justify-content:center;min-height:52px;padding:10px}
  .swm .seg span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .swm .seg img{width:32px;height:32px}
  .swm .swstatm{flex-basis:100%}
  .seg{--c:6px;gap:12px;padding:10px 14px;box-shadow:inset 3px 3px 0 #4a4380,inset -3px -3px 0 #181430}
  .seg[aria-pressed="true"]{box-shadow:inset 3px 3px 0 #fffbb0,inset -3px -3px 0 #c9b300}
  .seg img{width:28px;height:28px}
  .seg b{font-size:20px}
  .seg small{font-size:12px}
  .swstatm{color:#fff042;font-size:14px;gap:8px;margin:8px 0 4px}
  .kaart{display:block}
  .mapouter{position:relative;height:auto;width:100%;aspect-ratio:auto;margin:24px 0 0}
  .map{position:relative;width:100%;aspect-ratio:179 / 254}
  .pinline{display:none}
  .mk{width:44px;height:44px;transform:translate(-50%,-85%);display:flex;align-items:flex-end;justify-content:center}
  .mk img{width:20px}
  .mk[aria-pressed="true"]{width:44px}
  .mk[aria-pressed="true"] img{width:36px}
  .zoom{display:flex;position:absolute;right:8px;bottom:8px;z-index:6;flex-direction:column;gap:6px}
  .pop{--s:10px;position:absolute;left:8px;right:8px;bottom:8px;top:auto;width:auto;transform:none;margin:0;z-index:10;padding:14px 16px 20px}
  .popx{display:flex;position:absolute;top:6px;right:6px;z-index:2}
  .popname{font-size:28px;padding-right:48px}
  .popowner{gap:8px;margin:10px 0;font-size:17px}
  .popowner img{width:22px;height:22px}
  .popdesc{font-size:16px;margin:0 0 8px}
  .popshots{gap:8px}
  .online{display:block;margin-top:14px;color:#fff042;font-size:14px}
  .kaartknoppen{display:none!important}
  .swm .seg-pins img{width:22px!important;height:32px!important}
  .swm .seg-gebied .gebied-icoon{width:32px;height:32px}
  .pcdlg{align-items:flex-end;padding:0}
  .pcdlg-card{width:100%;max-height:92vh}
  .pcdlg-eig{margin:-8px 0 14px;font-size:15px}
  .pcdlg-velden{gap:14px}
  .pcdlg-tekst{min-height:110px;padding:10px 14px;font-size:18px}
  .pcdlg-ro{font-size:17px}
  .pcdlg-knoppen .bt{flex:1 1 40%}
  .pll{gap:3px;padding:2px}
  .pll img{width:12px;height:12px}
  .pll span{font-size:11px}
  .plp{width:12px;height:6px}
  .chip{border-width:3px;padding:8px 14px;font-size:16px;min-height:44px}
  .live{position:relative;width:100%;height:auto;box-shadow:none}
  .live iframe{height:max(420px,calc(100vh - 320px));box-shadow:inset 3px 3px 0 #4a4380,inset -3px -3px 0 #181430}
  .kaart[data-kaartmode="live"]{position:static;clip-path:none}
  .kaart[data-kaartmode="live"] .mapouter{position:relative;width:100%;height:auto;inset:auto}
  /* overgang en pagina's */
  .wipe,.ld{display:none !important}
  .kaartladen .ld{display:block !important;width:160px}
  .page{width:100%;margin:0;font-size:16px}
  .page h2{font-size:22px;margin:22px 0 6px}
  .page p,.page li{margin:0 0 10px}
  .page ol,.page ul{padding-left:22px}
  .page .small{font-size:14px}
  .beheer{width:100%;margin:0}
  .flash{padding:10px 14px;margin:12px 0}
  .dark{--c:6px;padding:14px 16px;margin-top:20px;font-size:14px}
  .tbl th{font-size:12px;padding:6px 10px 6px 0}
  .tbl td{padding:8px 10px 8px 0}
  .inl .bt{height:40px;font-size:15px;padding:0 12px}
  .in.sm{height:40px;font-size:15px;width:160px}
  .tag{font-size:11px;padding:0 4px}
  .small{font-size:12px}
}