/* =====================================================================
   RONDJE - ALLE OPMAAK VAN DE APP (index.html)
   Samengevoegd uit styles.css (basis) en beta.css (alles daarna), in
   dezelfde volgorde, zodat de app er precies hetzelfde uitziet.
   Lettertypes staan apart in fonts.css (ook gebruikt door admin en club).

   AANPASSEN: kleuren, lettertypes en afstanden staan als variabelen in
   :root, direct hieronder. Verander je daar een kleur, dan verandert hij
   overal.
   ===================================================================== */

/* =====================================================================
   1. BASIS (was styles.css)
   ===================================================================== */
:root {
  --green-950: #0c2f25;
  --green-900: #123f32;
  --green-800: #18513f;
  --green-700: #246c53;
  --green-100: #dcebe3;
  --lime: #d8f35d;
  --lime-dark: #b9d43c;
  --cream: #f4f2e9;
  --white: #fff;
  --ink: #17231d;
  --muted: #66736c;
  --line: #dfe5df;
  --sand: #e8dfc8;
  --orange: #f08c4f;
  --shadow: 0 16px 40px rgba(25, 44, 34, .09);
  --radius: 22px
}

* {
  box-sizing: border-box
}

html {
  scroll-behavior: smooth
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  line-height: 1.45
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden
}

button,
input,
select,
textarea {
  font: inherit
}

button {
  color: inherit
}

.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 250px minmax(0, 700px) 310px;
  justify-content: center;
  gap: 26px;
  padding: 24px
}

.sidebar,
.rightbar {
  position: sticky;
  top: 24px;
  height: calc(100vh - 48px)
}

.sidebar {
  display: flex;
  flex-direction: column;
  padding: 26px 20px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 26px;
  background: var(--green-900);
  color: white;
  box-shadow: 0 18px 50px rgba(12, 47, 37, .18)
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-size: 1.55rem;
  font-weight: 850;
  letter-spacing: -.05em
}

.primary-nav {
  display: grid;
  gap: 7px;
  margin: 44px 0 22px
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 12px 13px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: #c4d6ce;
  text-align: left;
  cursor: pointer;
  font-weight: 700
}

.nav-item svg,
.mobile-nav svg,
.icon-button svg,
.share-round svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}

.nav-item:hover,
.nav-item.active {
  background: rgba(255, 255, 255, .1);
  color: white
}

.nav-item.active svg {
  color: var(--lime)
}

.nav-item b {
  margin-left: auto;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  border-radius: 11px;
  background: var(--lime);
  color: var(--green-950);
  font-size: .72rem
}

.primary {
  border: 0;
  border-radius: 13px;
  background: var(--lime);
  color: var(--green-950);
  font-weight: 850;
  cursor: pointer;
  box-shadow: 0 7px 16px rgba(216, 243, 93, .12)
}

.primary:hover {
  background: var(--lime-dark)
}

.share-round {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 13px
}

.sidebar-card {
  margin-top: auto;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, .11);
  border-radius: 17px;
  background: rgba(255, 255, 255, .07)
}

.mini-label,
.eyebrow {
  font-size: .7rem;
  font-weight: 850;
  letter-spacing: .11em;
  text-transform: uppercase
}

.sidebar-card .mini-label {
  color: var(--lime)
}

.sidebar-card strong,
.sidebar-card>span {
  display: block
}

.sidebar-card strong {
  margin-top: 7px
}

.sidebar-card>span {
  margin-top: 3px;
  color: #adc6bb;
  font-size: .78rem
}

.avatar {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #e2e7e3;
  color: var(--green-950);
  font-size: .72rem;
  font-weight: 850
}

.avatar.a1 {
  background: linear-gradient(145deg, #d8f35d, #90bf47)
}

.avatar.add {
  background: #315e4d;
  color: white
}

.profile-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  padding: 9px 0 0;
  border: 0;
  border-top: 1px solid rgba(255, 255, 255, .1);
  background: transparent;
  color: white;
  text-align: left;
  cursor: pointer
}

.profile-mini span:nth-child(2) {
  display: grid
}

.profile-mini strong {
  font-size: .83rem
}

.profile-mini small {
  color: #9ab6aa
}

.profile-mini svg {
  margin-left: auto;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #91aa9f;
  stroke-width: 2
}

.main-column {
  min-width: 0
}

.mobile-header,
.mobile-nav {
  display: none
}

.view {
  display: none
}

.view.active {
  display: block;
  animation: fade .25s ease
}

@keyframes fade {
  from {
    opacity: .4;
    transform: translateY(5px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

.page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 9px 0 22px
}

.eyebrow {
  color: var(--green-700)
}

h1,
h2,
h3,
p {
  margin-top: 0
}

.page-head h1 {
  margin: 4px 0 0;
  font-size: 2.1rem;
  line-height: 1.05;
  letter-spacing: -.04em
}

.icon-button {
  position: relative;
  display: grid;
  place-items: center;
  width: 43px;
  height: 43px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: white;
  cursor: pointer
}

.icon-button i {
  position: absolute;
  right: 5px;
  top: 3px;
  width: 8px;
  height: 8px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  background: var(--orange)
}

.stories {
  display: flex;
  gap: 17px;
  margin: 22px 0;
  overflow-x: auto;
  scrollbar-width: none
}

.stories::-webkit-scrollbar {
  display: none
}

.story {
  min-width: 58px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer
}

.story-ring {
  position: relative;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 3px;
  border: 2px solid var(--green-700);
  border-radius: 50%
}

.story-ring .avatar {
  width: 48px;
  height: 48px
}

.story-ring.quiet {
  border-color: #c9d1cc
}

.story-ring b {
  position: absolute;
  right: -2px;
  bottom: 0;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 2px solid var(--cream);
  border-radius: 50%;
  background: var(--green-900);
  color: white
}

.story small {
  display: block;
  margin-top: 6px;
  max-width: 58px;
  overflow: hidden;
  text-overflow: ellipsis
}

.feed-list {
  display: grid;
  gap: 17px
}

.post {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: white;
  box-shadow: 0 8px 30px rgba(34, 50, 41, .055)
}

.post-head {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px 18px
}

.post-head>div {
  display: grid
}

.post-head strong {
  font-size: .9rem
}

.post-head small {
  color: var(--muted)
}

.post-head .more {
  margin-left: auto;
  border: 0;
  background: transparent;
  font-size: 1.2rem;
  cursor: pointer
}

.post-body {
  padding: 18px
}

.mood-badge {
  font-size: 1.55rem
}

.caption {
  margin: 0 0 15px;
  font-size: .9rem
}

.post-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  padding-top: 12px;
  border-top: 1px solid #edf0ed
}

.post-actions button {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  cursor: pointer;
  color: var(--muted);
  font-size: .76rem;
  font-weight: 700
}

.post-actions button:hover {
  background: #f1f4f1;
  color: var(--ink)
}

.post-actions button.liked {
  color: #d24f59
}

.post-actions button.liked svg {
  fill: #d24f59
}

.post-actions svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8
}

.post-actions .share {
  margin-left: auto
}

.rightbar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: auto;
  scrollbar-width: none
}

.right-section {
  padding: 19px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: white
}

.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between
}

.section-head h2,
.right-section>h2 {
  margin: 0;
  font-size: 1rem
}

.section-head button {
  border: 0;
  background: transparent;
  color: var(--green-700);
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer
}

.play-cards {
  display: grid;
  gap: 10px;
  margin-top: 14px
}

.play-cards article {
  display: flex;
  align-items: center;
  gap: 9px
}

.play-cards article div {
  display: grid
}

.play-cards strong {
  font-size: .8rem
}

.play-cards small {
  color: var(--muted);
  font-size: .7rem
}

.play-cards button {
  display: grid;
  place-items: center;
  width: 31px;
  height: 31px;
  margin-left: auto;
  border: 0;
  border-radius: 50%;
  background: var(--green-100);
  color: var(--green-800);
  cursor: pointer
}

.play-cards svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2
}

.secondary {
  padding: 9px 13px;
  border: 1px solid #bfd0c6;
  border-radius: 10px;
  background: white;
  color: var(--green-800);
  font-weight: 800;
  cursor: pointer
}

.secondary:hover {
  background: var(--green-100)
}

.secondary.wide {
  width: 100%;
  border: 0
}

.prototype-note {
  margin: auto 0 0;
  text-align: center;
  color: #8a958f
}

.search-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 15px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: white
}

.search-box svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: var(--muted);
  stroke-width: 1.7
}

.search-box input {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent
}

.tag {
  display: inline-block;
  padding: 5px 8px;
  border-radius: 999px;
  background: var(--green-100);
  color: var(--green-700);
  font-size: .68rem;
  font-weight: 850
}

.tag.light {
  background: rgba(255, 255, 255, .16);
  color: white
}

.section-title {
  margin: 28px 0 13px;
  font-size: 1.1rem
}

.compact {
  padding: 9px 13px
}

.light-button {
  padding: 11px 16px;
  border: 0;
  border-radius: 11px;
  background: var(--lime);
  color: var(--green-950);
  font-weight: 850;
  cursor: pointer
}

.light-button.active {
  background: white
}

.friend-list {
  display: grid;
  gap: 10px
}

.friend-list article {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: white
}

.friend-list article div {
  display: grid
}

.friend-list strong {
  font-size: .86rem
}

.friend-list small {
  color: var(--muted)
}

.friend-list button {
  margin-left: auto;
  padding: 8px 11px;
  border: 0;
  border-radius: 9px;
  background: var(--green-100);
  color: var(--green-800);
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer
}

.profile-hero {
  padding: 27px;
  border-radius: 24px;
  background: var(--green-900);
  color: white
}

.profile-top {
  display: flex;
  align-items: center;
  gap: 16px
}

.avatar.large {
  width: 75px;
  height: 75px;
  font-size: 1rem
}

.profile-top .eyebrow {
  color: var(--lime)
}

.profile-top h1 {
  margin: 4px 0 2px;
  font-size: 1.8rem
}

.profile-top p {
  margin: 0;
  color: #b6ccc1
}

.stat-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 25px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .13)
}

.stat-strip div {
  display: grid;
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, .11)
}

.stat-strip div:last-child {
  border: 0
}

.stat-strip strong {
  font-size: 1.15rem
}

.stat-strip span {
  color: #a9c1b5;
  font-size: .7rem
}

