:root {
  --koraal: #FF6B5A;
  --mango: #FF9A3C;
  --framboos: #D94F70;
  --creme: #FFF6EE;
  --creme-donker: #FFF0E4;
  --wit: #ffffff;
  --tekst: #2D1F1A;
  --tekst-zacht: #7A5A4A;
  --rand: #F0D8C8;
  --radius: 16px;
}

* { box-sizing: border-box; }

/* Knoppen en flex-blokken hebben een eigen display; die wint van het
   ingebouwde [hidden]. Daarom hier hard zetten. */
[hidden] { display: none !important; }

body {
  margin: 0;
  font-family: "Nunito", sans-serif;
  color: var(--tekst);
  background: linear-gradient(160deg, #FFEAD9 0%, var(--creme) 55%);
  min-height: 100vh;
}

.centraal {
  min-height: 100vh;
  display: grid;
  place-content: center;
  text-align: center;
  gap: 6px;
  padding: 24px;
}

.merk {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 3rem;
  margin: 0;
  background: linear-gradient(90deg, var(--koraal), var(--mango));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.tagline { color: var(--tekst-zacht); margin: 0; }
.status { color: var(--tekst-zacht); font-size: 0.85rem; margin-top: 16px; }

/* ---- layout ---- */
.kolom-wrap { max-width: 560px; margin: 0 auto; padding: 16px 18px 80px; }
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 0 18px;
}

/* ---- kaart ---- */
.kaart {
  background: var(--wit);
  border: 1.5px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: 0 4px 20px rgba(45, 31, 26, 0.1);
  padding: 28px 26px;
  width: 100%;
  max-width: 400px;
  text-align: center;
}
.kaart.breed { max-width: 560px; text-align: left; }
.kaart h2 { font-family: "Baloo 2", sans-serif; margin: 14px 0 18px; }
.merk.klein { font-size: 1.8rem; }

/* ---- formulier ---- */
.veld-groep { display: flex; flex-direction: column; gap: 14px; text-align: left; }
.veld { display: flex; flex-direction: column; gap: 5px; border: none; padding: 0; margin: 0; }
.veld > span, .veld legend { font-size: 0.85rem; font-weight: 700; color: var(--tekst-zacht); }
.veld input {
  border: 1.5px solid var(--rand); border-radius: 10px;
  padding: 10px 13px; font-family: "Nunito", sans-serif; font-size: 0.95rem;
  background: var(--creme); color: var(--tekst); outline: none;
}
.veld input:focus { border-color: var(--koraal); background: var(--wit); }

/* ---- knoppen ---- */
.knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: "Nunito", sans-serif; font-weight: 700; font-size: 0.92rem;
  border: none; cursor: pointer; border-radius: 999px; padding: 11px 20px;
  transition: filter 0.16s ease, transform 0.12s ease;
}
.knop:active { transform: scale(0.98); }
.knop.primair { color: var(--wit); background: var(--koraal); }
.knop.primair:hover { background: var(--framboos); }
.knop.zacht { color: var(--koraal); background: var(--wit); border: 1.5px solid var(--rand); }
.knop.zacht:hover { border-color: var(--koraal); }
.knop.vol { width: 100%; }
.link {
  background: none; border: none; cursor: pointer; color: var(--koraal);
  font-family: "Nunito", sans-serif; font-weight: 700; font-size: 0.88rem;
  margin-top: 16px; padding: 4px;
}

