/* Walcle, richting 3 (Speels). Licht en donker uit dezelfde tokens. */
:root {
  --mint: #7FE3B0; --mint-diep: #57CF95; --paars: #351048; --paars-2: #4C1A66;
  --vlak: var(--mint); --inkt: var(--paars); --zacht: rgba(53,16,72,.62);
  --kaart: #ffffff; --kaart-inkt: var(--paars);
  --tegen: var(--paars); --tegen-inkt: #ffffff;
  --prim: var(--paars); --prim-inkt: #ffffff;
  --sub: #F1ECF6; --sub-inkt: var(--paars);
  --lijn: rgba(53,16,72,.12); --nav: var(--paars);
}
[data-thema="donker"] {
  --vlak: #160722; --inkt: #ffffff; --zacht: rgba(255,255,255,.6);
  --kaart: #251034; --kaart-inkt: #ffffff;
  --tegen: #33124A; --tegen-inkt: #ffffff;
  --prim: var(--mint); --prim-inkt: var(--paars);
  --sub: rgba(255,255,255,.08); --sub-inkt: #ffffff;
  --lijn: rgba(255,255,255,.12); --nav: #251034;
}
@media (prefers-color-scheme: dark) {
  [data-thema="auto"] {
    --vlak: #160722; --inkt: #ffffff; --zacht: rgba(255,255,255,.6);
    --kaart: #251034; --kaart-inkt: #ffffff;
    --tegen: #33124A; --tegen-inkt: #ffffff;
    --prim: var(--mint); --prim-inkt: var(--paars);
    --sub: rgba(255,255,255,.08); --sub-inkt: #ffffff;
    --lijn: rgba(255,255,255,.12); --nav: #251034;
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { min-height: 100%; }
body {
  background: var(--vlak); color: var(--inkt);
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  padding: max(18px, env(safe-area-inset-top)) 18px calc(132px + env(safe-area-inset-bottom));
  transition: background .2s;
}
body.kaartmodus { padding: 0; }
.verborgen, [hidden] { display: none !important; }

.scherm { display: none; max-width: 560px; margin: 0 auto; }
.scherm.aan { display: block; }
.scherm.kaartscherm.aan { display: block; position: fixed; inset: 0; max-width: none; }

h1, h2, h3 { letter-spacing: -.02em; }
.jumbo { font: 800 34px/1.08 'Plus Jakarta Sans'; margin: 18px 0 4px; }
.jumbo.licht { color: #fff; }
h3 { font: 800 19px/1.3 'Plus Jakarta Sans'; }
.kopregel { margin: 24px 2px 12px; }
.lead { font: 500 15px/1.55 Inter; color: var(--zacht); max-width: 320px; }
.lead.licht { color: rgba(255,255,255,.72); }
.hint { font: 500 13px/1.5 Inter; color: var(--zacht); }
.fijn { font: 500 12px/1.5 Inter; color: var(--zacht); margin: 14px 2px 0; }
.fout { font: 600 13px/1.5 Inter; color: #C2185B; margin-top: 10px; min-height: 18px; }
[data-thema="donker"] .fout { color: #FF9BC0; }
.sterk { font: 800 17px 'Plus Jakarta Sans'; margin-top: 6px; }
.mint { color: var(--mint); }
.rechts { text-align: right; margin-left: auto; }
.tussen { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.labelklein { font: 700 11px Inter; letter-spacing: .14em; text-transform: uppercase; opacity: .45; }
.labelklein.licht { color: #fff; opacity: .5; }
.labelmint { font: 700 11px Inter; letter-spacing: .14em; text-transform: uppercase; color: var(--mint); }

.kop { display: flex; align-items: center; justify-content: space-between; padding-top: 6px; }
.koprechts { display: flex; align-items: center; gap: 10px; }
.merk { font: 800 40px 'Plus Jakarta Sans'; letter-spacing: -.03em; margin: 22px 0 10px; }
.merk.klein { font-size: 20px; margin: 0; }


.blok { background: var(--kaart); color: var(--kaart-inkt); border-radius: 28px;
  padding: 20px; margin-top: 14px; }
.donkerblok { background: var(--tegen); color: var(--tegen-inkt); }
.lijstblok { padding: 4px 18px; }

.knop { display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; height: 58px; border: none; border-radius: 22px; cursor: pointer;
  font: 800 16px 'Plus Jakarta Sans'; background: var(--prim); color: var(--prim-inkt);
  margin-top: 14px; }
.knop:disabled { opacity: .5; }
.knop.leeg { background: transparent; color: var(--inkt); border: 2px solid var(--lijn); }
.blok .knop.leeg { color: var(--kaart-inkt); }
.knop.mint { background: var(--mint); color: var(--paars); }
.knop.transparant { background: rgba(127,227,176,.16); color: var(--inkt); }
.donkerscherm .knop.transparant { background: rgba(255,255,255,.12); color: #fff; }
.knoprij { display: flex; gap: 10px; }
.knoprij .knop { flex: 1; height: 52px; font-size: 15px; }

.afstandrij { display: flex; gap: 9px; margin: 12px 0 4px; }
.afstandrij button { flex: 1; aspect-ratio: 1; border: none; border-radius: 20px; cursor: pointer;
  background: var(--sub); color: var(--sub-inkt); font: 800 22px 'Plus Jakarta Sans'; }
.afstandrij button small { display: block; font: 700 10px Inter; opacity: .6; margin-top: 2px; }
.afstandrij button.aan { background: var(--prim); color: var(--prim-inkt); }

.tegels { display: flex; gap: 9px; margin-top: 16px; }
.tegels > div { flex: 1; border-radius: 20px; padding: 14px 6px; text-align: center;
  background: var(--sub); color: var(--sub-inkt); }
.tegels > div.uit { background: var(--mint); color: var(--paars); }
.tegels b { display: block; font: 800 22px 'Plus Jakarta Sans'; }
.tegels span { font: 600 10px Inter; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }

.lijst { display: flex; flex-direction: column; gap: 10px; }
.kaartrij { display: flex; align-items: center; gap: 13px; background: var(--kaart);
  color: var(--kaart-inkt); border-radius: 24px; padding: 14px; border: none; width: 100%;
  text-align: left; cursor: pointer; font-family: inherit; }
.kaartrij .rond { width: 48px; height: 48px; border-radius: 17px; background: var(--mint);
  flex: none; display: grid; place-items: center; font: 800 15px 'Plus Jakarta Sans'; color: var(--paars); }
.kaartrij .titel { display: block; font: 800 15px 'Plus Jakarta Sans'; }
.kaartrij .onder { display: block; font: 500 12px Inter; color: var(--zacht); margin-top: 3px; }
.regels > div, .lijstblok > div { display: flex; align-items: center; gap: 10px; padding: 11px 0;
  border-top: 1px solid var(--lijn); font: 600 14px Inter; }
.regels > div:first-child, .lijstblok > div:first-child { border-top: none; }
.regels b, .lijstblok b { margin-left: auto; font: 800 15px 'Plus Jakarta Sans'; }

.puntbadge { display: inline-flex; align-items: center; gap: 6px; border: none; cursor: pointer;
  background: var(--tegen); color: var(--tegen-inkt); border-radius: 999px; padding: 8px 14px;
  font: 700 12px Inter; }
.puntbadge b { font: 800 14px 'Plus Jakarta Sans'; }
.puntbadge.groenbadge { background: var(--mint); color: var(--paars); }
.rondknop { width: 42px; height: 42px; border-radius: 15px; border: none; cursor: pointer;
  background: var(--tegen); position: relative; }

.pilknop { border: none; cursor: pointer; background: var(--kaart); color: var(--kaart-inkt);
  border-radius: 16px; padding: 12px 16px; font: 800 14px 'Plus Jakarta Sans';
  box-shadow: 0 10px 22px -16px rgba(0,0,0,.7); display: inline-flex; align-items: center; gap: 8px; }
.pilknop.mintpil { background: var(--mint); color: var(--paars); }
.stip { width: 9px; height: 9px; border-radius: 50%; background: var(--paars); display: block; }

#kaart, #kaart-loop { position: absolute; inset: 0; }
.kaartkop { position: absolute; top: max(14px, env(safe-area-inset-top)); left: 16px; right: 16px;
  display: flex; justify-content: space-between; z-index: 3; }
.paneel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4;
  background: var(--kaart); color: var(--kaart-inkt); border-radius: 30px 30px 0 0;
  padding: 14px 20px calc(104px + env(safe-area-inset-bottom)); box-shadow: 0 -14px 40px -24px rgba(0,0,0,.6); }
.paneel.losstaand { position: fixed; max-width: 560px; margin: 0 auto; }
.greep { width: 44px; height: 5px; border-radius: 9px; background: var(--lijn); margin: 0 auto 14px; }
.overlay { position: fixed; inset: 0; background: rgba(20,6,30,.45); z-index: 20; }

.groot { display: flex; align-items: flex-end; gap: 8px; font: 800 46px/1 'Plus Jakarta Sans'; margin-top: 6px; }
.groot small { font: 700 15px Inter; opacity: .55; padding-bottom: 6px; }
.groot .rechts { font: 500 13px Inter; padding-bottom: 8px; }
.groot2 { font: 800 24px 'Plus Jakarta Sans'; }
.groot3 { font: 800 18px 'Plus Jakarta Sans'; }
.balk { height: 10px; border-radius: 9px; background: var(--sub); margin: 16px 0 10px; overflow: hidden; }
.balk.licht { background: rgba(255,255,255,.14); }
.balk i { display: block; height: 100%; width: 0; border-radius: 9px; background: var(--mint); }

.donkerscherm { background: var(--tegen); color: #fff; min-height: 100vh; margin: -18px -18px -112px;
  padding: max(30px, env(safe-area-inset-top)) 20px calc(40px + env(safe-area-inset-bottom)); }
.donkerscherm.aan { display: block; }
.vinkje { width: 76px; height: 76px; border-radius: 28px; background: var(--mint); margin-top: 18px; }


.auth-top { max-width: 560px; margin: 0 auto; padding-top: 26px; }
.auth-kaart { max-width: 560px; margin: 26px auto 0; background: var(--kaart); color: var(--kaart-inkt);
  border-radius: 30px; padding: 22px; }
.tabrij, .themarij { display: flex; gap: 8px; }
.tabknop { flex: 1; border: none; cursor: pointer; border-radius: 999px; padding: 10px 12px;
  background: var(--sub); color: var(--sub-inkt); font: 700 13px 'Plus Jakarta Sans'; }
.tabknop.aan { background: var(--prim); color: var(--prim-inkt); }
.themarij { margin-top: 12px; }
.themarij .tabknop { flex: 1; }
.veldrij { display: flex; flex-direction: column; gap: 12px; margin-top: 18px; }
label { font: 700 12px Inter; letter-spacing: .04em; color: var(--zacht); display: block; }
input { width: 100%; margin-top: 6px; height: 50px; border-radius: 16px; border: 2px solid var(--lijn);
  background: var(--sub); color: var(--kaart-inkt); padding: 0 14px;
  font: 600 16px Inter; }
input:focus { outline: none; border-color: var(--mint); }
.handle { display: flex; align-items: center; gap: 2px; margin-top: 6px; background: var(--sub);
  border: 2px solid var(--lijn); border-radius: 16px; padding-left: 14px; color: var(--kaart-inkt); }
.handle span { font: 800 17px 'Plus Jakarta Sans'; opacity: .4; }
.handle input { border: none; background: none; margin: 0; height: 46px; }
.handle.groot3 { padding: 12px 16px; margin-top: 12px; font-size: 15px; word-break: break-all; }

.profielkop { display: flex; align-items: center; gap: 15px; margin-top: 10px; }
.avatar { width: 72px; height: 72px; border-radius: 26px; background: var(--prim); flex: none; }
.avatar .ico { width: 34px; height: 34px; }

.balknav { position: fixed; left: 14px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom));
  height: 68px; border-radius: 26px; background: var(--nav); display: flex; align-items: center;
  justify-content: space-around; z-index: 15; max-width: 540px; margin: 0 auto;
  box-shadow: 0 18px 40px -22px rgba(0,0,0,.7); }
.balknav button { width: 44px; height: 44px; border: none; border-radius: 16px; cursor: pointer;
  background: transparent; position: relative; }
.balknav button { color: rgba(255,255,255,.5); display: grid; place-items: center; }
.balknav button svg { width: 23px; height: 23px; }
.balknav button.plus { color: var(--mint); }
.balknav button.plus svg { width: 26px; stroke-width: 2.2; }
.balknav button.aan { background: var(--mint); color: var(--paars); }

.sterren { display: flex; gap: 6px; }
.sterren button { border: none; background: none; cursor: pointer; font-size: 30px; line-height: 1;
  color: var(--lijn); padding: 0; }
.sterren button.aan { color: var(--mint-diep); }
[data-thema="donker"] .sterren button.aan { color: var(--mint); }
.tagrij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.tagrij button { border: 2px solid var(--lijn); background: transparent; color: var(--kaart-inkt);
  border-radius: 999px; padding: 8px 14px; font: 700 13px 'Plus Jakarta Sans'; cursor: pointer; }
.tagrij button.aan { background: var(--mint); border-color: var(--mint); color: var(--paars); }
.maplibregl-ctrl-attrib { font-size: 10px; }

.kopgroep { display: flex; gap: 8px; }
.ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round; }
.ico.klein { width: 17px; height: 17px; }
.ico.draai { transform: rotate(180deg); }
.ico.kruis { transform: rotate(45deg); }
.logorij { display: flex; align-items: center; gap: 12px; }
.merktegel { width: 66px; height: 66px; border-radius: 21px; background: #ffffff;
  display: grid; place-items: center; flex: none; box-shadow: 0 8px 20px -14px rgba(0,0,0,.6); }
.merktegel img { width: 44px; }
.logorij.klein .merktegel { width: 34px; height: 34px; border-radius: 12px; }
.logorij.klein .merktegel img { width: 22px; }
.logorij.klein .woordmerk { font-size: 19px; }
.woordmerk { font: 500 34px Poppins, 'Plus Jakarta Sans', sans-serif; color: var(--inkt);
  letter-spacing: -.01em; }
.paneelkop { display: flex; align-items: center; gap: 13px; margin-bottom: 4px; }
.merkrond { width: 46px; height: 46px; border-radius: 16px; background: var(--mint); color: var(--paars);
  display: grid; place-items: center; flex: none; }
.avatar { display: grid; place-items: center; color: var(--prim-inkt); }
.vinkje { display: grid; place-items: center; color: var(--paars); }
.vinkje .ico { width: 40px; stroke-width: 2.6; }
.rondknop { display: grid; place-items: center; color: var(--mint); }
.rondknop.wit { background: var(--kaart); color: var(--kaart-inkt); }
.hint .ico, .fijn .ico { vertical-align: -3px; margin-right: 4px; }
.knop .ico { margin-right: -2px; }
.sterren button { display: grid; place-items: center; }
.sterren .ico { width: 34px; height: 34px; stroke-width: 1.4; }
.sterren button.aan .ico { fill: currentColor; }
.kaartrij .pijl { color: var(--zacht); }

/* Het paneel tijdens het lopen schuift omlaag zodat je de kaart ziet, en is terug omhoog te vegen. */
.paneel.sleepbaar { touch-action: none; will-change: transform; }
.greepvlak { display: grid; place-items: center; height: 34px; margin: -14px -20px 4px;
  cursor: grab; touch-action: none; }
.greepvlak .greep { margin: 0; width: 52px; }
.paneel.sleepbaar.dicht { box-shadow: 0 -18px 44px -22px rgba(0,0,0,.55); }

.tekstknop { display: block; width: 100%; margin-top: 10px; background: none; border: none; cursor: pointer;
  font: 700 13px Inter; color: var(--kaart-inkt); opacity: .65; text-decoration: underline; }
.kaartscherm.kiesmodus #kaart { cursor: crosshair; }

/* --- profielfoto --- */
.avatar { overflow: hidden; position: relative; }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.groot { cursor: pointer; }
.fotobadge { position: absolute; right: -2px; bottom: -2px; width: 26px; height: 26px; border-radius: 50%;
  background: var(--mint); color: var(--paars); display: grid; place-items: center;
  border: 3px solid var(--vlak); }
.avatar.mini { width: 42px; height: 42px; border-radius: 15px; }
.avatar.rij { width: 48px; height: 48px; border-radius: 17px; flex: none; }
.avatar.rij .ico, .avatar.mini .ico { width: 22px; height: 22px; }

/* --- zoeken en gebruikersrijen --- */
.zoekrij { display: flex; align-items: center; gap: 10px; background: var(--kaart); color: var(--kaart-inkt);
  border-radius: 20px; padding: 0 16px; margin-top: 16px; }
.zoekrij input { border: none; background: none; height: 52px; margin: 0; padding: 0;
  font: 600 15px Inter; color: var(--kaart-inkt); }
.zoekrij input:focus { outline: none; }
.knopklein { border: none; cursor: pointer; border-radius: 999px; padding: 9px 15px; flex: none;
  font: 700 13px 'Plus Jakarta Sans'; background: var(--prim); color: var(--prim-inkt); }
.knopklein.stil { background: var(--sub); color: var(--sub-inkt); }
.badge { background: var(--mint); color: var(--paars); border-radius: 999px; padding: 3px 9px;
  font: 800 11px 'Plus Jakarta Sans'; }

/* --- chat --- */
#s-chat.aan { display: flex; flex-direction: column; height: calc(100vh - 40px); }
.chatkop { display: flex; align-items: center; gap: 12px; padding: 6px 0 14px; }
.chatkop b { font: 800 16px 'Plus Jakarta Sans'; }
.berichten { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding: 4px 2px 12px; }
.bericht { max-width: 78%; padding: 12px 15px; border-radius: 20px; font: 500 14px/1.45 Inter;
  background: var(--kaart); color: var(--kaart-inkt); align-self: flex-start; }
.bericht.mijn { align-self: flex-end; background: var(--prim); color: var(--prim-inkt); }
.bericht .wanneer { display: block; font: 500 11px Inter; opacity: .55; margin-top: 6px; }
.bericht .rondjekaart { background: var(--sub); color: var(--sub-inkt); border-radius: 16px;
  padding: 12px; margin-top: 6px; font-family: 'Plus Jakarta Sans'; }
.bericht.mijn .rondjekaart { background: rgba(255,255,255,.14); color: #fff; }
[data-thema="donker"] .bericht.mijn .rondjekaart { background: rgba(53,16,72,.22); color: var(--paars); }
.chatbalk { display: flex; align-items: center; gap: 10px; padding: 10px 0 calc(96px + env(safe-area-inset-bottom)); }
.chatbalk input { flex: 1; margin: 0; height: 50px; }
.rondknop.verstuur { background: var(--prim); color: var(--prim-inkt); }
.planknoppen { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.plankaart { background: var(--kaart); color: var(--kaart-inkt); border-radius: 24px; padding: 18px;
  margin-top: 14px; }
.plankaart .datum { font: 800 15px 'Plus Jakarta Sans'; color: var(--mint-diep); }
[data-thema="donker"] .plankaart .datum { color: var(--mint); }