.wrapped-card {
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  margin-top: 16px;
  padding: 17px;
  border: 0;
  border-radius: 18px;
  background: linear-gradient(120deg, #d8f35d, #7fbf58);
  color: var(--green-950);
  text-align: left;
  cursor: pointer
}

.wrapped-card>span {
  display: grid;
  place-items: center;
  width: 63px;
  height: 63px;
  border-radius: 14px;
  background: var(--green-900);
  color: white
}

.wrapped-card>span b {
  font-size: .68rem;
  letter-spacing: .12em
}

.wrapped-card>span small {
  color: var(--lime)
}

.wrapped-card>div {
  display: grid
}

.wrapped-card>div small {
  opacity: .75
}

.wrapped-card svg {
  margin-left: auto;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2
}

.modal {
  width: min(560px, calc(100% - 24px));
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: white;
  box-shadow: 0 25px 80px rgba(0, 0, 0, .28)
}

.modal::backdrop {
  background: rgba(8, 29, 23, .64);
  backdrop-filter: blur(4px)
}

.modal form {
  padding: 25px
}

.modal-head {
  display: flex;
  align-items: start;
  justify-content: space-between
}

.modal-head h2 {
  margin: 3px 0 0;
  font-size: 1.7rem
}

.modal label {
  display: grid;
  gap: 6px;
  margin: 13px 0;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 750
}

.modal input,
.modal select,
.modal textarea {
  width: 100%;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fafbf9;
  color: var(--ink);
  outline: 0
}

.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px rgba(36, 108, 83, .1)
}

.modal textarea {
  min-height: 85px;
  resize: vertical
}

.form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px
}

.form-row:has(label:nth-child(2):last-child) {
  grid-template-columns: 1fr 1fr
}

.mood-row {
  display: flex;
  gap: 6px;
  overflow-x: auto
}

.mood {
  white-space: nowrap;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: white;
  cursor: pointer;
  font-size: .72rem
}

.mood.active {
  border-color: var(--green-700);
  background: var(--green-100);
  color: var(--green-800)
}

.submit-round {
  width: 100%;
  margin-top: 18px;
  padding: 13px
}

.toast {
  position: fixed;
  z-index: 100;
  left: 50%;
  bottom: 25px;
  max-width: calc(100% - 30px);
  padding: 11px 16px;
  border-radius: 12px;
  background: var(--green-950);
  color: white;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, 20px);
  pointer-events: none;
  transition: .25s
}

.toast.show {
  opacity: 1;
  transform: translate(-50%, 0)
}

@media(max-width:1180px) {
  .app-shell {
    grid-template-columns: 220px minmax(0, 700px)
  }

  .rightbar {
    display: none
  }
}

@media(max-width:820px) {
  body {
    background: #f6f5ef
  }

  .app-shell {
    display: block;
    padding: 0 0 84px
  }

  .sidebar {
    display: none
  }

  .main-column {
    max-width: 700px;
    margin: auto;
    padding: 0 15px
  }

  .mobile-header {
    position: sticky;
    z-index: 20;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 -15px 13px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line);
    background: rgba(246, 245, 239, .9);
    backdrop-filter: blur(14px)
  }

  .mobile-header .brand {
    font-size: 1.35rem
  }

  .mobile-nav {
    position: fixed;
    z-index: 30;
    left: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: end;
    padding: 8px max(8px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    border-top: 1px solid var(--line);
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(16px)
  }

  .mobile-nav button {
    display: grid;
    justify-items: center;
    gap: 2px;
    padding: 4px;
    border: 0;
    background: transparent;
    color: #7c8882;
    cursor: pointer;
    font-size: .59rem
  }

  .mobile-nav button.active {
    color: var(--green-800)
  }

  .mobile-nav svg {
    width: 20px;
    height: 20px
  }

  .mobile-nav .mobile-create {
    align-self: center;
    width: 48px;
    height: 48px;
    margin: -23px auto 0;
    border: 5px solid var(--cream);
    border-radius: 50%;
    background: var(--green-900);
    color: var(--lime)
  }

  .mobile-nav .mobile-create svg {
    width: 23px;
    height: 23px
  }

  .page-head {
    margin-top: 18px
  }

  .page-head h1 {
    font-size: 1.7rem
  }

  .stories {
    margin: 17px -2px
  }

  .post {
    border-radius: 19px
  }

  .post-head {
    padding: 14px
  }

  .post-body {
    padding: 15px
  }

  .rightbar {
    display: none
  }

  .profile-hero {
    padding: 21px
  }

  .stat-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: 17px
  }

  .stat-strip div:nth-child(2) {
    border: 0
  }

  .form-row {
    grid-template-columns: 1fr 1fr
  }

  .form-row label:last-child:nth-child(3) {
    grid-column: 1/-1
  }

  .toast {
    bottom: 88px
  }
}

@media(max-width:430px) {
  .story {
    min-width: 54px
  }

  .story-ring {
    width: 54px;
    height: 54px
  }

  .story-ring .avatar {
    width: 44px;
    height: 44px
  }

  .post-actions button {
    padding: 7px 6px
  }

  .profile-top h1 {
    font-size: 1.5rem
  }

  .stat-strip strong {
    font-size: 1rem
  }
}

/* =====================================================================
   2. SCHERMEN EN ONDERDELEN (was beta.css)
   ===================================================================== */
/* =====================================================================
   RONDJE BETA - AANVULLENDE STIJLEN
   De basiskleuren staan bovenaan styles.css (:root). Hier alleen de
   onderdelen die nieuw zijn in de beta: inlogscherm, meldingen,
   lege feed en foto's bij rondes.
   ===================================================================== */

/* --- Algemeen ------------------------------------------------------- */
[hidden] { display: none !important; }

/* --- Inlogscherm ---------------------------------------------------- */
.auth-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 24px;
  background: var(--green-900);
}

.auth-card {
  width: min(440px, 100%);
  padding: 32px 28px;
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: 0 25px 80px rgba(0, 0, 0, .28);
}

.auth-brand { color: var(--green-900); margin-bottom: 22px; }
.auth-card h1 { margin: 0 0 8px; font-size: 1.8rem; letter-spacing: -.03em; }
.auth-intro { margin: 0 0 18px; color: var(--muted); }

.auth-card label,
.modal label {
  position: static;
  display: grid;
  gap: 6px;
  margin: 13px 0;
  padding: 0;
  background: none;
  color: var(--muted);
  font-size: .75rem;
  font-weight: 750;
  backdrop-filter: none;
}

.auth-card input {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fafbf9;
  color: var(--ink);
  font-size: 1rem;
}

.auth-button { width: 100%; padding: 13px; margin-top: 6px; font-size: 1rem; }
.auth-small { margin: 14px 0 0; color: var(--muted); font-size: .8rem; }

.auth-melding {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fdeee4;
  color: #8a3b10;
  font-size: .85rem;
}

.link-button {
  margin-top: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--green-700);
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
}

/* --- Meldingen in de app -------------------------------------------- */

.bron-melding {
  margin: 0 0 16px;
  padding: 10px 13px;
  border-radius: 12px;
  background: var(--green-100);
  color: var(--green-900);
  font-size: .85rem;
}

.bron-melding { background: #f3f1e7; color: var(--muted); }

/* --- Lege feed / laden ---------------------------------------------- */
.feed-status {
  padding: 28px 22px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--white);
  color: var(--muted);
  text-align: center;
}

.feed-status strong { display: block; color: var(--ink); font-size: 1.1rem; }
.feed-status p { margin: 6px 0 14px; }
.primary.compact { padding: 10px 16px; }

/* --- Foto bij ronde ------------------------------------------------- */




/* --- Zichtbaarheid-label op een ronde ------------------------------- */
.zicht-label { color: var(--muted); font-size: .75rem; }

/* --- Profiel -------------------------------------------------------- */
.profiel-acties { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; }
.wrapped-card[disabled] { opacity: .6; cursor: default; }
.feedback-intro { margin: 0 0 12px; color: var(--muted); font-size: .85rem; }

/* --- Bezig-status op knoppen ---------------------------------------- */
button[aria-busy="true"] { opacity: .6; pointer-events: none; }

/* --- Reacties ------------------------------------------------------- */
.reacties { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.reactie-lijst { display: grid; gap: 12px; margin-bottom: 12px; }
.reactie { display: flex; align-items: flex-start; gap: 10px; }
.avatar.klein { width: 30px; height: 30px; flex: 0 0 30px; font-size: .7rem; }
.reactie-inhoud { flex: 1; min-width: 0; padding: 8px 12px; border-radius: 14px; background: #f3f5f2; }
.reactie-inhoud strong { display: block; font-size: .8rem; }
.reactie-inhoud p { margin: 2px 0 0; font-size: .9rem; overflow-wrap: anywhere; }
.reactie-gif { display: block; max-width: min(220px, 100%); height: auto; margin-top: 6px; border-radius: 10px; }
.reactie-weg { border: 0; background: none; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
.reactie-leeg { margin: 0; color: var(--muted); font-size: .85rem; }
.reactie-invoer { display: flex; gap: 8px; }
.reactie-invoer input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fafbf9; }
.gif-knop { padding: 0 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); font-weight: 850; font-size: .75rem; cursor: pointer; }
.reactie-gif-keuze { position: relative; display: inline-block; margin-bottom: 8px; }
.reactie-gif-keuze img { display: block; max-height: 120px; border-radius: 10px; }
.reactie-gif-keuze button { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(0,0,0,.6); color: #fff; cursor: pointer; }

/* --- GIF-kiezer ----------------------------------------------------- */
.modal-inhoud { padding: 25px; }
.gif-zoek { display: flex; gap: 8px; margin: 14px 0; }
.gif-zoek input { flex: 1; min-width: 0; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; background: #fafbf9; }
.gif-resultaten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-height: 50vh; overflow-y: auto; }
.gif-optie { padding: 0; border: 0; border-radius: 8px; overflow: hidden; background: var(--green-100); cursor: pointer; aspect-ratio: 1; }
.gif-optie img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gif-bron { margin: 10px 0 0; color: var(--muted); font-size: .7rem; text-align: right; }

/* --- Logo (beeldmerk als afbeelding, sinds 15 okt 2026) -------------- */
.brand-logo { display: block; width: 34px; height: 34px; flex: 0 0 auto; }
.mobile-header .brand-logo { width: 30px; height: 30px; }
.auth-brand .brand-logo { width: 40px; height: 40px; }

/* --- Inloggen: Google, scheiding en extra links ----------------------- */
.auth-sociaal {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px; margin: 4px 0 0;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--white); color: var(--ink);
  font: inherit; font-weight: 700; cursor: pointer;
}
.auth-sociaal svg { width: 20px; height: 20px; }
.auth-of { display: flex; align-items: center; gap: 10px; margin: 16px 0 4px; color: var(--muted); font-size: .8rem; }
.auth-of::before, .auth-of::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-links { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.auth-step .link-button { display: block; }
.auth-links .link-button { display: inline; }

/* --- Vinkje in formulieren (bijv. nieuwsbrief) ----------------------- */
.modal label.vinkje-rij { display: flex; align-items: flex-start; gap: 10px; color: var(--ink); font-size: .85rem; font-weight: 500; }
.vinkje-rij input { width: 18px; height: 18px; margin: 1px 0 0; flex: 0 0 auto; accent-color: var(--green-700); }

/* =====================================================================
   PHOTO-FIRST FEED
   Groot beeld (4:5, zoals op je telefoon), daaronder acties en tekst.
   Rondes zonder foto krijgen een scorekaart als beeld.
   ===================================================================== */
.foto-first .post-head { padding: 12px 14px; }
.foto-first .post-head small { display: flex; align-items: center; gap: 3px; }
.foto-first .post-head small svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2; flex: 0 0 auto; }

.post-media {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--green-950);
  user-select: none;
  -webkit-user-select: none;
}
.post-media > img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Score als klein label op de foto */
.foto-score {
  position: absolute; left: 12px; bottom: 12px;
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 6px 12px; border-radius: 999px;
  background: rgba(12, 47, 37, .82); color: #fff;
  backdrop-filter: blur(8px);
}
.foto-score strong { font-family: var(--font-kop); font-weight: 900; font-size: 1.35rem; line-height: 1; }
.foto-score small { color: var(--lime); font-weight: 800; font-size: .8rem; }