/* ---- taste-keuze (tag-knoppen) ---- */
.tag-keuze { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-knop {
  cursor: pointer; user-select: none;
  font-size: 0.85rem; font-weight: 600; color: var(--tekst-zacht);
  background: var(--creme-donker); border: 1.5px solid var(--rand);
  padding: 7px 14px; border-radius: 999px; transition: all 0.14s ease;
}
.tag-knop.aan {
  color: var(--koraal); background: rgba(255, 107, 90, 0.12);
  border-color: var(--koraal);
}

/* ---- foto ---- */
.foto-rij { display: flex; align-items: center; gap: 16px; margin-bottom: 6px; }
.foto-rond {
  width: 72px; height: 72px; border-radius: 50%; flex: none;
  background: var(--creme-donker) center / cover no-repeat;
  border: 1.5px solid var(--rand);
}

/* ---- schuif-rij (zichtbaarheid) ---- */
.schuif-rij {
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  background: var(--creme-donker); border: 1.5px solid var(--rand);
  border-radius: 12px; padding: 14px 16px;
}
.schuif-rij input { margin-top: 3px; flex: none; }
.schuif-rij strong { display: block; font-size: 0.92rem; }
.schuif-rij small { color: var(--tekst-zacht); font-size: 0.82rem; }

/* ---- meldingen ---- */
.fout { color: var(--framboos); font-size: 0.86rem; font-weight: 600; margin: 0; }
.gelukt { color: var(--groen, #3D9970); font-size: 0.86rem; font-weight: 600; margin: 0; }
.badge {
  display: inline-block; font-size: 0.72rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}
.badge.groen { color: #3D9970; background: #E8F8F1; }

/* ---- peeks album ---- */
.peeks-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px; margin-top: 16px;
}
.peeks-tegel { position: relative; }
.peeks-foto,
.peeks-tegel .avatar {
  display: block; width: 100%; height: auto; aspect-ratio: 1; border-radius: 12px;
  border: 1.5px solid var(--rand); cursor: pointer;
}
.peeks-weg {
  position: absolute; top: 6px; right: 6px; width: 26px; height: 26px;
  border: none; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, 0.45); color: var(--wit);
  font-size: 1rem; line-height: 1;
}
.peeks-weg:hover { background: var(--framboos); }
.drop-overlay {
  position: fixed; inset: 0; z-index: 50; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 244, 235, 0.85);
}
.drop-overlay[hidden] { display: none; }
.drop-vlak {
  border: 3px dashed var(--koraal); border-radius: var(--radius);
  padding: 48px 64px; background: var(--wit);
  color: var(--koraal); font-family: "Baloo 2", sans-serif;
  font-weight: 800; font-size: 1.2rem;
}

/* ---- desires (wensenlijst) ---- */
.wens-lijst { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.wens {
  position: relative; display: flex; flex-direction: column; gap: 6px;
  background: var(--creme-donker); border: 1.5px solid var(--rand);
  border-radius: 12px; padding: 12px 42px 12px 14px;
}
.wens-tekst { margin: 0; font-size: 0.92rem; line-height: 1.45; }
.wens-zichtbaar {
  display: flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 0.78rem; font-weight: 600; color: var(--tekst-zacht);
}
.wens .peeks-weg { top: 10px; }
.wens-regel {
  font-size: 0.8rem; color: var(--tekst-zacht); margin: 0 0 4px; line-height: 1.4;
}

/* ---- tips en wens-match ---- */
.tips { margin-top: 14px; }
.tips .tag-knop { text-align: left; max-width: 100%; }
.tip-tekst {
  font-size: 0.85rem; line-height: 1.5; margin: 10px 0 0; text-align: left;
  background: var(--creme-donker); border-radius: 12px; padding: 10px 12px;
}
.wens-match {
  font-size: 0.82rem; color: var(--tekst-zacht); margin: 2px 0 8px;
}
.catalogus { margin-top: 6px; }
.catalogus summary {
  cursor: pointer; font-size: 0.85rem; font-weight: 700; color: var(--tekst-zacht);
  padding: 6px 2px; list-style-position: inside;
}
.catalogus summary:hover { color: var(--koraal); }
.catalogus .aantal { font-weight: 600; opacity: 0.6; }
.catalogus .tag-keuze { padding: 4px 0 10px; }
.catalogus .tag-knop:disabled {
  cursor: default; opacity: 0.45; color: var(--koraal); border-color: var(--koraal);
}
.wens-match-tekst { display: block; color: var(--framboos); font-weight: 600; }

/* ---- nav ---- */
/* Zeven items passen niet altijd op één regel; laat 'm afbreken in plaats van
   over de rand lopen. */
.nav { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.nav a {
  text-decoration: none; color: var(--tekst-zacht); font-weight: 700;
  font-size: 0.88rem; padding: 6px 12px; border-radius: 999px;
}
.nav a.actief { color: var(--koraal); background: rgba(255, 107, 90, 0.12); }
.nav a:hover { color: var(--koraal); }

/* ---- ontdek-kaarten ---- */
.personen { display: flex; flex-direction: column; gap: 12px; }
.persoon {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--wit); border: 1.5px solid var(--rand);
  border-radius: var(--radius); padding: 16px;
}
.avatar {
  width: 52px; height: 52px; border-radius: 50%; flex: none;
  display: grid; place-content: center;
  background: linear-gradient(135deg, #FFE7D8, #FFD9C2);
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.3rem;
  color: var(--koraal);
}
.persoon .info { flex: 1; min-width: 0; }
.persoon .naam { font-weight: 800; font-family: "Baloo 2", sans-serif; }
.persoon .overlap { color: var(--tekst-zacht); font-size: 0.82rem; margin: 1px 0 8px; }
.persoon .match-zin {
  font-size: 0.85rem; color: var(--framboos); font-weight: 600;
  margin: 2px 0 8px; font-style: italic;
}
.persoon .tags { display: flex; flex-wrap: wrap; gap: 5px; }
.persoon .tag .dir { display: inline-flex; gap: 2px; color: var(--koraal); }
.persoon .tag .dir svg { width: 13px; height: 13px; }
.legenda {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  font-size: 0.8rem; font-weight: 600; color: var(--tekst-zacht);
  margin: -8px 0 14px;
}
.legenda svg { width: 15px; height: 15px; color: var(--koraal); vertical-align: -3px; }
.persoon .tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; font-weight: 600; color: var(--tekst-zacht);
  background: var(--creme-donker); border-radius: 999px; padding: 3px 10px;
}
.persoon .tag svg { width: 14px; height: 14px; }
.persoon .tag.samen { color: var(--koraal); background: rgba(255, 107, 90, 0.12); }
.persoon .knop { flex: none; align-self: center; }
.leeg { color: var(--tekst-zacht); text-align: center; padding: 28px 12px; }

/* ---- gesprekken-lijst ---- */
.gesprek-rij {
  display: flex; gap: 14px; align-items: center; width: 100%; text-align: left;
  background: var(--wit); border: 1.5px solid var(--rand); cursor: pointer;
  border-radius: var(--radius); padding: 14px 16px; font: inherit; color: inherit;
}
.gesprek-rij:hover { border-color: var(--koraal); }
.gesprek-rij .laatste {
  color: var(--tekst-zacht); font-size: 0.85rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}

/* ---- gesprek ---- */
.chat-vlak { display: grid; grid-template-columns: 220px 1fr; gap: 16px; }
@media (max-width: 640px) { .chat-vlak { grid-template-columns: 1fr; } }
.beeld-kolom { text-align: center; }
.beeld-kolom canvas {
  width: 100%; border-radius: var(--radius); border: 1.5px solid var(--rand);
  display: block; background: var(--creme-donker);
}
.stap-balk { display: flex; gap: 4px; margin: 10px 0 4px; }
.stap-balk .seg {
  flex: 1; height: 6px; border-radius: 3px; background: var(--creme-donker);
}
.stap-balk .seg.aan { background: var(--koraal); }
.stap-tekst { font-size: 0.8rem; color: var(--tekst-zacht); margin: 0 0 10px; }
.beeld-kolom .knop { width: 100%; margin-bottom: 8px; }
.knop:disabled { opacity: 0.55; cursor: default; filter: none; }
.wacht-hint { font-size: 0.8rem; color: var(--tekst-zacht); margin: 0 0 8px; }

.berichten {
  display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
  height: 420px; padding: 4px;
}
.bericht {
  max-width: 78%; padding: 9px 13px; border-radius: 14px; font-size: 0.92rem;
  line-height: 1.45; overflow-wrap: break-word;
}
.bericht.mij { align-self: flex-end; background: var(--koraal); color: var(--wit); border-bottom-right-radius: 4px; }
.bericht.ander { align-self: flex-start; background: var(--creme-donker); border-bottom-left-radius: 4px; }
.chat-invoer { display: flex; gap: 8px; margin-top: 12px; }
.chat-invoer input {
  flex: 1; border: 1.5px solid var(--rand); border-radius: 999px;
  padding: 10px 16px; font-family: "Nunito", sans-serif; font-size: 0.92rem;
  background: var(--wit); color: var(--tekst); outline: none;
}
.chat-invoer input:focus { border-color: var(--koraal); }
.link.rood { color: var(--framboos); }

/* ---- gedeelde interesses in het gesprek ---- */
.gedeeld {
  margin-top: 14px; text-align: left;
  background: var(--creme-donker); border-radius: 12px; padding: 10px 12px;
}
.gedeeld-titel {
  font-size: 0.76rem; font-weight: 800; color: var(--tekst-zacht); margin: 0 0 7px;
}
.gedeeld-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.gedeeld-chips .tag {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.75rem; font-weight: 600; color: var(--koraal);
  background: rgba(255, 107, 90, 0.1); border-radius: 999px; padding: 3px 10px;
}
.gedeeld-chips .tag svg { width: 13px; height: 13px; }
@keyframes chip-puls {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.14); }
}
.gedeeld-chips .tag.puls { animation: chip-puls 0.45s ease 2; background: rgba(255, 107, 90, 0.22); }
.taste-mark {
  background: rgba(255, 107, 90, 0.16); border-radius: 4px;
  padding: 0 3px; font-weight: 700;
}
.bericht.mij .taste-mark { background: rgba(255, 255, 255, 0.28); color: inherit; }