/* Hartje bij dubbeltik */
.like-burst { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 0; }
.like-burst svg { width: 96px; height: 96px; fill: #fff; stroke: none; filter: drop-shadow(0 6px 18px rgba(0,0,0,.35)); }
.post-media.burst .like-burst { animation: burst .8s ease; }
@keyframes burst { 0% { opacity: 0; transform: scale(.4); } 15% { opacity: 1; transform: scale(1.1); } 30% { transform: scale(.95); } 70% { opacity: 1; } 100% { opacity: 0; transform: scale(1); } }

/* Scorekaart (ronde zonder foto) */
.scorekaart {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 26px 24px;
  background: radial-gradient(120% 70% at 85% 0%, #2a7a5d 0%, var(--green-900) 55%, var(--green-950) 100%);
  color: #fff; overflow: hidden;
}
.sk-merk { font-family: var(--font-kop); font-weight: 900; text-transform: uppercase; letter-spacing: .04em; color: var(--lime); font-size: 1rem; }
.sk-score { position: relative; z-index: 2; }
.sk-score strong { display: block; font-family: var(--font-kop); font-weight: 900; font-size: clamp(6rem, 30vw, 9.5rem); line-height: .85; letter-spacing: -.02em; }
.sk-score span { display: inline-block; margin-top: 10px; padding: 5px 11px; border-radius: 999px; background: var(--lime); color: var(--green-950); font-weight: 800; font-size: .85rem; }
.sk-baan { position: relative; z-index: 2; display: grid; gap: 2px; }
.sk-baan b { font-family: var(--font-kop); font-weight: 900; font-size: 1.6rem; line-height: 1.05; }
.sk-baan small { color: #c9dcd2; font-size: .85rem; }
.sk-gevoel { position: absolute; z-index: 2; top: 20px; right: 22px; font-size: 2.2rem; }
.sk-heuvel { position: absolute; left: -10%; right: -10%; bottom: -38%; height: 62%; border-radius: 50% 50% 0 0; background: #246c53; opacity: .55; }
.sk-vlag { position: absolute; right: 18%; bottom: 20%; width: 3px; height: 70px; background: #66736c; }
.sk-vlag::after { content: ""; position: absolute; left: 3px; top: 0; border-top: 11px solid transparent; border-bottom: 11px solid transparent; border-left: 26px solid #e03127; }

/* Acties en tekst onder het beeld */
.foto-first .post-body { padding: 10px 14px 14px; }
.foto-first .post-actions { padding: 0 0 6px; border-top: 0; }
.foto-first .post-actions .zicht-label { margin-left: auto; }
.foto-first .post-actions .mood-badge { font-size: 1.2rem; padding: 0 4px; }
.foto-first .caption { margin: 4px 0 6px; }
.ronde-feiten { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.ronde-feiten span { padding: 4px 9px; border-radius: 999px; background: #f1f4f1; color: var(--muted); font-size: .72rem; font-weight: 700; }

/* Mobiel: beeld van rand tot rand */
@media (max-width: 820px) {
  .feed-list { gap: 10px; margin: 0 -15px; }
  .foto-first { border-radius: 0; border-left: 0; border-right: 0; box-shadow: none; }
}

/* =====================================================================
   STORIES
   ===================================================================== */
.story-ring { border-color: var(--lime-dark); background: transparent; }
.story-ring:not(.quiet) { border: 0; padding: 3px; background: conic-gradient(var(--lime), #7fbf58, var(--green-700), var(--lime)); }
.story-ring:not(.quiet) .avatar { border: 2px solid var(--cream); }
.story.new .story-ring b { background: var(--green-900); color: var(--lime); }

/* Story maken */

.story-voorbeeld { margin: 6px 0 4px; border-radius: 16px; overflow: hidden; background: var(--green-950); aspect-ratio: 9 / 16; max-height: 46vh; display: grid; place-items: center; }
.story-voorbeeld img, .story-voorbeeld video { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Story bekijken: schermvullend */
body.story-open { overflow: hidden; }
.story-viewer {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: #000; color: #fff;
}
.story-viewer[hidden] { display: none; }
.sv-media { position: relative; width: min(100vw, calc(100vh * 9 / 16)); height: 100vh; max-height: 100dvh; background: #000; }
.sv-media img, .sv-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.sv-balken {
  position: absolute; z-index: 3; top: max(10px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 4px; width: min(calc(100vw - 20px), calc(100vh * 9 / 16 - 20px));
}
.sv-balken span { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,.35); overflow: hidden; }
.sv-balken span.vol { background: #fff; }
.sv-balken i { display: block; width: 0; height: 100%; background: #fff; }
.sv-kop {
  position: absolute; z-index: 4; top: calc(max(10px, env(safe-area-inset-top)) + 12px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  width: min(calc(100vw - 24px), calc(100vh * 9 / 16 - 24px));
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.sv-kop .avatar { width: 34px; height: 34px; }
.sv-kop div { display: grid; }
.sv-kop strong { font-size: .9rem; }
.sv-kop small { font-size: .72rem; opacity: .8; }
.sv-sluit { margin-left: auto; width: 40px; height: 40px; border: 0; border-radius: 50%; background: rgba(0,0,0,.25); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.sv-tekst {
  position: absolute; z-index: 3; left: 50%; bottom: 110px; transform: translateX(-50%);
  max-width: min(calc(100vw - 40px), 380px); margin: 0; padding: 10px 16px; border-radius: 14px;
  background: rgba(12,47,37,.78); color: #fff; text-align: center;
  font-family: var(--font-kop); font-weight: 900; font-size: 1.5rem; line-height: 1.15;
}
.sv-tik { position: absolute; z-index: 2; top: 70px; bottom: 80px; border: 0; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sv-terug { left: 0; width: 35%; }
.sv-verder { right: 0; width: 65%; }
.sv-voet {
  position: absolute; z-index: 4; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%);
  display: flex; gap: 10px;
}
.sv-voet[hidden], .sv-tekst[hidden], .sv-kijkerslijst[hidden] { display: none; }
.sv-voet button { padding: 10px 16px; border: 0; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-weight: 700; cursor: pointer; backdrop-filter: blur(8px); }
.sv-kijkerslijst {
  position: absolute; z-index: 5; left: 50%; bottom: 76px; transform: translateX(-50%);
  width: min(calc(100vw - 24px), 380px); max-height: 45vh; overflow: auto;
  padding: 10px 14px; border-radius: 18px; background: #fff; color: var(--ink);
}
.sv-kijkerslijst p { display: flex; align-items: center; gap: 10px; margin: 8px 0; font-size: .9rem; }
.sv-kijkerslijst small { margin-left: auto; color: var(--muted); font-size: .75rem; }

/* Desktop: feed niet breder dan een telefoonfoto, zodat de beelden niet te hoog worden */
@media (min-width: 821px) {
  .feed-list { max-width: 560px; }
}

/* =====================================================================
   SAMEN: golfvrienden, banen en volgende rondje (samen.js)
   ===================================================================== */

/* Tellers in de navigatie */
.mobile-nav button { position: relative; }
.mobile-nav b {
  position: absolute; top: 0; left: 55%;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--orange); color: white; font-size: .6rem; line-height: 17px; text-align: center;
}
/* De grote plus heeft geen tekstregel zoals de andere navigatieknoppen.
   Overschrijf daarom hun grid/gap/padding volledig, zodat het icoon exact
   in het midden van de ronde knop blijft staan op iPhone en Android. */
.mobile-nav .mobile-create {
  display: grid;
  place-items: center;
  padding: 0;
  gap: 0;
  line-height: 0;
}
.mobile-nav .mobile-create svg { display: block; margin: 0; }
.sidebar-card { width: 100%; color: inherit; text-align: left; font: inherit; cursor: pointer; }
.sidebar-card:hover { background: rgba(255,255,255,.11); }

.uitnodiging-banner {
  margin: 0 0 16px; padding: 12px 14px; border-radius: 12px;
  background: var(--green-100); color: var(--green-900); font-size: .88rem;
}

.leeg-tekst { margin: 6px 0 14px; color: var(--muted); font-size: .88rem; }
.section-title small { color: var(--muted); font-weight: 600; }
.zacht { background: transparent !important; color: var(--muted) !important; }

/* Zoeken */
.zoek-rij { display: flex; gap: 10px; align-items: center; margin: 4px 0 14px; }
.zoek-rij .search-box { flex: 1; margin: 0; }
.zoek-rij .search-box input { font-size: 16px; }

/* Uitnodigingskaart */
.uitnodig-kaart {
  display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center;
  margin-bottom: 18px; padding: 22px; border-radius: 22px;
  background: var(--green-900); color: white;
}
.uitnodig-kaart .mini-label { color: var(--lime); }
.uitnodig-kaart h2 { margin: 6px 0 4px; font-size: 1.25rem; }
.uitnodig-kaart p { margin: 0; color: #bad0c5; font-size: .86rem; }
.uitnodig-kaart .uitnodig-teller { margin-top: 8px; font-size: .74rem; color: #9ab6aa; }
.uitnodig-knoppen { display: grid; gap: 8px; min-width: 170px; }
.uitnodig-knoppen .secondary { text-align: center; text-decoration: none; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.2); color: white; }
.uitnodig-knoppen .secondary:hover { background: rgba(255,255,255,.16); }

/* Personen */
.friend-list { margin-bottom: 8px; }
.friend-list .persoon-acties { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.friend-list .persoon-acties button { margin-left: 0; }
.label-vriend, .label-wacht { font-size: .72rem; font-weight: 800; color: var(--green-700); }
.label-wacht { color: var(--muted); }

/* Banen */
.banen-lijst { display: grid; gap: 8px; margin-bottom: 14px; }
.baan-rij {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 14px;
  border: 1px solid var(--line); border-radius: 15px; background: white; text-align: left; cursor: pointer;
}
.baan-rij:hover { border-color: var(--green-700); }
.baan-rij > span:nth-child(2) { display: grid; min-width: 0; }
.baan-rij strong { font-size: .9rem; }
.baan-rij small { color: var(--muted); font-size: .76rem; }
.baan-rij > svg { margin-left: auto; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; flex: 0 0 auto; }
.baan-icoon { display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; background: var(--green-100); color: var(--green-800); }
.baan-icoon svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.bron-melding a { color: inherit; }
.baan-feiten { margin: 10px 0; padding-left: 18px; color: var(--ink); font-size: .88rem; }
.klein-kop { margin: 14px 0 6px; font-size: .9rem; }
.lussen-lijst { display: grid; gap: 6px; margin: 0 0 8px; padding: 0; list-style: none; }
.lussen-lijst li { display: flex; justify-content: space-between; padding: 9px 12px; border-radius: 10px; background: #f3f5f2; font-size: .86rem; }
.lussen-lijst span { color: var(--muted); }
.voorstel { margin-top: 14px; }
.voorstel summary { cursor: pointer; color: var(--green-700); font-size: .82rem; font-weight: 750; }

/* Baankiezer in formulieren */
.baan-kiezer { position: relative; }
.baan-suggesties {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% - 8px);
  display: grid; max-height: 280px; overflow: auto;
  border: 1px solid var(--line); border-radius: 12px; background: white; box-shadow: var(--shadow);
}
.baan-kiezer [data-lus-rij]:not([hidden]) + .baan-suggesties { top: auto; }
.baan-suggesties button { display: grid; gap: 1px; padding: 10px 12px; border: 0; border-bottom: 1px solid #eef1ee; background: white; text-align: left; cursor: pointer; }
.baan-suggesties button:hover { background: #f3f5f2; }
.baan-suggesties strong { font-size: .86rem; }
.baan-suggesties small { color: var(--muted); font-size: .72rem; }

/* Knop "Nog een rondje?" in de feed */
.post-actions .nog-een { color: var(--green-700); }
.post-actions .nog-een span { font-weight: 800; }

/* Volgende rondje */
.plan-lijst { display: grid; gap: 12px; }
.afspraak { padding: 17px; border: 1px solid var(--line); border-radius: 18px; background: white; }
.afspraak.afgezegd { opacity: .6; }
.afspraak-kop { display: flex; justify-content: space-between; gap: 12px; }
.afspraak-kop h3 { margin: 3px 0 2px; font-size: 1.05rem; }
.afspraak-kop small { color: var(--muted); font-size: .76rem; }
.flight-teller { align-self: start; padding: 6px 10px; border-radius: 10px; background: var(--green-100); color: var(--green-800); font-weight: 850; font-size: .82rem; }
.flight-teller.vol { background: var(--green-900); color: var(--lime); }
.afspraak-notitie { margin: 10px 0 0; font-size: .88rem; }
.spelers { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; }
.speler { padding: 5px 9px; border: 1px solid transparent; border-radius: 999px; background: #f1f3f0; font-size: .74rem; font-weight: 700; }
.speler b { margin-left: 2px; }
.speler.ja { background: var(--green-100); color: var(--green-800); }
.speler.nee { color: var(--muted); text-decoration: line-through; }
.afspraak-acties { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.afspraak-acties button { padding: 9px 6px; border: 1px solid var(--line); border-radius: 10px; background: white; font-size: .78rem; font-weight: 800; cursor: pointer; }
.afspraak-acties button.gekozen { border-color: var(--green-800); background: var(--green-800); color: white; }
.afspraak-extra { display: flex; gap: 4px; margin-top: 10px; }
.afspraak-extra button { display: flex; align-items: center; gap: 5px; padding: 6px 8px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: .74rem; font-weight: 700; cursor: pointer; }
.afspraak-extra button:hover { background: #f1f4f1; color: var(--ink); }
.afspraak-extra svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.afspraak-extra [data-afspraak-weg] { margin-left: auto; }

.beschikbaar-form {
  display: grid; grid-template-columns: 1fr 1fr 2fr auto; gap: 10px; align-items: end;
  padding: 15px; border: 1px solid var(--line); border-radius: 16px; background: white;
}
.beschikbaar-form label { display: grid; gap: 5px; color: var(--muted); font-size: .72rem; font-weight: 750; }
.beschikbaar-form input, .beschikbaar-form select { padding: 9px 10px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf9; font-size: 16px; }
.chip-lijst { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 6px 6px 11px; border-radius: 999px; background: var(--green-100); color: var(--green-800); font-size: .76rem; font-weight: 750; }
.chip button { width: 22px; height: 22px; border: 0; border-radius: 50%; background: rgba(255,255,255,.7); cursor: pointer; }
.beschikbaar-dag { margin-bottom: 12px; }
.beschikbaar-dag h3 { margin: 0 0 7px; font-size: .9rem; }
.beschikbaar-dag article, .play-cards article { display: flex; align-items: center; gap: 10px; padding: 11px 12px; margin-bottom: 6px; border: 1px solid var(--line); border-radius: 14px; background: white; }
.beschikbaar-dag article div { display: grid; }
.beschikbaar-dag small { color: var(--muted); font-size: .74rem; }
.beschikbaar-dag [data-plan-met] { margin-left: auto; padding: 8px 12px; border: 0; border-radius: 9px; background: var(--lime); color: var(--green-950); font-weight: 850; font-size: .74rem; cursor: pointer; }
.play-cards article { padding: 0; margin: 0; border: 0; }

/* Genodigden in het planvenster */
.genodigden { margin: 13px 0; padding: 0; border: 0; }
.genodigden legend { margin-bottom: 6px; color: var(--muted); font-size: .75rem; font-weight: 750; }
.modal .genodigden-filter { margin-bottom: 8px; }
.genodigden-lijst { display: grid; gap: 4px; max-height: 210px; overflow: auto; }
.modal label.genodigde { display: flex; align-items: center; gap: 10px; margin: 0; padding: 7px 8px; border-radius: 10px; color: var(--ink); font-size: .86rem; font-weight: 650; cursor: pointer; }
.modal label.genodigde:hover { background: #f3f5f2; }
.modal label.genodigde input { width: 18px; height: 18px; flex: 0 0 auto; }
.genodigde .avatar { width: 30px; height: 30px; font-size: .62rem; }

@media (max-width: 820px) {
  .uitnodig-kaart { grid-template-columns: 1fr; }
  .uitnodig-knoppen { grid-template-columns: 1fr 1fr; }
  .uitnodig-knoppen .light-button { grid-column: 1 / -1; }
  .beschikbaar-form { grid-template-columns: 1fr 1fr; }
  .beschikbaar-form .breed, .beschikbaar-form button { grid-column: 1 / -1; }
  .page-head .primary.compact { padding: 9px 11px; font-size: .8rem; }
}
.speler.wacht { border-style: dashed; border-color: #c9d1cc; background: transparent; color: var(--muted); }
.post-actions .nog-een { white-space: nowrap; }
@media (max-width: 430px) { .post-actions .zicht-label { display: none; } }

/* --- Uitlijning en iconen (controle 16 okt) ------------------------- */
.nav-item span { white-space: nowrap; }
.nav-item b { flex: 0 0 auto; }
.stories { align-items: flex-start; }
.story { display: grid; justify-items: center; min-width: 62px; }
.story small { max-width: 64px; white-space: nowrap; text-align: center; }
.auth-links { flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 14px; }
.auth-step > .link-button { margin-top: 10px; }
.mobile-header .icon-button { width: 38px; height: 38px; color: var(--green-800); }
.mobile-header .icon-button svg { width: 19px; height: 19px; }
.icon-button svg, .baan-rij svg, .afspraak-extra svg { flex: 0 0 auto; }
.post-actions button svg { flex: 0 0 auto; }
.story { min-width: 70px; }
.story small { max-width: 74px; }
.beschikbaar-form input, .beschikbaar-form select { height: 42px; }

/* --- Melden, blokkeren, account verwijderen (veilig.js) -------------- */
.acties-venster { width: min(420px, calc(100% - 24px)); }
.acties-venster .modal-inhoud { display: grid; gap: 10px; padding: 18px; }
.acties-lijst { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }
.acties-lijst button { padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: white; text-align: left; font-weight: 750; cursor: pointer; }
.acties-lijst button:last-child { border-bottom: 0; }
.acties-lijst button:hover { background: #f3f5f2; }
.acties-lijst .gevaar, .link-gevaar { color: #b42318; }
.primary.gevaar { background: #b42318; color: white; box-shadow: none; }
.primary.gevaar:hover { background: #8f1c13; }
.reactie-melden { align-self: start; padding: 2px 6px; border: 0; background: transparent; color: var(--muted); font-size: .68rem; cursor: pointer; }
.reactie-melden:hover { color: var(--ink); }
.sv-melden { position: absolute; z-index: 6; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom)); padding: 8px 12px; border: 0; border-radius: 999px; background: rgba(0,0,0,.45); color: white; font-size: .78rem; font-weight: 750; cursor: pointer; }
.profiel-links { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 16px 0 0; font-size: .8rem; }
.profiel-links a { color: var(--green-700); }
.link-gevaar { padding: 0; border: 0; background: none; font: inherit; text-decoration: underline; cursor: pointer; }
#geblokkeerd-lijst article { opacity: .8; }

/* --- Veilige zones (notch en statusbalk), ook voor de app ------------- */
@media (max-width: 820px) {
  .mobile-header { padding-top: calc(13px + env(safe-area-inset-top)); }
}
.auth-screen { padding-top: max(20px, env(safe-area-inset-top)); padding-bottom: max(20px, env(safe-area-inset-bottom)); }

/* Plusje bij "Jouw story": een icoon in plaats van een teken, zodat het precies in het midden staat */
.story-ring b { display: grid; place-items: center; right: -3px; bottom: -1px; width: 22px; height: 22px; padding: 0; line-height: 0; }
.story-ring b svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: round; }

/* Profielfoto's */
.avatar { background-size: cover; background-position: center; background-repeat: no-repeat; }
/* Met foto: de kleurklassen (.avatar.a1 enz. in styles.css) gebruiken de
   verkorte regel "background" en winnen van ".avatar" hierboven. Daardoor
   stond de foto op ware grootte (alleen de linkerbovenhoek zichtbaar).
   Deze regel is even specifiek en staat later, dus hij wint. */
.avatar.met-foto { color: transparent; background-color: #dfe5df; background-size: cover; background-position: center; background-repeat: no-repeat; }
.avatar-kies { display: flex; align-items: center; gap: 16px; margin: 14px 0 4px; }
.avatar-kies .avatar.large { flex: 0 0 auto; }
.avatar-kies > div { display: grid; gap: 6px; justify-items: start; }
.modal label.avatar-knop { display: inline-block; margin: 0; padding: 9px 13px; color: var(--green-800); font-size: .85rem; cursor: pointer; }

/* Scorekaart invullen */
.sk-invoer { margin: 14px 0 4px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fafbf9; }
.sk-invoer summary { cursor: pointer; color: var(--green-800); font-size: .85rem; font-weight: 800; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.sk-kop { grid-column: 1 / -1; margin: 6px 0 0; font-size: .74rem; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.sk-hole { display: grid; grid-template-columns: 26px 1fr 1fr; align-items: end; gap: 6px; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.sk-hole.onder { border-color: #7fbf58; background: #f1f9e8; }
.sk-hole.boven { border-color: #f0c2a3; }
.sk-nr { align-self: center; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--green-900); color: var(--lime); font-weight: 850; font-size: .78rem; }
.modal .sk-hole label { gap: 3px; margin: 0; font-size: .64rem; }
.modal .sk-hole input, .modal .sk-hole select { padding: 7px 6px; font-size: 16px; text-align: center; }
.sk-totaal { margin: 10px 0 0; color: var(--muted); font-size: .8rem; font-weight: 700; }

/* Scorekaart in de feed */
.sk-feed { margin: 4px 0 12px; }
.sk-scroll { display: grid; gap: 8px; overflow-x: auto; }
.sk-tabel { width: 100%; border-collapse: collapse; font-size: .78rem; text-align: center; }
.sk-tabel th { width: 52px; padding: 5px 6px; text-align: left; color: var(--muted); font-weight: 750; }
.sk-tabel td { padding: 4px 2px; border-top: 1px solid #edf0ed; min-width: 24px; }
.sk-tabel tr:first-child td { color: var(--muted); font-weight: 700; }
.sk-tabel .sk-som { font-weight: 850; background: #f3f5f2; }
.sk-s { display: inline-grid; place-items: center; min-width: 22px; height: 22px; font-weight: 800; }
.sk-s.birdie, .sk-s.eagle { border: 1.5px solid #3c8a3a; border-radius: 50%; color: #2f6f2d; }
.sk-s.eagle { box-shadow: 0 0 0 2px white, 0 0 0 3.5px #3c8a3a; }
.sk-s.bogey { border: 1.5px solid #c46a2f; border-radius: 3px; color: #a3541f; }
.sk-s.dubbel { background: #f6dccb; border-radius: 3px; color: #8a3e12; }
.sk-legenda { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 0; color: var(--muted); font-size: .7rem; }
.sk-legenda .sk-s { min-width: 18px; height: 18px; font-size: .66rem; }
/* Scorekaart compact: twee holes naast elkaar op de telefoon */
.sk-grid { grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 6px; }
.sk-hole { grid-template-columns: 24px 1fr; grid-template-rows: auto auto; gap: 4px 6px; padding: 6px; align-items: center; }
.sk-hole .sk-nr { grid-row: 1 / 3; width: 24px; height: 24px; }
.modal .sk-hole select, .modal .sk-hole input { padding: 5px 4px; font-size: 16px; }
.modal .sk-hole input::placeholder { font-size: .72rem; }
.sk-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
.sk-invoer { padding: 12px 10px; }

/* Ingelogd blijven en wachtwoordmanager */
.auth-blijven { margin: 4px 0 2px; }
.verborgen-veld { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
.auth-card label.vinkje-rij { display: flex; align-items: center; gap: 10px; color: var(--ink); font-size: .85rem; font-weight: 500; }

/* =====================================================================
   PROFIELEN, MELDINGEN EN BIJSNIJDEN (sociaal.js, bijsnijden.js)
   ===================================================================== */
[data-profiel-id] { cursor: pointer; }
strong[data-profiel-id]:hover { text-decoration: underline; }

/* Kop op mobiel: twee knoppen naast elkaar */
.kop-knoppen { display: flex; gap: 8px; }
.icon-button b { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--orange); color: white; font-size: .62rem; line-height: 18px; text-align: center; }

/* Profiel van een ander */
.terug-knop { margin: 6px 0 14px; padding: 6px 10px 6px 4px; border: 0; background: transparent; color: var(--green-700); font-weight: 800; cursor: pointer; }
.persoon-hero .profile-top h1 { margin: 4px 0 2px; }
.persoon-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 18px; }
.persoon-knoppen .secondary { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.25); color: white; }
.slot-kaart { display: flex; align-items: center; gap: 14px; margin-top: 14px; padding: 18px; border: 1px dashed #c9d1cc; border-radius: 18px; background: white; }
.slot-kaart p { margin: 2px 0 0; color: var(--muted); font-size: .88rem; }
.slot-icoon { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 12px; background: var(--green-100); color: var(--green-800); }
.slot-icoon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
#persoon-rondes { margin-top: 4px; }

/* Meldingen */
.meldingen-lijst { display: grid; gap: 6px; }
.melding { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 12px 14px; border: 1px solid var(--line); border-radius: 15px; background: white; text-align: left; cursor: pointer; }
.melding:hover { border-color: var(--green-700); }
.melding.nieuw { border-color: #b9d43c; background: #fbfde9; }
.melding.nieuw .melding-tekst::after { content: ""; position: absolute; top: 4px; right: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); }
.melding-tekst { position: relative; display: grid; gap: 2px; padding-right: 14px; font-size: .88rem; }
.melding-tekst small { color: var(--muted); font-size: .74rem; }
.melding .avatar { flex: 0 0 auto; }

/* Bijsnijden */
.bijsnijd-venster { width: min(460px, calc(100% - 24px)); }
.bijsnijd-venster .modal-inhoud { padding: 22px; }
.bs-vak { position: relative; width: 100%; max-height: 62vh; margin: 12px auto 0; overflow: hidden; border-radius: 14px; background: #111; touch-action: none; cursor: grab; user-select: none; }
.bs-vak:active { cursor: grabbing; }
.bs-vak[style*="0.5625"] { width: min(100%, calc(62vh * 0.5625)); }
.bs-vak img, .bs-vak canvas { position: absolute; top: 0; left: 0; max-width: none; transform-origin: 0 0; pointer-events: none; }
.bs-vak.rond::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 999px rgba(0,0,0,.5); pointer-events: none; }
.modal label.bs-zoom { display: flex; align-items: center; gap: 12px; }
.bs-zoom input { flex: 1; accent-color: var(--green-700); }
.bs-knoppen { display: flex; justify-content: flex-end; gap: 8px; margin-top: 6px; }
.bs-knoppen .primary { padding: 11px 16px; }

/* =====================================================================
   GROEPEN EN BOEKEN (groepen.js, samen.js)
   ===================================================================== */
.sectie-kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 26px; }
.sectie-kop .section-title { margin: 0; }
.groepen-lijst { display: grid; gap: 10px; margin: 13px 0 4px; }
.groep-kaart { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: white; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.groep-kaart:hover { border-color: var(--green-700); }
.groep-leden { display: flex; flex: 0 0 auto; }
.groep-leden .avatar { margin-right: -8px; border: 2px solid white; }
.groep-leden .avatar.meer { background: var(--green-100); color: var(--green-800); font-size: .62rem; }
.groep-tekst { display: grid; min-width: 0; margin-left: 8px; }
.groep-tekst small { color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.groep-icoon { display: grid; place-items: center; width: 75px; height: 75px; flex: 0 0 75px; border-radius: 50%; background: var(--lime); color: var(--green-950); }
.groep-icoon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.leden-rij { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.lid-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 5px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(255,255,255,.08); color: white; font: inherit; font-size: .8rem; cursor: pointer; }
.lid-chip small { color: var(--lime); font-size: .66rem; }
.groep-plan-melding { margin: 12px 0; padding: 11px 13px; border-radius: 12px; background: var(--green-100); color: var(--green-800); font-size: .82rem; font-weight: 700; }
.geboekt-label { display: flex; align-items: center; gap: 7px; margin: 8px 0; color: var(--green-700); font-size: .8rem; font-weight: 800; }
.geboekt-label svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.afspraak-boeken { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid #edf0ed; }
.afspraak-boeken button, .boek-knop { padding: 8px 12px; border: 1px solid #bfd0c6; border-radius: 10px; background: white; color: var(--green-800); font: inherit; font-size: .78rem; font-weight: 800; cursor: pointer; text-decoration: none; }
.boek-knop { border-color: var(--lime-dark, #b9d63c); background: var(--lime); color: var(--green-950); }
.afspraak-boeken .zacht { border-color: transparent; color: var(--muted); }
/* Bericht van Rondje in de meldingen (sociaal.js) */
.melding-logo { object-fit: cover; background: var(--green-900); padding: 0; }

/* =====================================================================
   DRIVES (drives.js)
   ===================================================================== */
.drive-venster { width: min(460px, calc(100% - 24px)); }
.drive-venster .modal-inhoud { padding: 22px; display: grid; gap: 12px; }
.drive-venster .modal-head h2 { font-size: 1.45rem; }
.drive-uitleg { margin: 0; color: var(--muted); font-size: .86rem; }
.drive-meter { display: grid; justify-items: center; padding: 18px 12px 14px; border-radius: 18px; background: var(--green-900); color: white; text-align: center; }
.drive-meter strong { font-family: var(--font-kop, "Londrina Solid"), sans-serif; font-weight: 900; font-size: 5rem; line-height: 1; letter-spacing: -.02em; }
.drive-meter span { color: var(--lime); font-size: .8rem; font-weight: 700; }
.gps-status { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .78rem; font-weight: 700; color: var(--muted); }
.gps-status i { width: 10px; height: 10px; flex: 0 0 10px; border-radius: 50%; background: #c9d1cc; }
.gps-status.goed i { background: #3aa76d; }
.gps-status.redelijk i { background: #e9b949; }
.gps-status.zwak i { background: var(--orange); }
.gps-status.zoekt i { animation: gpsKnipper 1s infinite alternate; }
@keyframes gpsKnipper { from { opacity: .3; } to { opacity: 1; } }
.drive-venster [data-drive-stap] { display: grid; gap: 8px; }
.drive-venster [data-drive-stap][hidden] { display: none; }
.drive-venster .submit-round { margin-top: 4px; }
.drive-bewaar { padding: 13px; }
.drive-tekstknop { border: 0; background: transparent; color: var(--muted); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; padding: 6px; }
.drive-hero { display: grid; gap: 18px; }
.drive-hero .drive-strip { grid-template-columns: repeat(3, 1fr); margin-top: 0; padding-top: 0; border-top: 0; }
.drive-meet-knop { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 14px; }
.drive-meet-knop svg, .drive-tegel svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.drives-lijst { display: grid; gap: 10px; margin-top: 14px; }
.drive-rij { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: white; }
.drive-getal { min-width: 74px; font-family: var(--font-kop, "Londrina Solid"), sans-serif; font-weight: 900; font-size: 2rem; line-height: 1; color: var(--green-900); }
.drive-getal small { margin-left: 2px; font-size: .9rem; color: var(--muted); }
.drive-info { display: grid; min-width: 0; flex: 1; }
.drive-info strong { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; }
.drive-info small { color: var(--muted); font-size: .74rem; }
.drive-label { margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: var(--lime); color: var(--green-950); font-size: .64rem; vertical-align: middle; }
.drive-knoppen { display: flex; align-items: center; gap: 6px; }
.drive-knoppen .secondary { padding: 7px 11px; font-size: .76rem; }
.drive-weg { width: 32px; height: 32px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 1.2rem; cursor: pointer; }
.drive-tegel { display: flex; align-items: center; gap: 14px; width: 100%; margin: 4px 0 16px; padding: 15px 16px; border: 1px solid var(--line); border-radius: 18px; background: white; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.drive-tegel > span:nth-child(2) { display: grid; flex: 1; }
.drive-tegel small { color: var(--muted); font-size: .76rem; }
.drive-tegel-icoon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; background: var(--lime); color: var(--green-950); }
.drive-tegel .pijl { color: var(--muted); }
.drives-vandaag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--green-100); color: var(--green-800); font-size: .8rem; font-weight: 700; }
.drives-vandaag .secondary { padding: 6px 10px; font-size: .76rem; }
.boek-noot { align-self: center; color: var(--muted); font-size: .76rem; font-weight: 700; }

/* Bijsnijden: draaien en spiegelen (bijsnijden.js) */
.bs-extra { display: flex; gap: 8px; }
.bs-extra .secondary { flex: 1; padding: 9px; }
img.bs-laad { position: fixed; left: -10000px; top: 0; width: auto; height: auto; opacity: 0; pointer-events: none; }

/* iPhone zoomt in op een invulveld met tekst kleiner dan 16 pixels.
   Op telefoons en tablets daarom altijd minimaal 16 pixels. */
@media (max-width: 1024px) {
  input, select, textarea { font-size: 16px !important; }
}
.bs-extra button[aria-pressed="true"] { background: var(--lime); color: var(--green-950); border-color: transparent; }

/* Story maken: camera of galerij (camera.js) */
.story-bron { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 16px 0 8px; }
.story-bron .primary { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; }
.story-bron .primary svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.modal .story-bron .story-galerij { display: flex; align-items: center; justify-content: center; margin: 0; padding: 13px; color: var(--green-800); font-size: inherit; font-weight: 800; border-radius: 13px; cursor: pointer; }
/* Schermvullend vanaf het eerste beeld: geen vw/dvh (die verspringen op iPhone),
   maar vast aan alle randen, en kort infaden zodat je geen tussenstand ziet. */
.camera-venster { width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: #000; overflow: hidden; }
.camera-venster[open] { animation: cam-in .18s ease-out both; }
@keyframes cam-in { from { opacity: 0; } to { opacity: 1; } }
html:has(.camera-venster[open]) { overflow: hidden; }
.camera-venster::backdrop { background: #000; }
.camera-venster:focus { outline: none; } /* geen focusring op het venster zelf */
.camera-venster { position: fixed; inset: 0; overscroll-behavior: contain; touch-action: none; -webkit-user-select: none; user-select: none; }
/* De <video> levert alleen het camerabeeld; wat je ziet is het canvas erboven
   (camera.js tekent daar het beeld op schermgrootte). Zo springt het beeld op
   iPhone niet meer van een klein vak naar schermvullend. */
.camera-venster video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cam-beeld { position: absolute; inset: 0; z-index: 1; display: block; width: 100%; height: 100%; background: #000; }
/* Zwarte afdekking tot het eerste beeld getekend is */
.cam-dek { position: absolute; inset: 0; z-index: 1; background: #000; pointer-events: none; transition: opacity .2s ease; }
.camera-venster.beeld-klaar .cam-dek { opacity: 0; }
.camera-venster.flits::after { content: ""; position: absolute; inset: 0; z-index: 3; background: #fff; opacity: .7; pointer-events: none; }
.cam-status { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; margin: 0; color: rgba(255,255,255,.8); font-weight: 700; pointer-events: none; }
.cam-status[hidden] { display: none; }
.cam-hint { position: absolute; z-index: 2; left: 0; right: 0; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 92px); margin: 0; text-align: center; color: #fff; font-size: .8rem; font-weight: 700; text-shadow: 0 1px 3px rgba(0,0,0,.6); pointer-events: none; }
/* Voorcamera: beeld gespiegeld, zoals in een spiegel. De foto wordt precies zo bewaard. */
/* Spiegelen en zoomen doet camera.js op het canvas */
.cam-zoom { position: absolute; z-index: 2; border: 0; left: 50%; bottom: calc(max(24px, env(safe-area-inset-bottom)) + 160px); transform: translateX(-50%); margin: 0; padding: 4px 10px; border-radius: 999px; background: rgba(0,0,0,.45); color: #fff; font-size: .8rem; font-weight: 800; cursor: pointer; }
.cam-zoom[hidden] { display: none; }
.cam-knop { width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(0,0,0,.4); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.cam-sluit { position: absolute; z-index: 2; top: max(14px, env(safe-area-inset-top)); right: 14px; font-size: 2rem; }
.cam-balk { position: absolute; z-index: 2; left: 0; right: 0; bottom: max(24px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; }
.cam-ontspanner { --voortgang: 0%; position: relative; width: 78px; height: 78px; border: 0; border-radius: 50%; background: conic-gradient(#ff3b30 var(--voortgang), #fff 0); cursor: pointer; -webkit-touch-callout: none; touch-action: none; transition: transform .15s ease; }
.cam-ontspanner::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; background: rgba(255,255,255,.35); transition: background .15s ease, inset .15s ease; }
.cam-ontspanner:active::after { background: #fff; }
.cam-ontspanner.neemt-op { transform: scale(1.15); }
.cam-ontspanner.neemt-op::after { inset: 22px; border-radius: 8px; background: #ff3b30; }

/* GIF-kiezer: vaste hoogte, lege tegels tijdens laden, GIFs faden in */
#gif-dialog { width: min(520px, calc(100% - 24px)); }
.gif-snel { display: flex; gap: 6px; margin: -4px 0 12px; overflow-x: auto; scrollbar-width: none; }
.gif-snel::-webkit-scrollbar { display: none; }
.gif-snel button { flex: 0 0 auto; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--green-800); font-size: .78rem; font-weight: 800; cursor: pointer; }
.gif-resultaten { height: min(46vh, 420px); max-height: none; align-content: start; overscroll-behavior: contain; transition: opacity .15s ease; }
.gif-resultaten.laadt { opacity: .55; }
.gif-optie.gif-leeg { display: block; animation: gif-puls 1.2s ease-in-out infinite; }
@keyframes gif-puls { 50% { opacity: .5; } }
.gif-optie img { opacity: 0; transition: opacity .2s ease; }
.gif-optie img.geladen { opacity: 1; }
.gif-melding { grid-column: 1 / -1; padding: 30px 10px; text-align: center; }
.reactie-gif { background: var(--green-100); }
.reactie-gif-keuze img { width: auto; height: auto; max-width: 160px; }
.modal #gif-form { padding: 0; }
.camera-venster:has(.neemt-op) .cam-hint { opacity: 0; }

/* Bericht van Rondje: voorbeeld in de lijst, volledig in een venster (sociaal.js) */
.melding-meer { display: block; margin-top: 3px; color: var(--green-700); font-size: .76rem; font-style: normal; font-weight: 800; }
.bericht-kop { display: flex; align-items: center; gap: 12px; }
.bericht-kop > div { display: grid; }
.bericht-kop small { color: var(--muted); font-size: .76rem; }
.bericht-tekst { margin: 18px 0 0; max-height: 60vh; overflow-y: auto; white-space: pre-line; overflow-wrap: anywhere; font-size: .95rem; line-height: 1.55; }

/* Mijn spel: genoeg ruimte onderaan, ook boven de thuisbalk van een iPhone */
@media (max-width: 820px) {
  .app-shell { padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
}

/* Jouw golfjaar (nog niet beschikbaar): badge netjes gecentreerd, geen pijl */
.wrapped-card[disabled] { opacity: 1; cursor: default; background: linear-gradient(120deg, #e4f39a, #b9d98e); }
.wrapped-card > span { flex: 0 0 auto; width: 74px; height: 64px; gap: 2px; align-content: center; text-align: center; }
.wrapped-card > span b { font-family: var(--font-kop, "Londrina Solid"), sans-serif; font-weight: 900; font-size: .95rem; letter-spacing: .03em; line-height: 1; }
.wrapped-card > span small { font-size: .72rem; font-weight: 800; line-height: 1; }
.wrapped-card > div { min-width: 0; }
.wrapped-card[disabled] svg { display: none; }

/* =====================================================================
   FEEDFILTER EN CLUBBERICHTEN (app.js, laadFeed)
   ===================================================================== */
.feed-filters { margin: 4px 0 16px; }
.filter-chips { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px; padding: 4px; border-radius: 16px; background: #e6e9e3; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip { min-height: 44px; padding: 6px 4px; border: 0; border-radius: 12px; background: transparent; color: var(--green-800); font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
.filter-chip[aria-pressed="true"] { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.filter-chip:focus-visible { outline: 3px solid var(--lime); outline-offset: 2px; }




.club-berichten { display: grid; gap: 10px; margin-bottom: 18px; }
.club-berichten[hidden] { display: none; }

.club-bericht { padding: 16px 18px; border-radius: 18px; background: #fff; border: 1px solid var(--line); }
.club-bericht.vast { border-color: var(--green-700); }
.club-vast { font-size: .72rem; font-weight: 800; color: var(--green-700); }
.club-bericht-kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.club-bericht-kop small { color: var(--muted); font-size: .78rem; }
.club-soort { padding: 3px 10px; border-radius: 999px; background: var(--green-100); color: var(--green-700); font-size: .72rem; font-weight: 850; text-transform: uppercase; letter-spacing: .06em; }
.club-bericht h3 { margin: 8px 0 4px; font-size: 1.05rem; color: var(--ink); }
.club-bericht p { margin: 0 0 10px; color: var(--ink); font-size: .9rem; }
.club-bericht a.secondary { display: inline-flex; text-decoration: none; }

/* =====================================================================
   UI/UX-VERBETERINGEN (oktober 2026)
   ===================================================================== */
/* Toetsenbord: altijd zichtbaar waar je bent */
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--green-700); outline-offset: 2px;
}
.donker button:focus-visible, .uitnodig-kaart button:focus-visible { outline-color: var(--lime); }
/* Minder beweging als iemand dat heeft ingesteld */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}
/* Navigatie onderin: grotere tikvlakken */
.mobile-nav button { min-height: 48px; }

/* Foto kiezen bij Deel je rondje: eigen knop in plaats van de standaard bestandskiezer */
.veld-kop { margin: 13px 0 6px; color: var(--muted); font-size: .75rem; font-weight: 750; }
.veld-kop small { font-weight: 600; }
.modal label.bestand-kies { position: relative; display: flex; align-items: center; gap: 12px; margin: 0 0 13px; padding: 10px 12px; border: 1px dashed #bfd0c6; border-radius: 12px; background: #fafbf9; cursor: pointer; }
.bestand-kies input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.bestand-kies:focus-within { outline: 3px solid var(--green-700); outline-offset: 2px; }
.bestand-kies small { color: var(--muted); font-size: .8rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mijn spel: accountknoppen als nette lijst */
.instellingen-lijst { display: grid; gap: 0; margin-top: 6px; border: 1px solid var(--line); border-radius: 18px; background: #fff; overflow: hidden; }
.instellingen-lijst button { display: grid; gap: 2px; width: 100%; min-height: 52px; padding: 13px 16px; border: 0; border-top: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-weight: 750; text-align: left; cursor: pointer; }
.instellingen-lijst button:first-child { border-top: 0; }
.instellingen-lijst button:hover { background: #f5f7f4; }
.instellingen-lijst button small { color: var(--muted); font-weight: 500; font-size: .78rem; }
.instellingen-lijst #uitloggen { color: #b3261e; }

/* Gevaarlijke acties (groep opheffen/verlaten) los van de andere knoppen */


/* Pushmeldingen (push.js) */
.push-kaart { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; padding: 16px 18px; border-radius: 18px; background: var(--green-900); color: #fff; }
.push-kaart[hidden] { display: none; }
.push-kaart p { margin: 4px 0 0; color: #d4e3da; font-size: .88rem; }
.push-knoppen { display: flex; align-items: center; gap: 12px; }
.link-knop { padding: 8px 4px; border: 0; background: transparent; color: inherit; font: inherit; font-weight: 750; text-decoration: underline; cursor: pointer; }
.push-status { margin: 0 0 10px; color: var(--muted); font-size: .85rem; }
.schakelaar { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; margin: 0 !important; padding: 12px 16px; border-top: 1px solid var(--line); cursor: pointer; }
.schakelaar:first-child { border-top: 0; }
.schakelaar span { display: grid; gap: 2px; }
.schakelaar strong { color: var(--ink); font-size: .92rem; }
.schakelaar small { color: var(--muted); font-size: .78rem; font-weight: 500; }
.schakelaar input { appearance: none; -webkit-appearance: none; flex: 0 0 auto; width: 48px; height: 28px; border-radius: 999px; background: #cfd8d2; position: relative; cursor: pointer; transition: background .15s; }
.schakelaar input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .15s; }
.schakelaar input:checked { background: var(--green-700); }
.schakelaar input:checked::after { transform: translateX(20px); }

/* =====================================================================
   RONDEGEGEVENS EN JOUW GOLFJAAR (golfjaar.js)
   ===================================================================== */
/* Geplande ronde overnemen */
.afspraak-tip { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; padding: 12px 14px; border: 1px solid #c8dbd0; border-radius: 14px; background: #edf6f1; font-size: .86rem; color: var(--green-900); }
.afspraak-tip[hidden] { display: none; }

/* Snel invullen scorekaart: min, slagen, plus */
.sk-stap { display: grid; grid-template-columns: 30px minmax(0, 1fr) 30px; gap: 3px; align-items: center; }
.sk-hole .sk-stap { grid-column: 1 / -1; }
.sk-hole .sk-nr { grid-row: auto; }
.sk-stap button, .stap button { min-height: 36px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--green-800); font: inherit; font-size: 1.1rem; font-weight: 850; cursor: pointer; touch-action: manipulation; }
.sk-stap button:active, .stap button:active { background: var(--green-100); }
.modal .sk-stap input { min-width: 0; padding: 6px 2px; text-align: center; }

/* Meer statistieken */
.extra-stats { margin-top: 12px; }
.extra-uitleg { margin: 8px 0 4px; color: var(--muted); font-size: .8rem; }
.extra-grid { display: grid; gap: 8px; margin-top: 10px; }
.stap-veld { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "naam stap" "uitleg stap"; align-items: center; gap: 2px 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.stap-veld > span { grid-area: naam; color: var(--ink); font-size: .86rem; font-weight: 800; }
.stap-veld > small { grid-area: uitleg; color: var(--muted); font-size: .74rem; }
.stap-veld > .stap { grid-area: stap; }
.stap { display: grid; grid-template-columns: 44px 56px 44px; gap: 4px; }
.stap button { min-height: 44px; }
.modal .stap input { min-width: 0; padding: 8px 2px; font-size: 18px; font-weight: 800; text-align: center; }
.modal .stap-veld .klein-getal { display: inline-block; width: 48px; padding: 2px 4px; font-size: 16px; text-align: center; }

/* Medespelers */
.medespelers { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0 8px; scrollbar-width: none; }
.medespelers::-webkit-scrollbar { display: none; }
.modal label.medespeler { display: grid; justify-items: center; gap: 4px; flex: 0 0 auto; width: 64px; margin: 0; color: var(--ink); font-size: .72rem; font-weight: 700; text-align: center; cursor: pointer; }
.medespeler input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.medespeler .avatar { width: 46px; height: 46px; border: 3px solid transparent; }
.medespeler input:checked + .avatar { border-color: var(--green-700); box-shadow: 0 0 0 2px #fff inset; }
.medespeler input:focus-visible + .avatar { outline: 3px solid var(--lime); outline-offset: 2px; }
.medespeler span:last-child { max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Jouw cijfers (Mijn spel) */
.section-title small { color: var(--muted); font-size: .8rem; font-weight: 600; }
.cijfer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.cijfer-grid div, .golfjaar-grid div { display: grid; gap: 2px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.cijfer-grid strong, .golfjaar-grid strong { font-family: var(--font-kop, "Londrina Solid"), sans-serif; font-size: 1.6rem; font-weight: 900; color: var(--green-900); line-height: 1.05; }
.cijfer-grid span, .golfjaar-grid span { color: var(--muted); font-size: .76rem; font-weight: 700; }
.cijfer-grid:empty { display: none; }
.wrapped-card:not([disabled]) svg { display: block; }

/* Jouw golfjaar */
#golfjaar-dialog .modal-inhoud { padding: 25px; }
.golfjaar-lijst { margin: 0 0 8px; padding-left: 20px; font-size: .88rem; }
.golfjaar-lijst li { margin: 4px 0; }
.toestemming-vak { display: flex !important; align-items: center; gap: 10px; margin: 14px 0 !important; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fafbf9; color: var(--ink) !important; font-size: .92rem !important; font-weight: 800 !important; cursor: pointer; }
.toestemming-vak input { width: 22px !important; height: 22px; flex: 0 0 auto; accent-color: var(--green-700); }
.golfjaar-titel { display: grid; gap: 4px; margin: 10px 0 16px; padding: 18px; border-radius: 18px; background: var(--green-900); color: #fff; }
.golfjaar-titel strong { font-family: var(--font-kop, "Londrina Solid"), sans-serif; font-size: 1.8rem; font-weight: 900; color: var(--lime); }
.golfjaar-titel span { color: #c4d6ce; font-size: .92rem; }
.golfjaar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (max-width: 430px) { .golfjaar-grid { grid-template-columns: 1fr 1fr; } }
.golfjaar-extra p { margin: 10px 0 0; font-size: .9rem; }
.golfjaar-uit { display: block; margin: 8px auto 0; color: var(--muted); font-size: .85rem; }
[data-golfjaar-stap][hidden], [data-golfjaar-laden][hidden] { display: none; }
.primary:disabled { opacity: .45; cursor: not-allowed; }

/* =====================================================================
   GOLFCLUB IN DE APP (club.js)
   ===================================================================== */
.club-kaart { display: flex; align-items: center; gap: 12px; width: 100%; margin: 14px 0 0; padding: 13px 14px; border: 1px solid #c8dbd0; border-radius: 16px; background: #edf6f1; color: var(--green-900); font: inherit; text-align: left; cursor: pointer; }
.club-kaart[hidden] { display: none; }
.club-kaart > span:nth-child(2) { display: grid; gap: 2px; }
.club-kaart small { color: var(--muted); }
.club-kaart-icoon { display: grid; place-items: center; flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px; background: var(--green-900); color: var(--lime); }
.club-kaart svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.club-kaart .pijl { margin-left: auto; }
#club-dialog .modal-inhoud { padding: 25px; }
.club-acties { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 10px 0 4px; }
.club-acties [aria-pressed="true"] { background: var(--green-100); }
.club-berichten[data-club-berichten] { display: grid; gap: 10px; margin-top: 10px; }
.club-drempel { margin-top: 8px; padding: 10px 12px; border-radius: 12px; background: #f6f3e8; font-size: .86rem; }
.club-drempel p { margin: 4px 0 0; }
.club-inschrijf { display: grid; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.club-inschrijf small { color: var(--muted); }
.club-inschrijf-knoppen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.club-status { font-size: .86rem; font-weight: 800; color: var(--muted); }
.club-status.ok { color: var(--green-700); }
.club-status.wacht { color: #a3541f; }

/* =====================================================================
   COMPETITIES (competities.js)
   ===================================================================== */
.comp-kop { margin-top: 18px; }
.comp-kop .section-title { margin: 0; }
.comp-lijst { display: grid; gap: 8px; margin-top: 10px; }
.comp-kaart { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.comp-kaart > span { display: grid; gap: 2px; min-width: 0; }
.comp-kaart small { color: var(--muted); }
.comp-kaart .pijl { margin-left: auto; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; flex: 0 0 auto; }
.comp-badge { padding: 3px 9px; border-radius: 999px; background: var(--lime); color: var(--green-950); font-size: .72rem; font-weight: 850; white-space: nowrap; }
.comp-hero h1 { margin: 6px 0 4px; font-size: 1.8rem; }
.comp-hero p { margin: 0 0 14px; color: #b6ccc1; }
.comp-hero .eyebrow { color: var(--lime); }
.stand-vak { overflow-x: auto; padding: 4px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.stand-tabel { width: 100%; border-collapse: collapse; font-size: .88rem; }
.stand-tabel th, .stand-tabel td { padding: 10px 8px; border-bottom: 1px solid var(--line); text-align: left; }
.stand-tabel th { color: var(--muted); font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; }
.stand-tabel tr:last-child td { border-bottom: 0; }
.stand-tabel tr.ik td { background: #f3f9e3; }
.stand-tabel tr.onvolledig td { color: var(--muted); }
.stand-tabel small { color: var(--muted); font-size: .72rem; }
.stand-vak .bron-melding { margin: 8px; }
.duel-bord { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 18px 10px 6px; text-align: center; }
.duel-bord div { display: grid; }
.duel-bord strong { font-family: var(--font-kop, "Londrina Solid"), sans-serif; font-size: 3.2rem; font-weight: 900; line-height: 1; color: var(--green-900); }
.duel-bord span { color: var(--muted); font-weight: 800; }
.duel-bord em { color: var(--muted); font-style: normal; font-size: .8rem; }
.duel-sub { margin: 0 0 12px; color: var(--muted); font-size: .84rem; text-align: center; }
.uitslag-lijst { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.uitslag { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.uitslag > div { display: grid; gap: 2px; }
.uitslag small { color: var(--muted); font-size: .78rem; }
.uitslag-status { padding: 3px 9px; border-radius: 999px; background: var(--green-100); color: var(--green-700); font-size: .72rem; font-weight: 800; white-space: nowrap; }
.uitslag.in_afwachting .uitslag-status { background: #fdeee4; color: #a3541f; }
.uitslag.betwist .uitslag-status { background: #fde8e6; color: #b3261e; }
.uitslag.vervallen { opacity: .65; }
.uitslag.vervallen .uitslag-status { background: #eee; color: #555; }
.uitslag-knoppen { grid-column: 1 / -1; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.uitslag-knoppen > button { width: auto; flex: 0 0 auto; }
.gevaar-tekst { color: #b3261e; }
.vervallen-blok { margin-top: 10px; }
.vervallen-blok summary { cursor: pointer; color: var(--muted); font-weight: 750; }
.comp-beheer { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 18px; }
.kampioen-kaart { display: grid; justify-items: center; gap: 4px; margin-top: 16px; padding: 22px; border-radius: 20px; background: linear-gradient(120deg, #e4f39a, #b9d98e); color: var(--green-950); text-align: center; }
.kampioen-kaart span { font-size: .75rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.kampioen-kaart strong { font-family: var(--font-kop, "Londrina Solid"), sans-serif; font-size: 2rem; font-weight: 900; }
.kampioen-kaart button { margin-top: 8px; }

/* Nieuwe competitie */
.vorm-keuze { display: grid; gap: 3px; width: 100%; margin: 10px 0 0; padding: 16px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.vorm-keuze:hover:not([disabled]) { border-color: var(--green-700); background: #f6faf7; }
.vorm-keuze strong { font-size: 1rem; }
.vorm-keuze span { color: var(--muted); font-size: .86rem; }
.vorm-keuze small { color: var(--green-700); font-size: .74rem; font-weight: 800; }
.vorm-keuze[disabled] { opacity: .55; cursor: default; }
.comp-regels { margin: 12px 0 0; padding: 12px; border: 1px solid var(--line); border-radius: 14px; }
.comp-regels[hidden] { display: none; }
.comp-regels legend { padding: 0 6px; color: var(--ink); font-weight: 800; font-size: .86rem; }
.modal label.keuze-rij { display: flex; align-items: flex-start; gap: 10px; margin: 8px 0; color: var(--ink); font-size: .9rem; cursor: pointer; }
.modal .keuze-rij input { width: 20px; height: 20px; margin-top: 2px; accent-color: var(--green-700); }
.keuze-rij span { display: grid; gap: 1px; }
.keuze-rij small { color: var(--muted); font-weight: 500; }
.genodigden-lijst { display: grid; gap: 4px; max-height: 220px; overflow-y: auto; }
.comp-samenvatting dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 14px; margin: 10px 0; }
.comp-samenvatting dt { color: var(--muted); font-weight: 750; }
.comp-samenvatting dd { margin: 0; font-weight: 700; }

/* Uitslag toevoegen */
.winnaar-keuze { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px; border-radius: 14px; background: #e6e9e3; }
.winnaar-keuze button { min-height: 44px; border: 0; border-radius: 11px; background: transparent; color: var(--green-800); font: inherit; font-weight: 800; cursor: pointer; }
.winnaar-keuze button[aria-pressed="true"] { background: var(--green-900); color: #fff; }
[data-uitslag-vorm][hidden], [data-uitslag-marge][hidden], [data-uitslag-tegen][hidden], [data-uitslag-holes][hidden] { display: none; }

/* In "Deel je rondje" */
.competitie-ronde { margin-top: 6px; }
.competitie-ronde[hidden] { display: none; }
.comp-ronde-rij { display: grid; gap: 8px; margin-top: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.comp-ronde-rij > span { display: grid; gap: 1px; }
.comp-ronde-rij small { color: var(--muted); font-size: .74rem; }
.comp-ronde-rij .stap { justify-self: start; }
.comp-duel-velden { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 6px; }
.modal .comp-duel-velden select { padding: 9px 6px; font-size: 15px; }
.comp-duel-velden [hidden] { display: none; }
.modal label.comp-tee { max-width: 200px; }

/* Datumvelden: zelfde hoogte en uitlijning als de andere velden (ook op de iPhone) */
.form-row > label { min-width: 0; }
.modal input[type="date"], .modal input[type="time"], .modal input[type="datetime-local"] {
  -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0;
  height: 48px; padding: 0 12px; line-height: 48px; text-align: left; }
.modal input[type="date"]::-webkit-date-and-time-value,
.modal input[type="time"]::-webkit-date-and-time-value,
.modal input[type="datetime-local"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.modal .form-row select { height: 48px; }

/* Feedfilter: klein schakelaartje in plaats van grote knoppen */
.feed-filters { margin: 0 0 12px; }
.filter-chips { display: inline-flex; grid-template-columns: none; gap: 2px; padding: 3px; border-radius: 999px; background: #e6e9e3; }
.filter-chip { min-height: 30px; padding: 4px 14px; border-radius: 999px; font-size: .78rem; font-weight: 750; }
.visueel-verborgen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* =====================================================================
   GROEPSINSTELLINGEN (groepen.js)
   ===================================================================== */
.groep-hero { position: relative; }
.groep-tandwiel { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; border: 0; background: rgba(255,255,255,.12); color: #fff; }
.groep-tandwiel svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.groep-hero .profile-top { padding-right: 48px; }
.groep-avatar { flex: 0 0 auto; background-size: cover; background-position: center; }
.groep-avatar svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.groep-avatar-klein { width: 46px; height: 46px; background-size: cover; background-position: center; }
.gi-foto { display: flex; align-items: center; gap: 14px; margin: 6px 0 4px; }
.gi-foto-knoppen { display: grid; gap: 4px; justify-items: start; }
.modal label.gi-foto-kies { display: inline-flex; margin: 0; padding: 9px 14px; border-radius: 10px; color: var(--green-800); font-size: .85rem; cursor: pointer; }
[data-gi-beheer] { padding-bottom: 14px; border-bottom: 1px solid var(--line); }
[data-gi-beheer][hidden] { display: none; }
.gi-leden { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.gi-leden li { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 4px 0; border-bottom: 1px solid #eef1ee; }
.gi-naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .92rem; }
.gi-rol { color: var(--muted); font-size: .8rem; font-weight: 700; }
.modal .gi-leden select { width: auto; padding: 6px 8px; font-size: 15px; }
.gi-weg { display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #f3f5f2; color: #b3261e; cursor: pointer; }
.gi-weg svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.gi-acties { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.gi-acties [hidden] { display: none; }
.gi-gevaar { display: flex; gap: 14px; margin-top: 18px; padding-top: 10px; border-top: 1px solid var(--line); }
.gi-gevaar [hidden] { display: none; }

/* =====================================================================
   APP-INSTELLINGEN (instellingen.js): mededeling, update, onderhoud
   ===================================================================== */
[data-functie][hidden] { display: none !important; }
.app-mededeling { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 10px 14px; margin: 0 0 14px; padding: 14px 44px 14px 16px; border-radius: 16px; background: var(--green-900); color: #fff; }
.app-mededeling[hidden] { display: none; }
.app-mededeling strong { display: block; }
.app-mededeling p { margin: 2px 0 0; color: #d4e3da; font-size: .88rem; white-space: pre-line; }
.app-mededeling a[hidden] { display: none; }
.app-mededeling a { text-decoration: none; }
.mededeling-sluit { position: absolute; top: 8px; right: 8px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; }
.mededeling-sluit svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.update-balk { background: #24493c; }
@media (max-width: 480px) { .app-mededeling { grid-template-columns: 1fr; } .app-mededeling a { justify-self: start; } }
.vol-scherm { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; padding: 32px; background: var(--green-900); color: #fff; text-align: center; }
.vol-scherm[hidden] { display: none; }
.vol-scherm > div { display: grid; justify-items: center; gap: 12px; max-width: 420px; }
.vol-scherm h1 { margin: 6px 0 0; font-family: var(--font-kop, "Londrina Solid"), sans-serif; font-size: 2rem; }
.vol-scherm p { margin: 0; color: #d4e3da; white-space: pre-line; }
.vol-scherm img { border-radius: 18px; }
.vol-scherm a[hidden] { display: none; }
.vol-scherm a { text-decoration: none; padding: 13px 22px; width: auto; }

/* =====================================================================
   LEESBAARHEID EN TIKVLAKKEN (minimaal 44 px, genoeg contrast buiten)
   ===================================================================== */
/* Navigatie onderaan: grotere, donkerdere labels */
.mobile-nav button { color: #56625c; font-size: .7rem; }
.mobile-nav b { background: #c2410c; font-size: .68rem; font-weight: 800; }
/* Feedfilter blijft klein om te zien, maar het tikvlak is 44 px hoog */
.filter-chip { position: relative; }
.filter-chip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%); }
/* Like, reageer en het menu bij een rondje */
.post-actions button { min-height: 44px; }
.post-head .more { min-width: 44px; min-height: 44px; }
/* Kleine tekstlinks en compacte knoppen */
.light-button { min-height: 44px; }
 .icon-button { min-width: 44px; min-height: 44px; }

/* Rondje zonder score: baannaam groot in plaats van een leeg scorevak */
.sk-zonder-score { position: relative; z-index: 2; display: grid; gap: 4px; }
.sk-zonder-score span { font-weight: 800; font-size: .9rem; opacity: .85; }
.sk-zonder-score strong { font-family: var(--font-kop); font-weight: 900; font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: .95; }
.sk-zonder-score small { font-weight: 700; opacity: .8; }

/* Rondje bewerken / lege feed */
#feed-leeg [data-veld="feed-leeg-uitnodigen"] { margin-left: 6px; }
/* Kop: korte tekst onder de iconen Drive en Banen, zodat je weet wat ze doen */
/* Alle drie de knoppen in de kop: afgeronde vierkantjes. Bij Drive en Banen
   staat het icoon boven het woord, met genoeg ruimte rondom. */
.kop-knoppen .icon-button { position: relative; width: 48px; min-width: 48px; height: 48px; border-radius: 16px; }
.kop-knoppen .icon-button:has(.kop-label) { width: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; }
.kop-knoppen .icon-button:has(.kop-label) svg { width: 18px; height: 18px; }
.kop-label { font-size: .62rem; font-weight: 800; line-height: 1; color: var(--green-800); }

/* Deel je rondje: kort formulier, de rest ingeklapt, plaatsknop altijd in beeld */
.meer-invoer > summary { font-weight: 800; }
.meer-invoer[open] { padding-bottom: 6px; }
.bron-melding.klein { font-size: .72rem; margin-top: 4px; }
.vaste-knop { position: sticky; bottom: 0; z-index: 3; margin: 8px -4px -4px; padding: 10px 4px calc(10px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(255,255,255,0), #fff 30%); }
.vaste-knop .submit-round { width: 100%; margin: 0; }
.mood-row { flex-wrap: wrap; }

/* Mijn spel: tandwiel naar Instellingen; Instellingen als eigen scherm */
#stats-view .profile-top { position: relative; padding-right: 48px; }
.spel-tandwiel { position: absolute; top: 0; right: 0; background: rgba(255,255,255,.12); color: #fff; border-radius: 50%; }
.spel-tandwiel svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
#instellingen-view .terug-knop { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.scherm-titel { margin: 0 0 8px; font-family: var(--font-kop); font-size: 2rem; color: var(--green-950); }