/* ---- smaak-kaarten (profiel) ---- */
.smaak-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 480px) { .smaak-grid { grid-template-columns: 1fr; } }
.smaak-kaart {
  border: 1.5px solid var(--rand); border-radius: 12px; padding: 10px 12px;
  cursor: pointer; user-select: none; background: var(--creme-donker);
  transition: border-color 0.14s ease, background 0.14s ease;
}
.smaak-kaart:hover { border-color: var(--koraal); }
.smaak-kaart.aan { background: rgba(255, 107, 90, 0.08); border-color: var(--koraal); }
.smaak-kop { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; }
.smaak-kop .icoon { display: inline-flex; color: var(--tekst-zacht); transition: color 0.14s ease, transform 0.18s ease; }
.smaak-kaart.aan .smaak-kop .icoon { color: var(--koraal); transform: scale(1.12); }
.smaak-fruit {
  margin-left: auto; font-size: 0.72rem; font-weight: 600;
  color: var(--tekst-zacht); opacity: 0.75; font-style: italic;
}
.smaak-desc { font-size: 0.78rem; color: var(--tekst-zacht); margin: 4px 0 0; line-height: 1.4; }
.smaak-schuiven { margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.gevoel-rij { display: flex; flex-direction: column; gap: 5px; }
.gevoel-kop {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.75rem; font-weight: 700; color: var(--tekst-zacht);
}
.gevoel-kop svg { width: 14px; height: 14px; color: var(--koraal); }
.gevoel-keuzes { display: flex; flex-wrap: wrap; gap: 4px; }
.gevoel-chip {
  font-family: inherit; font-size: 0.72rem; font-weight: 600;
  padding: 3px 10px; border-radius: 999px; cursor: pointer;
  background: var(--wit); border: 1px solid var(--rand); color: var(--tekst-zacht);
  transition: all 0.12s ease;
}
.gevoel-chip:hover { border-color: var(--koraal); color: var(--koraal); }
.gevoel-chip.aan { background: var(--koraal); border-color: var(--koraal); color: var(--wit); }
.gevoel-keuzes.spanning .gevoel-chip:hover { border-color: var(--framboos); color: var(--framboos); }
.gevoel-keuzes.spanning .gevoel-chip.aan {
  background: var(--framboos); border-color: var(--framboos); color: var(--wit);
}
.gevoel-onder { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.gevoel-keuzes.leren .gevoel-chip:hover { border-color: var(--groen, #3D9970); color: var(--groen, #3D9970); }
.gevoel-keuzes.leren .gevoel-chip.aan {
  background: var(--groen, #3D9970); border-color: var(--groen, #3D9970); color: var(--wit);
}
.gevoel-keuzes.skill .gevoel-chip.aan {
  background: var(--mango); border-color: var(--mango); color: var(--wit);
}
.skill-rij { margin-top: 2px; }

/* ---- rooms en corners ---- */
.rooms-uitleg { color: var(--tekst-zacht); font-size: 0.86rem; margin: -8px 0 16px; }
/* ---- plattegrond: je loopt zelf door de room ---- */
/* De room mag het hele scherm hebben; het menu klapt in tot een labeltje. */
/* De room vult het venster: geen kolom, geen marge, alleen de ruimte. */
.kolom-wrap.vol { max-width: none; height: 100dvh; padding: 0; position: relative; overflow: hidden; }
.topbar.ingeklapt { display: block; position: absolute; z-index: 9; top: 14px; left: 16px; padding: 0; }
.topbar.ingeklapt > summary {
  cursor: pointer; list-style: none; width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  color: var(--tekst-zacht); background: var(--wit); border: 1.5px solid var(--rand);
  border-radius: 50%;
}
.topbar.ingeklapt > summary::-webkit-details-marker { display: none; }
.topbar.ingeklapt > summary:hover { border-color: var(--koraal); color: var(--koraal); }
.topbar.ingeklapt[open] > summary { border-color: var(--koraal); color: var(--koraal); }
.topbar.ingeklapt .merk { display: none; }
/* Uitgeklapt hangt het menu als paneel onder de knop, over de ruimte heen. */
.topbar.ingeklapt .nav {
  position: absolute; top: 46px; left: 0; min-width: 190px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 8px; border-radius: 14px;
  background: var(--wit); border: 1.5px solid var(--rand);
  box-shadow: 0 8px 24px rgba(45, 31, 26, 0.14);
}
.topbar.ingeklapt .nav a { width: 100%; }

/* De ruimte is de pagina: de plattegrond vult het venster, de rest zweeft. */
.room-vol {
  position: relative; overflow: hidden; height: 100dvh;
  background: var(--creme-donker);
  /* De vloer loopt door tot in elke hoek van het scherm. */
  background-image: radial-gradient(circle, rgba(122, 90, 74, 0.13) 1.1px, transparent 1.1px);
  background-size: 34px 34px;
}
.room-kop {
  position: absolute; z-index: 6; top: 20px; left: 68px;
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.4rem;
}
/* Klein regeltje onder de roomnaam; het hoeft maar één keer gelezen te worden. */
.plattegrond-hint {
  position: absolute; z-index: 6; left: 68px; top: 52px; margin: 0;
  font-size: 0.75rem; color: var(--tekst-zacht); opacity: 0.8; max-width: 60%;
}
/* Het beeld is het hele venster; de ruimte zelf is groter en schuift eronder
   door. Zo kun je alle kanten op lopen zonder tegen een lege rand te kijken. */
.plattegrond { position: absolute; inset: 0; overflow: hidden; cursor: crosshair; }
/* De wereld schuift en schaalt binnen de plattegrond; hij volgt waar jij loopt. */
.wereld {
  /* Vierkant, zodat de aura's rond blijven, en ruimer dan het venster. Maat en
     stand komen per frame uit rooms/beweging.ts. */
  position: absolute; top: 0; left: 0;
  width: 125vmax; height: 125vmax;
  /* Stand en schaal komen per frame uit de tekenlus, dus geen overgang hier. */
  transition: none;
}
.zoom-knoppen {
  position: absolute; z-index: 2; right: 10px; top: 10px; display: flex; gap: 6px;
}
/* Ingedrukt houden geeft energie; met een toetsenbord doet E hetzelfde. */
.geef-knop {
  position: absolute; z-index: 8; left: 18px; bottom: 18px;
  padding: 12px 24px; border-radius: 999px; cursor: pointer;
  font-family: "Nunito", sans-serif; font-weight: 700; font-size: 0.9rem;
  color: var(--koraal); background: color-mix(in srgb, var(--wit) 88%, transparent);
  border: 1.5px solid var(--rand); backdrop-filter: blur(8px);
  touch-action: none; user-select: none;
}
.geef-knop:active { color: var(--wit); background: var(--koraal); border-color: var(--koraal); }
.zoom-knoppen button {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  background: var(--wit); border: 1.5px solid var(--rand); color: var(--tekst);
  font-family: "Baloo 2", sans-serif; font-size: 1rem; font-weight: 800; line-height: 1;
}
.zoom-knoppen button:hover { border-color: var(--koraal); color: var(--koraal); }
/* De aura-laag: alle vormen smelten aan elkaar. De blur maakt ze vaag, het
   contrast snijdt er weer een strakke rand uit. Vormen die dicht bij elkaar
   komen vloeien daardoor samen tot één groepsaura. */
.aura-laag { position: absolute; inset: 0; filter: url(#samensmelten); }
/* De shader tekent hier de aura's, banden en vonken van de room. */
.aura-doek { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.filter-houder { position: absolute; width: 0; height: 0; }
.plek-blob, .mens-blob {
  position: absolute; display: block; pointer-events: none;
  background: var(--aura, #F3E3D6);
}
.plek-blob {
  /* --groei komt van hoeveel mensen er staan, --nabij van hoe dicht jij bent. */
  transform: translate(-50%, -50%) scale(calc(var(--groei, 1) + var(--nabij, 0) * 0.06));
  border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%;
  animation: ademen 11s ease-in-out infinite;
  transition: transform 0.5s ease;
}
/* Een mens is een kleine bol; loopt hij een plek in, dan wordt hij er deel van.
   Overlappende aura's mengen hun kleur in plaats van elkaar te bedekken. */
.mens-blob {
  width: 5.5%; height: 5.5%; border-radius: 50%;
  transform: translate(-50%, -50%);
}
/* De band tussen twee mensen die elkaar raken: een staaf van de een naar de
   ander in hun gemengde kleur, zodat de twee aura's één vorm worden in plaats
   van twee bollen met een knoop ertussen. Stand en maat komen uit de tekenlus. */
.band-blob { position: absolute; display: none; border-radius: 999px; }
/* Vonken van een geknapte band. Ze liggen boven de smeltlaag, want ze horen
   juist los te spatten in plaats van mee te vloeien. */
.vonken { position: absolute; inset: 0; pointer-events: none; }
.vonk {
  position: absolute; display: none; width: 0.5%; height: 0.5%;
  border-radius: 50%; background: var(--koraal);
  box-shadow: 0 0 6px rgba(255, 107, 90, 0.6);
}
/* Elke plek ademt zoals hij is. Traag en rond waar het stil hoort te zijn,
   grillig waar het speels is, en met een hartslag waar het om twee mensen gaat. */
@keyframes ademen {
  0%, 100% { border-radius: 46% 54% 52% 48% / 50% 46% 54% 50%; }
  33%      { border-radius: 54% 46% 44% 56% / 44% 56% 44% 56%; }
  66%      { border-radius: 50% 50% 58% 42% / 56% 44% 56% 44%; }
}
@keyframes ademen-rustig {
  0%, 100% { border-radius: 50%; }
  50%      { border-radius: 48% 52% 51% 49% / 52% 48% 52% 48%; }
}
@keyframes ademen-speels {
  0%, 100% { border-radius: 62% 38% 46% 54% / 38% 62% 38% 62%; }
  25%      { border-radius: 40% 60% 63% 37% / 58% 34% 66% 42%; }
  50%      { border-radius: 55% 45% 35% 65% / 65% 55% 45% 35%; }
  75%      { border-radius: 36% 64% 58% 42% / 42% 66% 34% 58%; }
}
@keyframes ademen-hart {
  0%, 100% { border-radius: 48% 52% 50% 50%; }
  8%       { border-radius: 44% 56% 54% 46% / 46% 54% 46% 54%; }
  16%      { border-radius: 50% 50% 48% 52% / 52% 48% 52% 48%; }
}
.plek-blob[data-element="lucht"],
.plek-blob[data-element="aarde"] { animation: ademen-rustig 16s ease-in-out infinite; }
.plek-blob[data-element="bloesem"],
.plek-blob[data-element="licht"] { animation: ademen-speels 9s ease-in-out infinite; }
.plek-blob[data-element="vuur"],
.plek-blob[data-element="water"] { animation: ademen-hart 7s ease-in-out infinite; }
.plek-blob[data-element="hout"] { animation: ademen 13s ease-in-out infinite; }
/* De plekken aarden in een element; dat bepaalt hun kleur. Wie er staat krijgt
   dezelfde kleur, zodat je van een afstand ziet bij welke groep iemand hoort. */
.plek-blob[data-element="vuur"],    .mens-blob[data-element="vuur"]    { --aura: #FFC3A8; }
.plek-blob[data-element="water"],   .mens-blob[data-element="water"]   { --aura: #B7D6F2; }
.plek-blob[data-element="aarde"],   .mens-blob[data-element="aarde"]   { --aura: #DCC5A6; }
.plek-blob[data-element="lucht"],   .mens-blob[data-element="lucht"]   { --aura: #DFEBF3; }
.plek-blob[data-element="hout"],    .mens-blob[data-element="hout"]    { --aura: #C7DCBA; }
.plek-blob[data-element="licht"],   .mens-blob[data-element="licht"]   { --aura: #FAE3AE; }
.plek-blob[data-element="bloesem"], .mens-blob[data-element="bloesem"] { --aura: #F2CEE1; }
@media (prefers-reduced-motion: reduce) { .plek-blob { animation: none; } }

/* De knop met de naam ligt over de vorm heen, buiten de filter. */
.plek-knop {
  position: absolute; transform: translate(-50%, -50%);
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: 2px; text-align: center; padding: 13% 6px 6px;
  font: inherit; color: inherit; border: none; background: none; cursor: pointer;
  border-radius: 50%;
}
.plek-badge { font-size: 0.62rem; font-weight: 700; color: var(--tekst-zacht); }
.loper {
  position: absolute; transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  /* Geen overgang: de tekenlus schuift iedereen zelf vloeiend naar zijn plek. */
  transition: none;
}
.loper .avatar { width: 34px; height: 34px; font-size: 0.9rem; }
/* Met camera aan is je bolletje je gezicht: dezelfde plek als de avatar, alleen
   dan live. Het beeld staat ingezoomd op het midden-boven, want daar zit een
   gezicht meestal; zo zie je een hoofd en niet je hele kamer.
   ponytail: vaste uitsnede, geen gezichtsdetectie. Die pas als het echt scheef zit. */
.bol {
  position: relative; display: block; width: 54px; height: 54px;
  border-radius: 50%; overflow: hidden;
  background: var(--creme-donker); box-shadow: 0 0 0 2px var(--wit);
}
/* Stand en schaal komen uit rooms/gezicht.ts: die houdt het hoofd in het midden
   en spiegelt je eigen beeld. */
/* Hoogte en stand komen uit rooms/gezicht.ts: die zoomt op je hoofd in door het
   beeld groter te renderen, zodat de bol een scherpe uitsnede toont. */
.loper-video { position: absolute; left: 50%; top: 50%; max-width: none; display: block; }
.loper.ik .bol { box-shadow: 0 0 0 3px var(--koraal); }
/* Zonder beeld staat de avatar in de bol; die vult hem netjes. */
.bol .avatar { width: 100%; height: 100%; }
/* Alleen geluid: het element blijft spelen, maar je ziet de avatar. */
.loper video.stil { width: 0; height: 0; position: absolute; }
.loper-media { margin-left: 4px; color: var(--koraal); }
.media-knoppen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.media-uitleg { font-size: 0.75rem; color: var(--tekst-zacht); }
.loper.ik .avatar { box-shadow: 0 0 0 3px var(--koraal); }
.loper-naam {
  font-size: 0.65rem; font-weight: 700; white-space: nowrap;
  background: var(--wit); border-radius: 999px; padding: 0 6px;
}
@media (prefers-reduced-motion: reduce) { .loper { transition: none; } }
.corner-leeg { font-size: 0.75rem; color: var(--tekst-zacht); opacity: 0.7; }
.mini .avatar { width: 30px; height: 30px; font-size: 0.85rem; }

/* Het paneel ligt als een glasplaat over de ruimte, rechtsonder. */
.plek {
  position: absolute; z-index: 7; right: 14px; bottom: 14px;
  width: min(340px, calc(100% - 28px)); max-height: calc(100% - 28px);
  display: flex; flex-direction: column; overflow: auto;
  padding: 14px 16px; border-radius: 14px;
  background: color-mix(in srgb, var(--wit) 88%, transparent);
  backdrop-filter: blur(10px);
  border: 1.5px solid var(--rand);
  box-shadow: 0 8px 28px rgba(45, 31, 26, 0.14);
}
.plek.dicht { width: auto; max-width: calc(100% - 28px); padding: 8px 12px; }
/* Op een telefoon pakt het paneel de volle breedte en blijft de ruimte erboven
   vrij om te lopen. */
@media (max-width: 620px) {
  .plek { left: 12px; right: 12px; width: auto; max-height: 52%; }
  .plek.dicht { left: auto; }
  .geef-knop { bottom: calc(52% + 24px); }
  .plattegrond-hint { max-width: calc(100% - 84px); }
}
.plek-vouw {
  width: 26px; height: 26px; flex: none; cursor: pointer;
  background: none; border: 1.5px solid var(--rand); border-radius: 50%;
  font-family: "Baloo 2", sans-serif; font-weight: 800; color: var(--tekst-zacht);
  line-height: 1;
}
.plek-vouw:hover { border-color: var(--koraal); color: var(--koraal); }
.plek .berichten.kort { height: 180px; }
.plek-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.plek-kop h3 { font-family: "Baloo 2", sans-serif; margin: 0; }
.plek-desc { font-size: 0.82rem; color: var(--tekst-zacht); margin: 2px 0 0; }
.plek-rechts { display: flex; align-items: center; gap: 8px; flex: none; }
.plek-hint {
  font-size: 0.8rem; color: var(--tekst-zacht); background: var(--creme-donker);
  border-radius: 10px; padding: 8px 12px; margin: 10px 0 0;
}
.timer {
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 1.15rem;
  color: var(--koraal);
}
.timer.om { color: var(--tekst-zacht); font-size: 0.9rem; }
.knop.klein { padding: 5px 12px; font-size: 0.8rem; }
.aanwezig { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 4px; }
.aanwezig-persoon {
  display: flex; align-items: center; gap: 8px; font-size: 0.85rem; font-weight: 600;
  background: var(--wit); border: 1.5px solid var(--rand); border-radius: 999px;
  padding: 4px 8px 4px 4px;
}
.berichten.kort { height: 260px; }
.bericht .afzender {
  display: block; font-size: 0.7rem; font-weight: 800; color: var(--tekst-zacht);
  margin-bottom: 2px;
}
.notitie {
  width: 100%; border: 1.5px solid var(--rand); border-radius: 12px; padding: 12px 14px;
  font-family: "Nunito", sans-serif; font-size: 0.92rem; line-height: 1.5;
  background: var(--creme-donker); color: var(--tekst); outline: none; resize: vertical;
}
.notitie:focus { border-color: var(--koraal); background: var(--wit); }

/* ---- match-badge (ontdekken) ---- */
.match-badge {
  display: inline-block; font-family: "Baloo 2", sans-serif; font-weight: 800;
  font-size: 0.8rem; color: var(--koraal); background: rgba(255, 107, 90, 0.12);
  border-radius: 999px; padding: 2px 10px; margin-left: 8px; vertical-align: 2px;
}

.hint { color: var(--tekst-zacht); font-size: 0.9rem; margin: -6px 0 14px; }

/* ---- afspraken van een room ---- */
.regel-chips { display: inline-flex; gap: 6px; flex-wrap: wrap; vertical-align: middle; }
.regel-chip {
  font-family: "Nunito", sans-serif; font-size: 0.68rem; font-weight: 700;
  color: var(--tekst-zacht); background: var(--creme-donker);
  border: 1px solid var(--rand); border-radius: 999px; padding: 2px 9px;
}
.rooms-regels { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.regel-knop {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  font-family: "Nunito", sans-serif; font-size: 0.82rem; font-weight: 600;
  color: var(--tekst-zacht); background: var(--creme-donker);
  border: 1.5px solid var(--rand); border-radius: 999px; padding: 6px 14px 6px 11px;
  transition: color 0.14s ease, background 0.14s ease, border-color 0.14s ease;
}
.regel-knop .icoon { display: inline-flex; opacity: 0.75; }
.regel-knop:hover { border-color: var(--koraal); }
.regel-knop.aan {
  color: var(--koraal); background: rgba(255, 107, 90, 0.12); border-color: var(--koraal);
}
.regel-knop.aan .icoon { opacity: 1; }
.regel-vorm {
  display: inline-flex; align-items: center; gap: 7px; cursor: pointer;
  color: var(--tekst-zacht); background: var(--creme-donker);
  border: 1.5px solid var(--rand); border-radius: 999px; padding: 4px 8px 4px 11px;
}
.regel-vorm select {
  font-family: "Nunito", sans-serif; font-size: 0.82rem; font-weight: 600;
  color: var(--tekst); background: none; border: none; outline: none; cursor: pointer;
}
.drempel { text-align: left; }
.drempel h3 { font-family: "Baloo 2", sans-serif; margin: 8px 0 6px; }
.drempel p { font-size: 0.9rem; color: var(--tekst-zacht); line-height: 1.5; margin: 0 0 16px; }

/* ---- de roomnaam is ook de deur naar de andere rooms ---- */
.room-wissel { position: relative; display: inline-block; vertical-align: middle; }
.room-naam {
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: inherit;
  color: inherit; background: none; border: none; cursor: pointer;
  padding: 2px 6px 2px 0; display: inline-flex; align-items: baseline; gap: 8px;
}
.room-naam:hover { color: var(--koraal); }
.room-naam-pijl { font-size: 0.6em; color: var(--tekst-zacht); }
.room-sluiter { position: fixed; inset: 0; z-index: 20; }
.room-lijst {
  position: absolute; z-index: 21; top: 100%; left: 0; min-width: 260px;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--wit); border: 1.5px solid var(--rand); border-radius: 14px;
  box-shadow: 0 8px 24px rgba(45, 31, 26, 0.14);
}
.room-lijst-rij {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; cursor: pointer; font: inherit; font-size: 0.9rem;
  background: none; border: none; border-radius: 10px; padding: 8px 10px;
}
.room-lijst-rij:hover { background: var(--creme-donker); }
.room-lijst-rij.uit {
  font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 0.85rem;
  color: var(--koraal); border-bottom: 1.5px solid var(--rand); border-radius: 10px 10px 0 0;
}
.room-lijst-naam { font-family: "Nunito", sans-serif; font-weight: 700; }
.room-lijst-aantal { font-size: 0.75rem; color: var(--tekst-zacht); font-weight: 600; }
.room-lijst-aantal.bezet { color: var(--koraal); }
.room-lijst-leeg { font-size: 0.8rem; color: var(--tekst-zacht); padding: 8px 10px; }