/* =====================================================================
   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: #56625c; /* donkerder voor contrast (WCAG AA op crème: 5,7) */
  --line: #dfe5df;
  --sand: #e8dfc8;
  --orange: #f08c4f;
  --shadow: 0 16px 40px rgba(25, 44, 34, .09);
  --radius: 22px
}

* {
  box-sizing: border-box
}

/* Nooit een zwart frame: ook onder en achter de pagina altijd crème, ook als de telefoon in donkere stand staat */
:root { color-scheme: light; }
html {
  scroll-behavior: smooth;
  background: var(--cream)
}

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: .75rem;
  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: .75rem;
  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: .75rem
}

.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: .75rem;
  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: .75rem;
  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: .75rem
}

.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: .75rem
}

.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: .75rem; 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: .75rem; 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 {
  --sv-dek: 1; /* vegen omlaag: de achtergrond vervaagt mee */
  position: fixed; inset: 0; z-index: 200; overflow: hidden;
  color: #fff;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.story-viewer::before { content: ""; position: absolute; inset: 0; background: var(--green-950); opacity: var(--sv-dek); }
.story-viewer[hidden] { display: none; }
.sv-podium, .sv-buur { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform; }
.sv-buur[hidden] { display: none; }
.sv-media { position: relative; width: min(100vw, calc(100vh * 9 / 16)); height: 100vh; max-height: 100dvh; background: var(--green-950); }
.sv-media img, .sv-media video, .sv-buur img, .sv-buur video { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; background: var(--green-950); }
.sv-buur img, .sv-buur video { width: min(100vw, calc(100vh * 9 / 16)); height: 100vh; max-height: 100dvh; }
.sv-kapot { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 32px; text-align: center; color: var(--green-100); }
/* Laadsein: alleen als een story langer dan 200 ms op zich laat wachten */
.sv-laden { position: absolute; z-index: 5; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border: 3px solid rgba(255, 255, 255, .3); border-top-color: #fff; border-radius: 50%; animation: sv-draai .8s linear infinite; }
.sv-laden[hidden] { display: none; }
@keyframes sv-draai { to { rotate: 360deg; } }
/* Vasthouden: alleen de foto in beeld */
.sv-balken, .sv-kop, .sv-tekst, .sv-melden, .sv-voet { transition: opacity .15s ease; }
.sv-vast .sv-balken, .sv-vast .sv-kop, .sv-vast .sv-tekst, .sv-vast .sv-melden, .sv-vast .sv-voet { opacity: 0; pointer-events: none; }
.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: .75rem; 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-kaart .uitnodig-code { margin-top: 8px; color: white; font-size: .9rem; }
.uitnodig-kaart .uitnodig-code strong { color: var(--lime); letter-spacing: .06em; user-select: all; }
.uitnodiging-banner ol { margin: 8px 0 0; padding-left: 20px; }
.uitnodiging-banner li { margin: 3px 0; }
.uitnodiging-banner .banner-code { font-weight: 700; letter-spacing: .06em; user-select: all; }
.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; }
.friend-list .vrienden-meer { width: 100%; min-height: 44px; margin: 0; }
.label-vriend, .label-wacht { font-size: .75rem; 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: .75rem; }

/* 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: .75rem; 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: .75rem; 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: .75rem; 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: .75rem; }
.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: .75rem; 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: .75rem; 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; }

/* 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: .75rem; }
.sk-legenda .sk-s { min-width: 18px; height: 18px; font-size: .66rem; }

/* 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: .75rem; }
.verzoeken-regel { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px; margin: 0 0 8px; padding: 0 2px; border: 0; background: transparent; color: var(--green-800); font: inherit; font-size: .9rem; font-weight: 700; text-align: left; cursor: pointer; }
.verzoeken-regel[hidden] { display: none; }
.verzoeken-regel span { flex: 1 1 auto; min-width: 0; }
.verzoeken-regel svg { flex: 0 0 auto; width: 16px; height: 16px; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
#meldingen-view .verzoeken-regel { padding: 0 14px; border: 1px solid var(--line); border-radius: 15px; background: #fff; color: var(--ink); }
#verzoeken-view .leeg-tekst { margin: 0 0 12px; }
.friend-list article > .avatar { flex: 0 0 auto; }
.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: var(--green-950); 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: .75rem; }
.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: var(--green-950); 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: var(--green-950); }
.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: var(--green-950); }
/* Zwarte afdekking tot het eerste beeld getekend is */
.cam-dek { position: absolute; inset: 0; z-index: 1; background: var(--green-950); 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: .75rem; 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: .75rem; 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: .75rem; 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; }

.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; }
.stap button:active { background: var(--green-100); }

.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: .75rem; }
.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: .75rem; 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: .75rem; 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: .75rem; 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: .75rem; }
.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: .75rem; 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: .75rem; 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; }

/* Matchplay-uitslag: Tegen wie? / Wie won? / Met hoeveel? (competities.js) */
.duel-invoer { display: grid; }
.duel-invoer [hidden] { display: none; }
.duel-invoer .veld-kop { margin: 12px 0 6px; color: var(--green-900); font-size: .85rem; font-weight: 800; }
.comp-ronde-rij .duel-invoer > .veld-kop:first-child { margin-top: 2px; }
.keuze-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.keuze-chips button, .marge-keuze button { min-height: 44px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--green-800); font: inherit; font-weight: 800; cursor: pointer; }
.keuze-chips button[aria-pressed="true"], .marge-keuze button[aria-pressed="true"] { border-color: var(--green-900); background: var(--green-900); color: #fff; }
.marge-keuze { display: grid; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 6px; }
.marge-keuze button { padding: 0 4px; border-radius: 12px; }
.duel-uitleg { margin: 8px 0 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.duel-controle { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: var(--green-100); color: var(--green-950); font-size: .85rem; line-height: 1.4; }
.duel-controle strong { display: block; font-size: .95rem; }

/* 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: .75rem; }
.comp-ronde-rij .stap { justify-self: start; }
.modal label.comp-tee { max-width: 200px; }
.modal label.comp-als-foto { display: flex; align-items: flex-start; gap: 10px; margin-top: 10px; font-weight: 750; }
.comp-als-foto input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--green-900); }
.comp-als-foto span { display: grid; gap: 2px; }
.comp-als-foto small { color: var(--muted); font-size: .75rem; font-weight: 600; }
.comp-vast p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.4; }
.comp-vast p strong { display: block; color: var(--ink); font-size: .9rem; }

/* 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: .75rem; 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: .75rem; 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); }

/* =====================================================================
   CHAT (chat.js)
   ===================================================================== */
/* Plannen: knop naar Banen zoeken (de Banen-knop in de kop is vervangen door Chat) */
.baan-zoek-knop { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 18px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.baan-zoek-knop > svg:first-child { width: 22px; height: 22px; fill: none; stroke: var(--green-700); stroke-width: 1.8; }
.baan-zoek-knop span { display: grid; flex: 1; }
.baan-zoek-knop small { color: var(--muted); }
.baan-zoek-knop .pijl { width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; }

/* Lijst met gesprekken */
.chat-lijst { display: grid; gap: 8px; }
.chat-rij { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); text-align: left; cursor: pointer; }
.chat-rij.ongelezen { border-color: var(--green-700); }
.chat-rij-tekst { display: grid; flex: 1; min-width: 0; gap: 2px; }
.chat-rij-kop, .chat-rij-voorbeeld { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.chat-rij-kop strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-rij-kop small { flex: 0 0 auto; color: var(--muted); font-size: .75rem; }
.chat-rij-voorbeeld span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .88rem; }
.chat-rij.ongelezen .chat-rij-voorbeeld span { color: var(--ink); font-weight: 700; }
.chat-ongelezen { flex: 0 0 auto; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--green-700); color: #fff; font-size: .75rem; line-height: 22px; text-align: center; }
.chat-avatar { flex: 0 0 auto; width: 48px; height: 48px; background-size: cover; background-position: center; }
.chat-avatar.groep { display: grid; place-items: center; }
.chat-avatar.groep svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.chat-avatar.klein { width: 38px; height: 38px; font-size: .8rem; }
.chat-avatar.mini { width: 28px; height: 28px; font-size: .62rem; align-self: flex-end; cursor: pointer; }
.chat-avatar-ruimte { flex: 0 0 28px; }

/* Nieuw gesprek */
.chat-nieuw-lijst { display: grid; gap: 6px; max-height: 55vh; overflow-y: auto; margin-top: 12px; }
.chat-keuze-kop { margin: 10px 0 2px; font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.chat-keuze { display: flex; align-items: center; gap: 12px; padding: 8px; border: 0; border-radius: 12px; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.chat-keuze:hover { background: var(--cream); }
.chat-keuze span { display: grid; }
.chat-keuze small { color: var(--muted); }
.chat-keuze .chat-avatar { width: 40px; height: 40px; }

/* Eén gesprek: kop, berichten en invoer. Op de telefoon schermvullend. */
#gesprek-view.active { display: flex; flex-direction: column; height: calc(100vh - 140px); height: calc(100dvh - 140px); }
.gesprek-kop { display: flex; align-items: center; gap: 6px; padding: 6px 0 10px; border-bottom: 1px solid var(--line); }
.gesprek-terug { flex: 0 0 auto; font-size: 1.8rem; line-height: 1; border: 0; background: transparent; }
.gesprek-kop-knop { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 4px; border: 0; background: transparent; color: var(--ink); text-align: left; cursor: pointer; }
.gesprek-kop-knop > span:last-child { display: grid; min-width: 0; }
.gesprek-kop-knop strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gesprek-kop-knop small { color: var(--muted); font-size: .78rem; }
.gesprek-berichten { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 2px; display: flex; flex-direction: column; gap: 2px; }
.gesprek-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--cream); }
.gesprek-form textarea { flex: 1; min-height: 44px; max-height: 140px; padding: 11px 14px; border: 1px solid var(--line); border-radius: 22px; background: #fff; font: inherit; resize: none; line-height: 1.35; }
.gesprek-plan { flex: 0 0 auto; background: var(--lime) !important; border: 0 !important; color: var(--green-950); }
.gesprek-plan svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.gesprek-stuur { flex: 0 0 auto; min-height: 44px; padding: 0 16px; border: 0; border-radius: 22px; background: var(--green-800); color: #fff; font-weight: 800; cursor: pointer; }
.gesprek-dicht { margin: 0; padding: 14px; text-align: center; color: var(--muted); border-top: 1px solid var(--line); }

/* Berichten */
.chat-regel { display: flex; align-items: flex-end; gap: 6px; margin-top: 8px; max-width: 100%; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.chat-regel.vervolg { margin-top: 2px; }
.chat-regel.mij { justify-content: flex-end; }
.chat-regel.wacht { opacity: .55; }
.chat-bubbel { position: relative; max-width: min(78%, 520px); padding: 7px 11px 6px; border-radius: 16px 16px 16px 5px; background: #fff; border: 1px solid var(--line); overflow-wrap: anywhere; }
.chat-regel.mij .chat-bubbel { background: var(--lime); border-color: var(--lime-dark); border-radius: 16px 16px 5px 16px; }
.chat-regel.vervolg.ander .chat-bubbel { border-radius: 5px 16px 16px 5px; }
.chat-regel.vervolg.mij .chat-bubbel { border-radius: 16px 5px 5px 16px; }
.chat-bubbel.weg { background: transparent; color: var(--muted); }
.chat-naam { display: block; margin-bottom: 1px; font-size: .75rem; font-weight: 800; color: var(--green-700); cursor: pointer; }
.chat-tekst { white-space: pre-wrap; }
.chat-tekst a { color: inherit; text-decoration: underline; }
.chat-tijd { float: right; margin: 6px 0 -2px 10px; font-size: .75rem; color: var(--muted); }
.chat-dag { display: flex; justify-content: center; margin: 14px 0 4px; }
.chat-dag span { padding: 3px 10px; border-radius: 999px; background: var(--green-100); color: var(--green-800); font-size: .75rem; font-weight: 800; }
.chat-systeem { align-self: center; margin: 10px 0 2px; padding: 4px 12px; border-radius: 999px; background: var(--green-100); color: var(--green-800); font-size: .78rem; font-weight: 700; }
.chat-systeem svg { width: 12px; height: 12px; vertical-align: -1px; fill: none; stroke: currentColor; stroke-width: 2; }
.chat-meer { align-self: center; margin-bottom: 6px; }
.chat-start { margin: auto 0; padding: 20px; text-align: center; color: var(--muted); }
.chat-start strong { display: block; color: var(--ink); margin-bottom: 4px; }

/* Afspraak als kaart in het gesprek (zelfde kaart als bij Plannen) */
.chat-regel:has(.chat-afspraak) { flex-direction: column; align-items: stretch; }
.chat-regel.mij:has(.chat-afspraak) { align-items: stretch; }
.chat-afspraak-kop { margin: 0 4px 4px; font-size: .75rem; color: var(--muted); font-weight: 700; }
.chat-regel.mij .chat-afspraak-kop { text-align: right; }
.chat-afspraak .afspraak { border: 2px solid var(--green-700); box-shadow: 0 6px 18px rgba(18, 63, 50, .08); }
.chat-afspraak-weg { padding: 12px; border: 1px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: .88rem; text-align: center; }

/* Telefoon: gesprek schermvullend, zonder kop en navigatie van de app */
@media (max-width: 820px) {
  body.in-gesprek:not(.veeg-terug) .mobile-header, body.in-gesprek:not(.veeg-terug) .mobile-nav { display: none !important; }
  body.in-gesprek #gesprek-view.active { position: fixed; inset: 0; z-index: 40; height: 100vh; height: 100dvh; padding: env(safe-area-inset-top) 12px 0; background: var(--cream); }
}
body.in-gesprek .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
.primary-nav [data-view="gesprek"] { display: none; }

/* Chat fase 2: foto's, reacties, bewerken en het menu bij een bericht */
.gesprek-kop .gesprek-meer { margin-left: auto; border: 0; background: transparent; font-size: 1.1rem; letter-spacing: 1px; }
.chat-bubbel.met-foto { padding: 4px 4px 6px; }
.chat-bubbel.met-foto .chat-tekst, .chat-bubbel.met-foto .chat-naam { padding: 4px 7px 0; }
.chat-bubbel.met-foto .chat-tekst { display: block; } /* bijschrift onder een foto: alle regels even ver ingesprongen */
.chat-bubbel.met-foto .chat-tijd { margin-right: 6px; }
.chat-foto { display: block; padding: 0; border: 0; background: var(--green-100); border-radius: 12px; overflow: hidden; cursor: zoom-in; }
.chat-foto img { display: block; width: min(64vw, 280px); max-height: 340px; min-height: 120px; object-fit: cover; }
.chat-regel.met-reacties { margin-bottom: 12px; }
.chat-reacties { position: absolute; bottom: -14px; right: 8px; display: flex; gap: 3px; }
.chat-regel.mij .chat-reacties { right: auto; left: 8px; }
.chat-reacties button { min-height: 24px; padding: 1px 7px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font-size: .82rem; line-height: 1.3; cursor: pointer; }
.chat-reacties button.ik { border-color: var(--green-700); background: var(--green-100); }
.chat-reacties small { font-size: .75rem; font-weight: 800; color: var(--green-800); }
.gesprek-bewerk { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px 0; font-size: .8rem; font-weight: 800; color: var(--green-700); border-top: 1px solid var(--line); }
.bericht-menu { width: min(360px, calc(100% - 32px)); text-align: center; }
.bericht-menu-emoji { display: flex; justify-content: space-around; gap: 2px; padding: 6px 0 12px; border-bottom: 1px solid var(--line); }
.bericht-menu-emoji button { flex: 0 0 auto; width: 42px; height: 42px; border: 0; border-radius: 50%; background: var(--cream); font-size: 1.45rem; cursor: pointer; }
.bericht-menu-emoji button.gekozen { background: var(--lime); }
.bericht-menu-acties { display: grid; gap: 2px; padding: 8px 0; }
.bericht-menu-acties button { min-height: 46px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-weight: 700; color: var(--ink); cursor: pointer; }
.bericht-menu-acties button:hover { background: var(--cream); }
.bericht-menu-acties button.gevaar { color: var(--like, #d24f59); }
.chat-foto-dialog { width: 100%; height: 100%; max-width: 100%; max-height: 100%; margin: 0; padding: 0; border: 0; background: var(--green-950); }
.chat-foto-dialog::backdrop { background: var(--green-950); }
.chat-foto-dialog[open] { animation: achtergrond-in .16s ease both; }
.chat-foto-dialog img { width: 100%; height: 100%; object-fit: contain; }
.chat-foto-dialog .icon-button { position: absolute; top: max(14px, env(safe-area-inset-top)); right: 14px; z-index: 2; }

/* Kop en navigatie op de telefoon dicht, zonder doorschijnende waas over iconen en tekst */
@media (max-width: 820px) {
  .mobile-header { background: #f6f5ef; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mobile-nav { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.in-gesprek { overflow: hidden; }
  body.in-gesprek #gesprek-view.active { overscroll-behavior: none; }
}

/* Vensters op de telefoon: buiten de statusbalk en de thuisbalk, en soepel scrollen
   zonder dat de pagina erachter meeschuift */
@media (max-width: 820px) {
  .modal[open] {
    inset-block: calc(env(safe-area-inset-top) + 10px) calc(env(safe-area-inset-bottom) + 10px);
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  .modal::backdrop { backdrop-filter: none; -webkit-backdrop-filter: none; }
}
html:has(dialog[open]), body:has(dialog[open]) { overflow: hidden; }

/* App: het toetsenbord meldt zijn hoogte vooraf (chat.js). Gesprek en vensters schuiven
   tegelijk met het toetsenbord mee, met dezelfde snelheid als iOS */
html.native-app body.in-gesprek #gesprek-view.active { transition: height .28s cubic-bezier(.2, .8, .2, 1); }
@media (max-width: 820px) {
  html.native-app .modal[open] {
    bottom: calc(env(safe-area-inset-bottom) + 10px + var(--toetsenbord, 0px));
    max-height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 20px - var(--toetsenbord, 0px));
    transition: max-height .28s cubic-bezier(.2, .8, .2, 1), bottom .28s cubic-bezier(.2, .8, .2, 1);
  }
}

/* Berichtmenu zoals WhatsApp: bericht licht op, emoji's erboven, klein lijstje eronder (chat.js) */
.bericht-menu { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; overflow: hidden; }
.bericht-menu::backdrop { background: rgba(23, 35, 29, .28); }
.bericht-menu[open] > * { position: absolute; animation: menu-in .18s cubic-bezier(.2, .8, .2, 1) both; }
.bericht-menu .bericht-menu-emoji { display: flex; gap: 2px; width: auto; padding: 5px 6px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 8px 28px rgba(0, 0, 0, .18); transform-origin: left bottom; }
.bericht-menu.mij .bericht-menu-emoji { transform-origin: right bottom; }
.bericht-menu .bericht-menu-emoji button { width: 40px; height: 40px; background: transparent; font-size: 1.5rem; transition: transform .12s ease; }
.bericht-menu .bericht-menu-emoji button:active { transform: scale(1.25); }
.bericht-menu .bericht-menu-emoji button.gekozen { background: var(--lime); }
.bericht-menu-bubbel { display: flex; overflow: hidden; pointer-events: auto; }
.bericht-menu-bubbel.mij { justify-content: flex-end; }
.bericht-menu-bubbel .chat-bubbel { max-width: 100%; box-shadow: 0 6px 22px rgba(0, 0, 0, .16); }
.bericht-menu .bericht-menu-acties { display: grid; gap: 0; width: 220px; padding: 4px 0; border-radius: 14px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); text-align: left; transform-origin: top left; animation-delay: .03s; }
.bericht-menu.mij .bericht-menu-acties { transform-origin: top right; }
.bericht-menu .bericht-menu-acties button { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: 0 16px; border-radius: 0; font-weight: 600; }
.bericht-menu .bericht-menu-acties button + button { border-top: 1px solid var(--line); }
.bericht-menu .bericht-menu-acties svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes menu-in { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: scale(1); } }
.bericht-menu-bubbel .chat-regel { width: 100%; margin: 0; }

/* =====================================================================
   SOEPELER TIKKEN EN BEWEGEN (zoals in WhatsApp en andere iOS-apps)
   - Geen grijze flits en geen vertraging bij tikken
   - Knoppen geven direct terug: iets kleiner (knoppen) of iets donkerder (rijen)
   - Schermen en vensters komen zacht in beeld in plaats van ineens
   AANPASSEN: --tik-snel en --beweeg bepalen hoe snel het voelt
   ===================================================================== */
:root { --tik-snel: .1s; --beweeg: cubic-bezier(.2, .8, .2, 1); }
html { -webkit-tap-highlight-color: transparent; }
button, a, label, summary, select, [role="button"], [data-gesprek-open], [data-profiel-id] { touch-action: manipulation; }

/* Knoppen: kleine indruk-beweging. 'scale' werkt naast een bestaande transform, dus niets verspringt */
button:not(:disabled), .primary, .secondary, .light-button, a.primary, a.secondary, label.avatar-knop, label.bestand-kies {
  transition: scale var(--tik-snel) ease, background-color .15s ease, color .15s ease, opacity .15s ease, box-shadow .15s ease;
}
button:not(:disabled):active, a.primary:active, a.secondary:active, label.avatar-knop:active, label.bestand-kies:active { scale: .96; }
/* Grote knoppen en volle breedte: minder ver indrukken, anders voelt het wiebelig */
.submit-round:active, .wide:active, .vaste-knop button:active, .primary.wide:active { scale: .985 !important; }
/* Rijen in lijsten: iets donkerder, zoals een lijst in iOS */
.chat-rij, .chat-keuze, .instellingen-lijst > button, .friend-list article, .acties-venster button, .bericht-menu-acties button { transition: background-color .12s ease; }
.chat-rij:active, .chat-keuze:active, .instellingen-lijst > button:active, .acties-venster .modal-inhoud button:active, .bericht-menu-acties button:active { scale: 1 !important; background-color: rgba(23, 35, 29, .07) !important; }
/* Navigatie onderin: icoon veert even mee */
.mobile-nav button:active svg { scale: .88; }
.mobile-nav button svg { transition: scale var(--tik-snel) ease; }

/* Schermen: zacht inschuiven in plaats van een harde wissel */
.view.active { animation: scherm-in .22s var(--beweeg) both; }
@keyframes scherm-in { from { opacity: 0; translate: 0 6px; } to { opacity: 1; translate: 0 0; } }
/* Gesprek op de telefoon: schuift van rechts in beeld, zoals een chat in WhatsApp */
@media (max-width: 820px) {
  body.in-gesprek #gesprek-view.active { animation: van-rechts .26s var(--beweeg) both; }
}
@keyframes van-rechts { from { translate: 28% 0; opacity: .4; } to { translate: 0 0; opacity: 1; } }

/* Vensters: op de telefoon van onderen omhoog, op een groot scherm zacht vergroten */
.modal[open]:not(.drive-venster.geen-animatie) { animation: venster-in .24s var(--beweeg) both; }
.modal[open]::backdrop { animation: achtergrond-in .2s ease both; }
@keyframes venster-in { from { opacity: 0; translate: 0 18px; scale: .985; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes achtergrond-in { from { opacity: 0; } to { opacity: 1; } }

/* Like: hartje springt even op */
[data-like][aria-pressed="true"] svg { animation: hart-op .35s var(--beweeg); }
@keyframes hart-op { 0% { scale: 1; } 40% { scale: 1.3; } 100% { scale: 1; } }

/* Nieuw chatbericht: komt zacht binnen */
.chat-regel.nieuw { animation: bericht-in .22s var(--beweeg) both; }
@keyframes bericht-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  button:active, .view.active, .modal[open], .chat-regel.nieuw { animation: none !important; scale: 1 !important; translate: none !important; }
}

/* GIF in de chat: zonder kader, zoals een foto */
.chat-bubbel.met-gif { padding: 4px; }
.chat-gif { display: block; width: min(220px, 60vw); height: auto; max-height: 260px; object-fit: cover; border-radius: 12px; background: #e9ece6; }

#feed-view { position: relative; }
/* In de app: geen eigen 'stuiter' van iOS bovenin, anders trekt de pagina zelf mee */
html.native-app, html.native-app body { overscroll-behavior-y: none; }

/* Trekken om te verversen (app.js): rond bolletje dat meekomt en draait */
.ververs-bol { position: fixed; z-index: 30; left: 50%; top: calc(env(safe-area-inset-top) + 64px); width: 36px; height: 36px; margin-left: -18px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .16); display: grid; place-items: center; opacity: 0; translate: 0 calc(var(--trek, 0px) - 40px); pointer-events: none; }
.ververs-bol.zichtbaar { opacity: 1; }
.ververs-bol.loslaten { transition: translate .25s var(--beweeg, ease), opacity .2s ease; }
.ververs-bol span { width: 18px; height: 18px; border: 2.5px solid var(--green-700); border-right-color: transparent; border-radius: 50%; rotate: var(--draai, 0deg); transition: border-color .15s; }
.ververs-bol.klaar span { border-color: var(--green-800); border-right-color: transparent; }
.ververs-bol.draait span { animation: ververs-draai .7s linear infinite; }
@keyframes ververs-draai { to { rotate: 360deg; } }
@media (min-width: 821px) { .ververs-bol { display: none; } }

/* Horizontaal vegen is van de app zelf (terug uit een gesprek), niet van de browser */
html, body { overscroll-behavior-x: none; }
body.in-gesprek #gesprek-view { touch-action: pan-y; }

/* Club in het clubhuis (club.js) */
.club-feed-kop { display: flex; align-items: center; gap: 12px; padding: 14px 16px; margin-bottom: 12px; border-radius: 18px; background: var(--green-800, #18513f); color: #fff; }
.club-feed-kop > span:nth-child(2) { display: grid; flex: 1; min-width: 0; }
.club-feed-kop strong { font-size: 1.05rem; }
.club-feed-kop small { color: #d6e6dc; }
.club-feed-kop .link-knop { color: var(--lime); font-weight: 800; }
.club-feed-kop .club-kaart-icoon { background: rgba(255, 255, 255, .14); color: var(--lime); }
.club-feed-lijst { display: grid; gap: 12px; }
.filter-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.filter-chips::-webkit-scrollbar { display: none; }
.filter-chip { flex: 0 0 auto; white-space: nowrap; }
.club-feed-kop svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Melding binnen de app (push.js): balk bovenin, zonder geluid */
.app-melding { position: fixed; z-index: 300; left: 10px; right: 10px; top: calc(env(safe-area-inset-top) + 8px); display: grid; gap: 2px; padding: 12px 16px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, .18); text-align: left; font: inherit; color: var(--ink); cursor: pointer; translate: 0 calc(-100% - 30px); transition: translate .28s cubic-bezier(.2, .8, .2, 1); }
.app-melding.zichtbaar { translate: 0 0; }
.app-melding strong { font-size: .92rem; }
.app-melding span { color: var(--muted); font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 821px) { .app-melding { left: auto; width: 380px; } }

/* =====================================================================
   WELKOM (welkom.js): eerste keer openen en de uitleg vóór de meldingenvraag
   ===================================================================== */
.welkom-venster { padding: 24px 22px calc(22px + env(safe-area-inset-bottom)); }
.welkom-venster h2 { margin: 4px 0 8px; font-size: 1.55rem; line-height: 1.2; }
.welkom-stappen { display: flex; gap: 6px; margin-bottom: 18px; }
.welkom-stappen i { flex: 1; height: 4px; border-radius: 4px; background: var(--line); transition: background-color .25s ease; }
.welkom-stappen i.aan { background: var(--green-700); }
.welkom-tekst { margin: 0 0 16px; color: var(--ink); font-size: 1rem; line-height: 1.5; }
.welkom-klein { margin: -6px 0 16px; color: var(--muted); font-size: .85rem; }
.welkom-deel { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.welkom-deel > * { flex: 1 1 140px; justify-content: center; text-align: center; }
.welkom-zoek { margin: 4px 0 10px; }
.welkom-zoek input { border: 0 !important; padding: 0 !important; font-size: 1rem; outline: none; }
.welkom-venster .friend-list:empty { display: none; }
.welkom-knoppen { display: grid; gap: 4px; margin-top: 18px; justify-items: center; }
.welkom-knoppen .primary { width: 100%; }
.welkom-bel { display: grid; place-items: center; width: 64px; height: 64px; margin: 10px 0 14px; border-radius: 50%; background: var(--green-100); color: var(--green-800); }
.welkom-bel svg { width: 30px; height: 30px; }
.welkom-overslaan { display: block; margin: 8px auto 0; }
.modal label.welkom-zoek { display: flex; flex-direction: row; gap: 10px; margin: 4px 0 10px; color: var(--muted); }
.welkom-zoek svg { flex: none; width: 18px; height: 18px; }
.welkom-knoppen .primary, .welkom-deel .primary, .welkom-deel .secondary { min-height: 48px; padding: 12px 18px; font-size: 1rem; }

/* Clubkanaal zonder toegang (club.js, clubToegangHtml) */
.club-toegang { display: grid; justify-items: start; gap: 10px; padding: 18px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.club-toegang p { margin: 0; color: var(--ink); font-size: .95rem; line-height: 1.5; }

/* =====================================================================
   OFFLINE (offline.js): balk "Geen verbinding" en het teruggezette concept
   ===================================================================== */
.offline-balk { position: fixed; left: 12px; right: 12px; top: calc(env(safe-area-inset-top) + 64px); z-index: 60; padding: 10px 14px; border-radius: 14px; background: var(--ink); color: #fff; font-size: .9rem; font-weight: 650; box-shadow: var(--shadow); text-align: center; transform: translateY(-16px); opacity: 0; pointer-events: none; transition: transform .25s var(--beweeg, ease), opacity .2s ease; }
.offline-balk.zichtbaar { transform: none; opacity: 1; }
.concept-melding { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 12px; background: var(--green-100); color: var(--green-900); font-size: .9rem; font-weight: 650; }
.concept-melding .link-knop { padding: 4px 0; }

/* =====================================================================
   LADEN: grijze voorbeeldkaarten (app.js, skeletHtml)
   ===================================================================== */
.skelet { display: grid; gap: 14px; }
.skelet[hidden] { display: none; }
.skelet i { display: block; border-radius: 8px; background: linear-gradient(90deg, #e6e9e3 0%, #f1f3ee 50%, #e6e9e3 100%); background-size: 200% 100%; animation: skelet-glans 1.3s ease-in-out infinite; }
.skelet-kaart { display: grid; gap: 12px; padding: 16px; border-radius: var(--radius); background: #fff; }
.skelet-kop, .skelet-rij { display: flex; align-items: center; gap: 12px; }
.skelet-kop > span, .skelet-rij > span { display: grid; flex: 1; gap: 7px; }
.skelet-rij { padding: 10px 4px; }
.skelet .skelet-rond { width: 42px; height: 42px; flex: none; border-radius: 50%; }
.skelet .skelet-regel { height: 12px; width: 70%; }
.skelet .skelet-regel.kort { width: 40%; }
.skelet .skelet-blok { height: 220px; border-radius: 14px; }
.skelet-bubbel { max-width: 70%; padding: 12px 14px; border-radius: 16px; background: #fff; }
.skelet-bubbel .skelet-regel { width: 160px; }
.skelet-bubbel.van-mij { justify-self: end; background: var(--green-100); }
@keyframes skelet-glans { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skelet i { animation: none; } }
.lijst-einde { margin-top: 14px; }
.meer-knop { justify-self: center; margin: 4px auto 0; }
.uitnodig-kaart.uitnodig-onder { margin-top: 22px; }
#plan-view .baan-zoek-knop { margin-top: 18px; }
/* Profielfoto op Mijn spel opent de instellingen */
.avatar-knop-instellingen { position: relative; padding: 0; border: 0; background: transparent; border-radius: 50%; cursor: pointer; }
.avatar-knop-instellingen b { position: absolute; right: -2px; bottom: -2px; display: grid; place-items: center; width: 26px; height: 26px; border: 2px solid var(--green-900); border-radius: 50%; background: var(--lime); color: var(--green-950); }
.avatar-knop-instellingen b svg { width: 14px; height: 14px; }
.spel-instellingen { margin-top: 18px; }

/* =====================================================================
   CHAT: citeren, spraakberichten, vinkjes, typen en zoeken (chat.js)
   ===================================================================== */
.chat-citaat { display: grid; gap: 1px; width: 100%; margin: 2px 0 6px; padding: 6px 9px; border: 0; border-left: 3px solid var(--green-700); border-radius: 8px; background: rgba(18, 63, 50, .07); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.chat-regel.mij .chat-citaat { background: rgba(18, 63, 50, .1); }
.chat-citaat strong { font-size: .78rem; color: var(--green-800); }
.chat-citaat span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: .85rem; color: var(--muted); }
.chat-regel.uitgelicht .chat-bubbel { animation: chat-licht 1.6s ease; }
@keyframes chat-licht { 0%, 40% { box-shadow: 0 0 0 4px rgba(216, 243, 93, .9); } 100% { box-shadow: none; } }

.chat-audio { display: flex; align-items: center; gap: 10px; min-width: 200px; padding: 2px 0; }
.chat-audio-knop { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--green-800); color: #fff; cursor: pointer; }
.chat-audio-knop svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 2; }
.chat-audio-balk { position: relative; flex: 1; height: 4px; border-radius: 4px; background: rgba(18, 63, 50, .18); overflow: hidden; }
.chat-audio-balk i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--green-800); transition: width .25s linear; }
.chat-audio small { color: var(--green-900); font-size: .8rem; font-variant-numeric: tabular-nums; }
.chat-audio audio { display: none; }

.chat-vink { margin-left: 4px; font-size: .75rem; letter-spacing: -2px; color: var(--muted); }
.chat-vink.gelezen { color: #1f7a4d; font-weight: 800; }
#gesprek-sub.typt { color: var(--green-700); font-weight: 750; }

.gesprek-antwoord { display: flex; align-items: center; gap: 8px; padding: 8px 4px 0; border-top: 1px solid var(--line); }
.gesprek-antwoord-tekst { display: grid; flex: 1; min-width: 0; padding: 6px 10px; border-left: 3px solid var(--green-700); border-radius: 8px; background: rgba(18, 63, 50, .07); }
.gesprek-antwoord-tekst strong { font-size: .8rem; color: var(--green-800); }
.gesprek-antwoord-tekst span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .85rem; color: var(--muted); }
.gesprek-antwoord .icon-button { width: 36px; height: 36px; }

.gesprek-mic { flex: 0 0 auto; }
.gesprek-mic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.gesprek-form.heeft-tekst .gesprek-mic { display: none; }
.gesprek-form.neemt-op { display: none; }
.gesprek-opname { display: flex; align-items: center; gap: 10px; padding: 12px 4px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--cream); font-weight: 750; font-variant-numeric: tabular-nums; }
.gesprek-opname[hidden] { display: none; }
.opname-uitleg { flex: 1; color: var(--muted); font-size: .85rem; font-weight: 600; }
.opname-stip { width: 12px; height: 12px; border-radius: 50%; background: #d93025; animation: opname-knipper 1s ease-in-out infinite; }
@keyframes opname-knipper { 50% { opacity: .3; } }

.chat-zoek { margin: 0 0 12px; }
.chat-zoek input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font: inherit; font-size: 1rem; }
#chat-zoek-uitkomst mark { padding: 0 2px; border-radius: 3px; background: var(--lime); color: inherit; }
.gi-week { margin: 14px 0 4px !important; padding: 12px 0 !important; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

/* Terugvegen uit een gesprek (chat.js): de chatlijst ligt eronder klaar en schuift mee */
@media (max-width: 820px) {
  body.veeg-terug #chat-view { display: block; animation: none; }
  body.veeg-terug .mobile-header, body.veeg-terug .mobile-nav, body.veeg-terug #chat-view { will-change: translate; }
  body.veeg-terug #gesprek-view.active { will-change: translate; }
  .veeg-schaduw { position: fixed; inset: 0; z-index: 35; background: var(--green-950); opacity: 0; pointer-events: none; }
}
body.geen-schermanimatie .view.active { animation: none !important; }

/* Zoekveld in een venster (Nieuw gesprek, welkom): icoon en veld naast elkaar.
   Labels in een venster staan standaard onder elkaar; dit veld niet. */
.modal label.search-box { display: flex; flex-direction: row; align-items: center; gap: 10px; margin: 14px 0; padding: 0 14px; min-height: 48px; color: var(--muted); }
.modal label.search-box svg { flex: none; width: 18px; height: 18px; }
.modal label.search-box input { flex: 1; min-width: 0; height: 46px; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; font-size: 1rem; }

/* Datumvelden op de iPhone: even hoog als de keuzelijsten ernaast.
   iOS geeft een datumveld anders een eigen, hogere vorm. */
input[type="date"], input[type="time"], input[type="datetime-local"] { -webkit-appearance: none; appearance: none; min-width: 0; }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { text-align: left; margin: 0; }
.beschikbaar-form { align-items: end; }
.beschikbaar-form input, .beschikbaar-form select { box-sizing: border-box; width: 100%; height: 48px; min-height: 48px; line-height: 1.2; }
.beschikbaar-form input[type="date"] { display: flex; align-items: center; }

/* Melding bovenin (push.js): helemaal uit beeld als hij weg is, ook onder de notch */
.app-melding { translate: 0 calc(-100% - env(safe-area-inset-top) - 40px); visibility: hidden; transition: translate .28s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .28s; }
.app-melding.zichtbaar { translate: 0 0; visibility: visible; transition: translate .28s cubic-bezier(.2, .8, .2, 1), visibility 0s; }

/* =====================================================================
   FEEDBACK 26 OKT (SQL 39): datumvelden, Deel je rondje, meerdere
   foto's, scorekaart per hole, tijdelijke flightgroep
   ===================================================================== */
/* Datum en tijd: zwarte tekst (iOS kleurt ze anders blauw) */
input[type="date"], input[type="time"], input[type="datetime-local"] { color: var(--ink); -webkit-text-fill-color: var(--ink); }
input[type="date"]::-webkit-date-and-time-value, input[type="time"]::-webkit-date-and-time-value { color: var(--ink); -webkit-text-fill-color: var(--ink); text-align: left; }

/* Deel je rondje: alleen omhoog en omlaag scrollen, niet opzij */
#round-dialog { overflow-x: hidden; overscroll-behavior-x: none; }
#round-form { overflow-x: clip; } /* clip, geen hidden: anders blijven kop en Plaats-knop niet staan */
#round-form { touch-action: pan-y; max-width: 100%; }
#round-form .medespelers, #round-form .foto-voorbeelden { touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
#round-form .competitie-ronde select, #round-form .form-row > * { min-width: 0; }

/* Medespelers: ronde foto's (geen rand die de foto vierkant laat lijken) en zoeken */
.medespeler .avatar { border: 0; background-origin: border-box; }
.medespeler input:checked + .avatar { border: 0; box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--green-700); }
.modal label.medespeler, .medespelers .medespeler-zoek { padding-top: 5px; }
.medespelers .medespeler-zoek { display: grid; justify-items: center; gap: 4px; flex: 0 0 auto; width: 64px; margin: 0; padding-left: 0; padding-right: 0; padding-bottom: 0; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: .75rem; font-weight: 700; cursor: pointer; }
.medespeler-zoek .zoek-avatar { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: #eef2ee; color: var(--green-800); }
.medespeler-zoek .zoek-avatar svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.modal label.medespeler-zoekveld { margin: 6px 0 4px; }
.medespelers label.medespeler[hidden] { display: none; }

/* Geplande ronde: Neem over of Neem niet over */
.afspraak-tip-knoppen { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.afspraak-tip-knoppen .link-knop { color: var(--green-800); font-size: .84rem; }

/* Meerdere foto's kiezen */
.foto-voorbeelden { display: flex; gap: 8px; overflow-x: auto; margin: -4px 0 14px; padding: 2px 0 4px; scrollbar-width: none; }
.foto-voorbeelden::-webkit-scrollbar { display: none; }
.foto-voorbeelden[hidden] { display: none; }
.foto-voorbeeld { position: relative; flex: 0 0 auto; width: 76px; height: 95px; border-radius: 10px; overflow: hidden; background: #e8ece8; }
.foto-voorbeeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-voorbeeld button { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 50%; background: rgba(12, 47, 37, .78); color: #fff; font-size: 1rem; line-height: 1; cursor: pointer; }

/* Carrousel in de feed (zoals Instagram) */
.foto-carrousel { display: flex; width: 100%; height: 100%; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.foto-carrousel::-webkit-scrollbar { display: none; }
.foto-carrousel img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: cover; display: block; scroll-snap-align: center; scroll-snap-stop: always; }
.foto-carrousel:focus-visible { outline: 3px solid var(--lime); outline-offset: -3px; }
.foto-teller { position: absolute; top: 12px; right: 12px; padding: 4px 9px; border-radius: 999px; background: rgba(12, 47, 37, .72); color: #fff; font-size: .75rem; font-weight: 800; pointer-events: none; }
.foto-stippen { display: flex; justify-content: center; gap: 5px; padding: 9px 0 0; }
.foto-stippen i { width: 6px; height: 6px; border-radius: 50%; background: #c9d2cb; transition: background .2s, transform .2s; }
.foto-stippen i.actief { background: var(--green-700); transform: scale(1.2); }

/* Competitie-uitslag als band onder het beeld (app.js, vulUitslagen) */
.uitslag-band { display: flex; align-items: center; gap: 12px; width: 100%; margin: 2px 0 10px; padding: 10px 12px; border: 0; border-radius: 16px; background: var(--green-900); color: #fff; font: inherit; text-align: left; }
button.uitslag-band { cursor: pointer; }
.ub-marge { flex: none; display: grid; place-items: center; min-width: 58px; height: 52px; padding: 0 8px; border-radius: 12px; background: var(--lime); color: var(--green-950); font-family: var(--font-kop); font-weight: 900; font-size: 1.6rem; line-height: 1; }
.ub-marge.klein { font-size: 1.15rem; }
.ub-tekst { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ub-tekst strong { font-size: .95rem; line-height: 1.25; overflow-wrap: anywhere; }
.ub-tekst small { color: #c9dcd2; font-size: .76rem; overflow-wrap: anywhere; }
.ub-pil { justify-self: start; margin-top: 4px; padding: 3px 8px; border-radius: 999px; background: #f1f4f1; color: var(--muted); font-style: normal; font-size: .7rem; font-weight: 800; }
.uitslag-band svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; opacity: .7; }
.uitslag-band.wacht { border: 1.5px dashed #b9c6bd; background: #fff; color: var(--ink); }
.uitslag-band.wacht .ub-marge { background: var(--green-100); }
.uitslag-band.wacht small { color: var(--muted); }

/* Dezelfde uitslag als laatste slide, als "ook als foto" aan staat (stijl van de scorekaart zonder foto) */
.foto-carrousel > .scorekaart, .foto-carrousel > .uitslag-slide { position: relative; inset: auto; flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: center; scroll-snap-stop: always; }
.uitslag-slide { container-type: inline-size; display: flex; flex-direction: column; justify-content: space-between; padding: 24px 22px; overflow: hidden; color: #fff; background: radial-gradient(120% 70% at 85% 0%, #2a7a5d 0%, var(--green-900) 55%, var(--green-950) 100%); }
.uitslag-slide .sk-merk { display: block; }
.us-eyebrow { display: block; margin-top: 6px; color: #c9dcd2; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.us-midden { position: relative; z-index: 2; display: grid; justify-items: start; }
.us-groot { display: block; font-family: var(--font-kop); font-weight: 900; color: var(--lime); font-size: clamp(4.5rem, 30cqi, 9rem); line-height: .85; letter-spacing: -.02em; }
.us-groot small { display: block; margin-top: 6px; color: #fff; font-size: clamp(1.3rem, 7cqi, 2rem); letter-spacing: 0; }
.us-zin { margin-top: 10px; font-family: var(--font-kop); font-weight: 900; font-size: clamp(1.4rem, 8cqi, 2.2rem); line-height: 1.05; overflow-wrap: anywhere; }
.us-duo { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.us-duo .avatar { width: 42px; height: 42px; font-size: .85rem; }
.us-duo .us-ander { background: linear-gradient(135deg, #f7d9b9, var(--orange)); color: var(--green-950); }
.us-duo .us-winnaar { box-shadow: 0 0 0 3px var(--lime); }
.us-duo em { font-style: normal; font-weight: 800; color: #c9dcd2; font-size: .85rem; }
.us-voet { position: relative; z-index: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.us-voet small { color: #c9dcd2; font-size: .8rem; margin-right: auto; }
.us-pil { padding: 5px 11px; border-radius: 999px; border: 1px dashed rgba(255, 255, 255, .55); background: rgba(255, 255, 255, .12); color: #fff; font-weight: 800; font-size: .78rem; white-space: nowrap; }
.us-pil.ok { border-color: transparent; background: var(--lime); color: var(--green-950); }
.us-heuvel { position: absolute; left: -10%; right: -10%; bottom: -46%; height: 62%; border-radius: 50% 50% 0 0; background: #246c53; opacity: .45; pointer-events: none; }
.foto-score { transition: opacity .2s; }
.post-media.op-uitslag .foto-score { opacity: 0; }

.sk-tabel .fw-ja { color: #2f6f2d; font-weight: 900; }
.sk-tabel .fw-nee { color: #a3541f; font-weight: 900; }

/* Tijdelijke flightgroep */
.tijdelijk-balk { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 12px 0; padding: 10px 12px; border: 1px solid #c8dbd0; border-radius: 12px; background: #edf6f1; color: var(--green-900); font-size: .82rem; font-weight: 650; }
.groep-hero .tijdelijk-balk { background: rgba(255, 255, 255, .92); }
.gesprek-tijdelijk { padding: 0 12px; }
.gesprek-tijdelijk[hidden] { display: none; }
.gesprek-tijdelijk .tijdelijk-balk { margin: 8px 0 0; }
.tijdelijk-label { display: inline-block; margin-right: 2px; padding: 1px 6px; border-radius: 999px; background: #fff1c9; color: #6b4b00; font-size: .7rem; font-weight: 800; }

/* Deel je rondje op de telefoon: schermvullend in plaats van een pop-up.
   De kop met het kruisje blijft bovenin staan, de knop Plaats blijft onderin. */
@media (max-width: 820px) {
  #round-dialog[open], html.native-app #round-dialog[open] {
    inset: 0;
    width: 100%;
    max-width: 100%;
    height: 100dvh;
    max-height: 100dvh;
    margin: 0;
    border-radius: 0;
    box-shadow: none;
    transition: height .28s cubic-bezier(.2, .8, .2, 1);
  }
  html.native-app #round-dialog[open] { bottom: auto; height: calc(100dvh - var(--toetsenbord, 0px)); max-height: calc(100dvh - var(--toetsenbord, 0px)); }
  #round-dialog[open]:not(.geen-animatie) { animation: rondje-omhoog .28s cubic-bezier(.2, .8, .2, 1) both; }
  #round-form { min-height: 100%; padding: 0 18px; }
  #round-form .modal-head {
    position: sticky; top: 0; z-index: 4;
    margin: 0 -18px 4px; padding: calc(env(safe-area-inset-top) + 12px) 18px 12px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  #round-form .vaste-knop { margin: 8px -18px 0; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); }
}
@keyframes rondje-omhoog { from { transform: translateY(100%); } to { transform: none; } }

/* Lege tekst in een feedlijst: zelfde inspringing als de koppen (de lijst zelf loopt op de telefoon tot de rand) */
.feed-list > .leeg-tekst { padding: 0 15px; }
@media (min-width: 821px) { .feed-list > .leeg-tekst { padding: 0; } }

/* Gepland rondje: kaart altijd binnen het scherm, knoppen in één rustige rij.
   Wijzigen en annuleren zitten achter het tandwiel rechts. */
.plan-lijst > *, #plan-uitnodigingen .plan-lijst > * { min-width: 0; max-width: 100%; }
.afspraak { width: 100%; }
.afspraak-extra { align-items: center; flex-wrap: nowrap; }
.afspraak-extra button { white-space: nowrap; }
.afspraak-extra .afspraak-meer { margin-left: auto; width: 36px; height: 36px; justify-content: center; padding: 0; border-radius: 50%; }
.afspraak-extra .afspraak-meer svg { width: 18px; height: 18px; }

/* =====================================================================
   OPEN RONDJES (44_open_rondjes.sql, samen.js)
   ===================================================================== */
.open-rondje { margin: 13px 0; padding: 12px 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.open-rondje > .vinkje-rij { margin: 0; }
.open-rondje > .vinkje-rij strong { display: block; color: var(--ink); }
.open-rondje-velden { display: grid; gap: 10px; margin-top: 12px; }
.open-rondje-velden .feedback-intro { margin: 0; }
.sectie-uitleg { margin: -4px 0 10px; color: var(--muted); font-size: .84rem; }
.past-label { display: inline-block; margin: 8px 0 0; padding: 4px 10px; border-radius: 999px; background: var(--lime); color: var(--green-900); font-size: .76rem; font-weight: 800; }
.open-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.open-acties .primary, .open-acties .secondary { min-height: 44px; }
.open-status { color: var(--green-700); font-size: .85rem; font-weight: 800; }
.open-noot { margin: 6px 0 0; color: var(--muted); font-size: .78rem; }
.aanvragen { display: grid; gap: 8px; margin: 12px 0 4px; padding: 11px 12px; border-radius: 12px; background: var(--green-100); }
.aanvragen > strong { color: var(--green-800); font-size: .82rem; }
.aanvraag { display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; }
.aanvraag-tekst { min-width: 0; }
.aanvraag-tekst b { display: block; font-size: .9rem; }
.aanvraag-tekst small { color: var(--muted); font-size: .76rem; }
.aanvraag-tekst p { margin: 2px 0 0; font-size: .82rem; }
.aanvraag-knoppen { grid-column: 1 / -1; display: flex; gap: 8px; }
.aanvraag-knoppen button { flex: 1; min-height: 44px; }

/* =====================================================================
   ZAKELIJKE ACCOUNTS (45_zakelijk.sql, zakelijk.js)
   Herkenbaar aan het label "Zakelijk" en een vierkant logo.
   ===================================================================== */
.zak-label { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 6px; background: var(--green-900); color: var(--lime); font-size: .68rem; font-weight: 800; letter-spacing: .01em; vertical-align: middle; white-space: nowrap; }
.bedrijf-logo { border-radius: 12px !important; }
.bedrijf-logo.groot { width: 64px; height: 64px; font-size: 1.3rem; }
.zak-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.zak-filters button { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--ink); font-weight: 700; }
.zak-filters button.actief { border-color: var(--green-900); background: var(--green-900); color: var(--white); }
.bedrijf-lijst { display: grid; gap: 10px; }
.bedrijf-kaart { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; align-items: start; width: 100%; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); color: var(--ink); text-align: left; }
.bedrijf-kaart .past-label { grid-column: 2; justify-self: start; margin: 0; }
.bedrijf-tekst { display: grid; gap: 3px; min-width: 0; }
.bedrijf-tekst .zak-label { margin-left: 0; justify-self: start; }
.bedrijf-tekst small { color: var(--muted); font-size: .78rem; }
.bedrijf-kort { color: var(--ink); font-size: .84rem; }
.bedrijf-kop { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.bedrijf-kop h2 { margin: 0 0 4px; }
.bedrijf-kop .zak-label { margin-left: 0; }
.bedrijf-kop small { display: block; margin-top: 4px; color: var(--muted); font-size: .8rem; }
.bedrijf-omschrijving { white-space: pre-line; font-size: .92rem; }
.bedrijf-diensten { display: grid; gap: 8px; margin: 0 0 14px; padding: 0; list-style: none; }
.bedrijf-diensten li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 12px; background: var(--cream); }
.bedrijf-diensten li small { display: block; color: var(--muted); font-size: .78rem; }
.bedrijf-diensten li span { font-weight: 800; white-space: nowrap; }
.bedrijf-contact { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 12px; }
.bedrijf-contact a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 12px; font-weight: 800; text-decoration: none; }
.dienst-lijst { display: grid; gap: 10px; margin-bottom: 8px; }
.dienst-rij { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; }
.dienst-rij input[name="d_uitleg"] { grid-column: 1 / -1; }
.afspraak-acties.open-acties [data-open-mee] { flex: 0 1 auto; padding: 0 18px; border-color: var(--lime-dark); background: var(--lime); color: var(--green-900); font-weight: 800; }

/* =====================================================================
   iPhone Duo, iPad en Split View
   Links en rechts kunnen verschillen (vouw, camera, statusbalk opzij):
   elke kant apart. Op gewone iPhones staand en op desktop zijn deze
   randen 0, dan verandert er niets.
   ===================================================================== */
:root {
  --veilig-boven: env(safe-area-inset-top, 0px);
  --veilig-onder: env(safe-area-inset-bottom, 0px);
  --veilig-l: env(safe-area-inset-left, 0px);
  --veilig-r: env(safe-area-inset-right, 0px);
}
.app-shell, .auth-screen { min-height: 100dvh; }
.auth-screen { padding-left: max(24px, var(--veilig-l)); padding-right: max(24px, var(--veilig-r)); }

/* Zijbalkweergave (iPad, Duo binnenscherm liggend): niet onder statusbalk of camera */
@media (min-width: 821px) {
  .app-shell {
    padding: max(24px, calc(var(--veilig-boven) + 12px)) max(24px, calc(var(--veilig-r) + 12px)) max(24px, calc(var(--veilig-onder) + 12px)) max(24px, calc(var(--veilig-l) + 12px));
  }
  .sidebar, .rightbar {
    top: max(24px, calc(var(--veilig-boven) + 12px));
    height: calc(100vh - max(24px, calc(var(--veilig-boven) + 12px)) - max(24px, calc(var(--veilig-onder) + 12px)));
    height: calc(100dvh - max(24px, calc(var(--veilig-boven) + 12px)) - max(24px, calc(var(--veilig-onder) + 12px)));
  }
  /* Lage schermen (Duo opengevouwen liggend, iPad liggend met toetsenbord): zijbalk scrolt zelf */
  .sidebar { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
  .sidebar::-webkit-scrollbar { display: none; }
  .sidebar > * { flex-shrink: 0; }
}
/* Lage schermen met zijbalk (Duo opengevouwen, iPad mini liggend): zijbalk compacter,
   zodat Deel je rondje, Volgende rondje en je profiel zonder scrollen passen */
@media (min-width: 821px) and (max-height: 820px) {
  .sidebar { padding: 18px 16px; }
  .primary-nav { gap: 2px; margin: 16px 0 12px; }
  .nav-item { padding: 7px 12px; }
  .share-round { padding: 11px; margin-bottom: 10px; }
  .sidebar-card { padding: 11px 14px; }
  .sidebar-card > span { display: none; }
  .profile-mini { margin-top: 10px; }
}
@media (min-width: 821px) {
  .app-melding { right: max(10px, calc(var(--veilig-r) + 10px)); }
}

/* Telefoonweergave: inhoud, kop en vensters binnen de linker- en rechterrand */
@media (max-width: 820px) {
  .main-column { padding-left: calc(15px + var(--veilig-l)); padding-right: calc(15px + var(--veilig-r)); }
  .mobile-header {
    margin-left: calc(-15px - var(--veilig-l)); margin-right: calc(-15px - var(--veilig-r));
    padding-left: calc(16px + var(--veilig-l)); padding-right: calc(16px + var(--veilig-r));
  }
  body.in-gesprek #gesprek-view.active { padding-left: calc(12px + var(--veilig-l)); padding-right: calc(12px + var(--veilig-r)); }
  .modal { width: min(560px, calc(100% - 24px - var(--veilig-l) - var(--veilig-r))); }
  #round-form { padding-left: calc(18px + var(--veilig-l)); padding-right: calc(18px + var(--veilig-r)); }
  #round-form .modal-head, #round-form .vaste-knop {
    margin-left: calc(-18px - var(--veilig-l)); margin-right: calc(-18px - var(--veilig-r));
    padding-left: calc(18px + var(--veilig-l)); padding-right: calc(18px + var(--veilig-r));
  }
  .app-melding { left: calc(10px + var(--veilig-l)); right: calc(10px + var(--veilig-r)); }
}
.offline-balk { left: calc(12px + var(--veilig-l)); right: calc(12px + var(--veilig-r)); }
.cam-sluit, .chat-foto-dialog .icon-button { right: calc(14px + var(--veilig-r)); }
.sv-melden { right: calc(14px + var(--veilig-r)); }
.cam-balk { padding-left: var(--veilig-l); padding-right: var(--veilig-r); }

/* Brede telefoonweergave (Duo binnenscherm staand, iPad mini staand, Split View):
   kolom in het midden, zodat foto's in de feed niet schermhoog worden */
@media (min-width: 600px) and (max-width: 820px) {
  .main-column { max-width: calc(600px + var(--veilig-l) + var(--veilig-r)); }
}

/* Camera op een breed scherm (Duo, iPad): het voorbeeld toont precies wat
   je opneemt (staand 9:16), met zwart ernaast. Gewone iPhones zijn smaller
   dan 3:5 en houden het schermvullende voorbeeld. */
@media (min-aspect-ratio: 3/5) {
  .camera-venster::before { content: ""; position: absolute; inset: 0; z-index: 1; background: var(--green-950); }
  .cam-beeld { left: 50%; right: auto; width: auto; height: 100%; aspect-ratio: 9 / 16; transform: translateX(-50%); }
}

/* Geen inzoomen bij typen op elk aanraakscherm, ook op grote iPads */
@media (pointer: coarse) {
  input, select, textarea { font-size: 16px !important; }
}

/* Toetsenbord open in de app: het toetsenbord bedekt de thuisbalk, dus geen extra ruimte
   onder het invoerveld (chat.js zet toetsenbord-open) */
html.toetsenbord-open .gesprek-form { padding-bottom: 10px; }
/* Laag liggend scherm met zijbalk en toetsenbord open: gesprek schermvullend (chat.js zet gesprek-vol) */
body.in-gesprek.gesprek-vol #gesprek-view.active {
  position: fixed; inset: 0; z-index: 40;
  padding: env(safe-area-inset-top) calc(16px + var(--veilig-r)) 0 calc(16px + var(--veilig-l));
  background: var(--cream);
}

/* Feed op aanraakschermen met zijbalk (iPad, iPhone Duo opengevouwen). De desktop houdt 560px.
   Hoog scherm: de feed vult de hele kolom. Laag scherm (liggend): feed blijft 560px, zodat de
   foto's niet hoger worden dan het scherm, maar staat met stories en filter in het midden */
@media (min-width: 821px) and (pointer: coarse) and (min-height: 900px) {
  .feed-list { max-width: none; }
}
@media (min-width: 821px) and (pointer: coarse) and (max-height: 899px) {
  #feed-view { max-width: 560px; margin-inline: auto; }
}

/* =====================================================================
   SCOREKAART EN STATISTIEKEN (één blok, scorekaart.js)
   Eén regel per hole, zodat 18 holes kort en overzichtelijk blijven.
   Alle tikvlakken minimaal 44 punten. Breed genoeg (iPad, binnenscherm
   iPhone Duo): uit en in naast elkaar.
   ===================================================================== */
.sk-invoer { container-type: inline-size; padding: 12px 10px; }
.sk-invoer[hidden], [data-sk-manier][hidden], .sk-vraag[hidden], .sk-wissel[hidden], .sk-bron[hidden] { display: none; }
.sk-grid { display: grid; gap: 14px; margin-top: 10px; }
.sk-negen { display: grid; gap: 2px; min-width: 0; }
.sk-kop { margin: 0 0 2px; font-size: .75rem; font-weight: 800; color: var(--green-800); text-transform: uppercase; letter-spacing: .06em; }
.sk-kolommen, .sk-hole { display: grid; grid-template-columns: 20px 44px minmax(108px, 1fr) 44px 44px 44px; gap: 3px; align-items: center; }
.sk-kolommen.zonder-extra, .sk-hole.zonder-extra { grid-template-columns: 20px 44px minmax(124px, 1fr); }
.sk-negen:has(.zonder-extra) .sk-kolommen { grid-template-columns: 20px 44px minmax(124px, 1fr); }
.sk-kolommen span { color: var(--muted); font-size: .7rem; font-weight: 800; text-align: center; }
.sk-kolommen span:first-child { text-align: left; }
.sk-hole { padding: 2px 0; border-top: 1px solid #edf0ed; }
.sk-hole[data-uitkomst="onder"] .sk-stap input { background: #e6f4d9; color: #2f6f2d; }
.sk-hole[data-uitkomst="boven"] .sk-stap input { background: #fbeadf; color: #8a3e12; }
.sk-nr { display: grid; place-items: center; width: 20px; height: 22px; border-radius: 7px; background: var(--green-900); color: var(--lime); font-weight: 850; font-size: .72rem; }
.modal .sk-hole select { width: 100%; min-width: 0; height: 44px; padding: 0 2px; font-size: 16px; font-weight: 750; text-align: center; text-align-last: center; color: var(--ink); -webkit-appearance: none; appearance: none; background-image: none; }
.sk-hole .sk-fw { display: block; min-width: 0; }
.sk-hole .sk-fw[hidden] { display: block; visibility: hidden; }
.sk-stap { display: grid; grid-template-columns: 44px minmax(30px, 1fr) 44px; gap: 2px; align-items: center; }
.sk-stap button { height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--green-800); font: inherit; font-size: 1.15rem; font-weight: 850; cursor: pointer; touch-action: manipulation; }
.sk-stap button:active { background: var(--green-100); }
.modal .sk-stap input { min-width: 0; height: 44px; padding: 0 2px; font-size: 18px; font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.modal .sk-hole input::placeholder { color: #9aa49e; }
@container (min-width: 640px) { .sk-grid { grid-template-columns: 1fr 1fr; gap: 18px; } }
/* Samenvatting: loopt mee en blijft boven de knop in beeld zolang je in de kaart bezig bent */
.sk-totaal { position: sticky; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 2; min-height: 54px; margin: 10px 0 4px; padding: 9px 12px; border-radius: 12px; background: var(--green-950); color: #fff; font-variant-numeric: tabular-nums; }
.sk-totaal p { margin: 0; font-size: .84rem; font-weight: 700; line-height: 1.35; }
.sk-totaal p + p { margin-top: 2px; color: var(--lime); font-size: .9rem; font-weight: 800; }
.sk-totaal p[hidden] { display: none; }
[data-sk-manier] .extra-uitleg { color: var(--ink); }
.sk-invoer > .extra-grid { margin-top: 10px; }
.sk-wissel { display: block; min-height: 44px; padding: 10px 2px; color: var(--green-800); font-size: .88rem; }
.sk-vraag { margin: 10px 0 0; padding: 12px; border: 1px solid #f0d58a; border-radius: 12px; background: #fff8e6; }
.sk-vraag p { margin: 0 0 10px; font-size: .86rem; line-height: 1.4; color: var(--ink); }
.sk-vraag-knoppen { display: flex; flex-wrap: wrap; gap: 8px; }
.sk-vraag-knoppen button { flex: 1 1 140px; min-height: 44px; }

/* =====================================================================
   COMPETITIEBLOK IN DEEL JE RONDJE (competities.js)
   Rijen schuiven zacht open en dicht (grid 0fr naar 1fr). Een dichte
   rij is inert en telt niet mee.
   ===================================================================== */
.comp-klep { display: grid; grid-template-rows: 1fr; opacity: 1; transition: grid-template-rows .22s ease, opacity .22s ease; }
.comp-klep[data-klep="dicht"] { grid-template-rows: 0fr; opacity: 0; }
.comp-klep[data-direct] { transition: none; }
.comp-klep > div { min-height: 0; overflow: hidden; }
.comp-klep > div > .comp-ronde-rij { margin: 4px 1px 4px; }
@media (prefers-reduced-motion: reduce) { .comp-klep { transition: none; } }
.duel-vast { margin: 4px 0 0; color: var(--ink); font-size: .9rem; font-weight: 800; }
.duel-vast[hidden], .keuze-chips [hidden], .comp-anders[hidden] { display: none; }
.comp-anders { display: block; min-height: 44px; padding: 10px 2px; color: var(--green-800); font-size: .88rem; }
.daag-uit-tip { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 4px 6px; align-items: start; margin: 4px 1px 6px; padding: 10px 6px 12px 12px; border-radius: 14px; background: var(--green-100); color: var(--green-950); }
.daag-uit-tip p { margin: 0; padding-top: 2px; font-size: .88rem; line-height: 1.4; }
.daag-uit-weg { display: grid; place-items: center; width: 44px; height: 44px; margin: -8px 0 0; border: 0; background: transparent; color: var(--green-800); cursor: pointer; }
.daag-uit-weg svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.daag-uit-knoppen { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; }
.daag-uit-knoppen button { min-height: 44px; }
/* Fairway per hole: tikknop leeg, vinkje, kruisje (scorekaart.js) */
.sk-hole .sk-fw button { width: 100%; height: 44px; border: 1px solid var(--line); border-radius: 10px; background: #fafbf9; color: var(--ink); font: inherit; font-size: 1.1rem; font-weight: 850; cursor: pointer; touch-action: manipulation; }
.sk-hole .sk-fw button[value="ja"] { border-color: #7fbf58; background: #e6f4d9; color: #2f6f2d; }
.sk-hole .sk-fw button[value="nee"] { border-color: #f0c2a3; background: #fbeadf; color: #8a3e12; }
/* Melding bij "Meer toevoegen": er staat een gemeten drive klaar (drives.js) */
.meer-melding { display: block; width: fit-content; margin: 8px 0 0; padding: 6px 10px; border-radius: 10px; background: var(--green-100); color: var(--green-900); font-size: .82rem; font-weight: 800; }
.meer-melding[hidden], details[open] > summary .meer-melding { display: none; }
/* Drive per hole in de feed-scorekaart (schakelaar drive_per_hole) */
.sk-tabel .sk-drive td { font-size: .68rem; color: var(--green-800); font-weight: 700; }
.sk-totaal p[data-sk-regel="drives"] { color: #fff; font-size: .84rem; }

/* Plaatshouder zolang een foto of GIF nog laadt: nooit een leeg of donker vlak */
.post img, .chat-foto img, .chat-gif, .reactie-gif, .foto-voorbeelden img, #story-voorbeeld img, #story-voorbeeld video { background-color: var(--green-100); }

/* Green in regulation en up & down in de scorekaart: zelfde knop als de fairway (scorekaart.js) */
.sk-gir button, .sk-ud button { width: 100%; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; }
.sk-gir button[value="ja"], .sk-ud button[value="ja"] { background: #e6f4d9; color: #2f6f2d; }
.sk-gir button[value="nee"], .sk-ud button[value="nee"] { background: #fbeadf; color: #8a3e12; }
.sk-ud { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 44px; align-items: center; gap: 8px; padding: 2px 0 2px 23px; color: var(--muted); font-size: .85rem; }
.sk-ud[hidden] { display: none; }

/* Plusknop: post of live score (live.js) */
.plus-keuze { display: flex; align-items: center; gap: 14px; width: 100%; min-height: 72px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--white); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.plus-keuze svg { flex: 0 0 auto; width: 26px; height: 26px; fill: none; stroke: var(--green-900); stroke-width: 2; }
.plus-keuze span { display: grid; gap: 2px; }
.plus-keuze small { color: var(--muted); font-size: .85rem; }

/* Banner "Ga verder met je ronde" (live.js) */
.live-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; margin: 0 0 10px; padding: 12px 14px; border: 0; border-radius: 14px; background: var(--green-900); color: var(--white); font: inherit; text-align: left; cursor: pointer; }
.live-banner[hidden] { display: none; }
.live-banner span { display: grid; gap: 1px; min-width: 0; }
.live-banner small { opacity: .85; font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-banner svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--lime); stroke-width: 2.5; }

/* Live scorekaart: één hand, duimzone onderaan */
#live-view { max-width: 560px; margin-inline: auto; }
@media (max-width: 820px) {
  body.in-live .mobile-header, body.in-live .mobile-nav { display: none !important; }
  body.in-live .main-column, body.in-live .app-shell { padding-bottom: 0; }
}
.live-hole, .live-start, .live-klaar {
  display: flex; flex-direction: column; gap: 10px;
  min-height: calc(100dvh - var(--veilig-boven) - var(--veilig-onder));
  padding: calc(8px + var(--veilig-boven)) calc(14px + var(--veilig-r)) calc(12px + var(--veilig-onder)) calc(14px + var(--veilig-l));
}
.live-hole[hidden], .live-start[hidden], .live-klaar[hidden] { display: none; }
.live-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; }
.live-kop .link-knop { min-height: 44px; color: var(--green-700); font-weight: 800; text-decoration: none; }
.live-baan { flex: 1; min-width: 0; text-align: center; font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-holes { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; margin-inline: -2px; }
.live-holes::-webkit-scrollbar { display: none; }
.live-holeknop { flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--muted); font: inherit; font-weight: 700; font-size: .9rem; cursor: pointer; }
.live-holeknop.klaar { background: var(--green-100); color: var(--green-900); }
.live-holeknop.huidig { background: var(--green-900); border-color: var(--green-900); color: var(--white); }
.live-midden { display: grid; gap: 10px; align-content: start; }
.live-titel { display: flex; align-items: center; gap: 10px; }
.live-titel h1 { margin: 0; font-size: 1.7rem; }
.live-par { width: auto; height: 40px; padding: 0 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); font: inherit; font-size: 16px; font-weight: 700; }
.live-totaal { margin-left: auto; display: grid; text-align: right; }
.live-totaal small { color: var(--muted); font-size: .75rem; }
.live-totaal strong { font-variant-numeric: tabular-nums; }
.live-rij { display: grid; gap: 4px; }
.live-rij > span { font-size: .82rem; font-weight: 700; color: var(--muted); }
.live-ud { padding: 8px 10px; border-radius: 12px; background: #fbeadf; }
.live-ud > span { color: #7a3d14; }
.live-keuzes { display: flex; gap: 6px; }
.live-keuze { flex: 1 1 0; min-width: 0; min-height: 48px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); color: var(--ink); font: inherit; font-weight: 750; cursor: pointer; }
.live-keuze.gekozen { background: var(--green-900); border-color: var(--green-900); color: var(--white); }
.live-drive { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; width: 100%; }
.live-drive svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; }
.live-duim { margin-top: auto; display: grid; gap: 10px; padding-top: 6px; }
.live-slagen { display: grid; grid-template-columns: 1fr minmax(72px, 1fr) 1fr; align-items: center; gap: 8px; }
.live-slagen button { min-height: 76px; border: 0; border-radius: 18px; background: var(--green-100); color: var(--green-900); font: inherit; font-size: 2.2rem; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.live-slagen output { text-align: center; font-size: 2.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.live-nav { display: grid; grid-template-columns: 1fr 2fr; gap: 8px; }
.live-nav button { min-height: 56px; }
.live-klaar h1, .live-start h1 { margin: 0; font-size: 1.7rem; }
.live-let-op { margin: 0; padding: 10px 12px; border-radius: 12px; background: #fbeadf; color: #7a3d14; font-size: .9rem; }
.live-klaar-knoppen { margin-top: auto; display: grid; gap: 10px; }
.drive-hole-tekst { margin: 0 0 10px; font-weight: 750; }

/* Eén flight, één kaart in het clubhuis (app.js, flightSamenvoegen) */
.flight-band { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 14px 12px; border-top: 1px solid var(--line); }
.flight-kop { width: 100%; color: var(--muted); font-size: .75rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.flight-band button { min-height: 40px; padding: 6px 12px; border: 0; border-radius: 999px; background: var(--green-100); color: var(--green-900); font: inherit; font-size: .9rem; font-variant-numeric: tabular-nums; cursor: pointer; }
.post[hidden] { display: none; }
body.in-live .toast { bottom: auto; top: calc(56px + env(safe-area-inset-top)); }
/* Lage schermen (iPhone SE, liggend): alles binnen beeld, knoppen blijven 44 punten of groter */
@media (max-height: 720px) {
  .live-hole { gap: 6px; }
  .live-midden { gap: 6px; }
  .live-keuze { min-height: 44px; }
  .live-rij { gap: 2px; }
  .live-drive { min-height: 44px; }
  .live-slagen button { min-height: 60px; }
  .live-slagen output { font-size: 2.1rem; }
  .live-nav button { min-height: 50px; }
  .live-titel h1 { font-size: 1.4rem; }
}

/* Mijn spel: tabbladen, filters en lijsten (mijnspel.js) */
.spel-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 8px 0; padding: 4px; border-radius: 999px; background: #e6e9e3; }
.spel-tabs[hidden] { display: none; }
.spel-tabs .filter-chip { min-height: 44px; }
.spel-tabs .filter-chip.actief { background: var(--green-900); color: var(--white); }
.spel-filters { display: flex; gap: 6px; margin: 0 0 12px; overflow-x: auto; scrollbar-width: none; }
.spel-filters[hidden] { display: none; }
.spel-filters::-webkit-scrollbar { display: none; }
.spel-filters select {
  flex: 1 1 0; min-width: 0; min-height: 44px; padding: 0 26px 0 14px; border: 1px solid var(--line); border-radius: 999px;
  -webkit-appearance: none; appearance: none; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2318513f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center;
  color: var(--green-800); font: inherit; font-size: 16px; font-weight: 750; cursor: pointer;
}
.spel-filters select[hidden] { display: none; }
.spel-blok { margin: 0 0 14px; }
.spel-blok:empty { display: none; }
.spel-train { margin: 0 0 8px; padding: 10px 12px; border-radius: 12px; background: var(--white); border: 1px solid var(--line); }
.spel-verloop { width: 100%; border-collapse: collapse; background: var(--white); border-radius: 12px; overflow: hidden; font-variant-numeric: tabular-nums; }
.spel-verloop th, .spel-verloop td { padding: 9px 8px; text-align: right; border-top: 1px solid var(--line); font-size: .9rem; }
.spel-verloop thead th { border-top: 0; color: var(--muted); font-size: .75rem; font-weight: 800; }
.spel-verloop th:first-child { text-align: left; font-weight: 700; }
.spel-maand { margin: 16px 0 6px; color: var(--muted); font-size: .8rem; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
/* Rijen buiten beeld tekent de webview niet: zo blijft een lange lijst soepel */
.spel-lijst .spel-rij, .spel-lijst .drive-rij { content-visibility: auto; contain-intrinsic-size: auto 72px; }
.spel-rij { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; margin: 0 0 6px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.spel-getal { flex: 0 0 52px; display: grid; font-size: 1.35rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.spel-getal small { color: var(--muted); font-size: .75rem; font-weight: 700; }
.spel-info { flex: 1; min-width: 0; display: grid; gap: 2px; }
.spel-info strong { overflow-wrap: anywhere; }
.spel-info small { color: var(--muted); font-size: .8rem; }
.spel-rij > svg { flex: 0 0 auto; width: 18px; height: 18px; fill: none; stroke: var(--muted); stroke-width: 2; }
.spel-detail-datum { margin: 0 0 12px; color: var(--muted); }
.spel-detail-knoppen { display: grid; gap: 8px; margin-top: 14px; }
.spel-detail-knoppen .link-gevaar { justify-self: center; min-height: 44px; padding: 0 12px; }

/* Tegels in vensters en op de afrondpagina: altijd twee naast elkaar */
.modal .cijfer-grid, .live-klaar .cijfer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: 12px; }

/* Toernooien (toernooien.js) */
.toernooi-lijst { margin-bottom: 12px; }
.toernooi-knoppen:empty { display: none; }
.toernooi-knoppen { margin: 0 0 14px; }
.toernooi-stand { display: grid; gap: 6px; }
.toernooi-regel { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 56px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); color: var(--ink); font: inherit; text-align: left; }
.toernooi-regel:disabled { color: var(--muted); opacity: 1; }
.toernooi-regel.ik { background: #f1f8c8; border-color: var(--lime-dark); }
.toernooi-plek { flex: 0 0 20px; text-align: center; font-weight: 800; color: var(--muted); font-variant-numeric: tabular-nums; }
.toernooi-naam { flex: 1; min-width: 0; display: grid; gap: 1px; }
.toernooi-naam small { color: var(--muted); font-size: .8rem; }
.toernooi-tov { font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.toernooi-vrienden { display: grid; gap: 2px; max-height: 40vh; overflow-y: auto; margin-bottom: 12px; }

/* Startscherm live score: velden gelijk aan die in de vensters (Deel je rondje, plannen) */
.live-start h1 { letter-spacing: -.04em; line-height: 1.05; font-size: 2.1rem; }
.live-uitleg { margin: 0 0 4px; color: var(--muted); font-size: .9rem; }
.live-start label { display: grid; gap: 6px; margin: 0 0 13px; color: var(--muted); font-size: .75rem; font-weight: 750; }
.live-start input:not([type="radio"]), .live-start select {
  width: 100%; height: 48px; padding: 0 12px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--white); color: var(--ink); font: inherit; font-size: 16px; font-weight: 500; outline: 0;
}
.live-start input:not([type="radio"]):focus, .live-start select:focus { border-color: var(--green-700); box-shadow: 0 0 0 3px rgba(36, 108, 83, .1); }
.live-holes-keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0; padding: 0; border: 0; }
.live-holes-keuze legend { padding: 0; margin-bottom: 6px; color: var(--muted); font-size: .75rem; font-weight: 750; }
.live-holes-keuze label { margin: 0; cursor: pointer; }
.live-holes-keuze input { position: absolute; opacity: 0; pointer-events: none; }
.live-holes-keuze span { display: grid; place-items: center; min-height: 48px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); color: var(--ink); font-size: 1rem; font-weight: 750; }
.live-holes-keuze input:checked + span { border-color: var(--green-900); background: var(--green-900); color: var(--white); }
.live-holes-keuze input:focus-visible + span { box-shadow: 0 0 0 3px rgba(36, 108, 83, .3); }
.live-start .live-duim .submit-round { width: 100%; margin: 0; }

/* Live scorekaart: hulp, foto en video (live.js) */
.live-hulp { flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--white); color: var(--green-800); font: inherit; font-weight: 800; cursor: pointer; }
.live-kop:has(.live-hulp) .live-baan { text-align: left; }
.live-klaar .live-kop { justify-content: space-between; }
.live-hulp-inhoud dl { margin: 0 0 16px; }
.live-hulp-inhoud dt { margin-top: 14px; font-weight: 800; }
.live-hulp-inhoud dd { margin: 3px 0 0; color: var(--muted); font-size: .95rem; }
.live-acties { display: flex; gap: 8px; }
.live-acties .live-drive { flex: 1 1 0; min-width: 0; padding-inline: 8px; }
.live-drive span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-drive svg { flex: 0 0 auto; }
.live-media { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.live-media[hidden] { display: none; }
.live-media .foto-voorbeeld { width: 56px; height: 70px; }
.foto-voorbeeld video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--green-950); }
.live-media-venster .modal-inhoud { display: grid; gap: 10px; }
.live-media-venster h2 { margin: 0; }
.live-media-beeld { width: min(100%, 220px); aspect-ratio: 9 / 16; max-height: 44dvh; margin-inline: auto; overflow: hidden; border-radius: 14px; background: var(--green-950); }
.live-media-beeld img, .live-media-beeld video { width: 100%; height: 100%; object-fit: cover; display: block; }
.live-media-klaar { min-height: 48px; }
.submit-round[data-live-story] { width: 100%; margin: 0; }
/* Video bij een rondje in het clubhuis */
.post-media > video, .foto-carrousel video { width: 100%; height: 100%; object-fit: cover; display: block; background: var(--green-950); }
.foto-carrousel video { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }

/* Op een smal scherm past de tekst zo in alle drie */
.spel-filters select { padding: 0 22px 0 11px; font-weight: 650; background-position: right 8px center; }
.spel-filters [data-spel-filter="periode"] { flex-grow: 1.15; }
.spel-filters [data-spel-filter="baan"] { flex-grow: 1.25; }
.spel-filters [data-spel-filter="holes"] { flex-grow: .9; }
.live-stand-speler { min-height: 32px; }

/* Filter gekozen: zelfde groen als de tabbladen */
.spel-filters select:has(option:checked:not(:first-child)) {
  border-color: var(--green-900); background-color: var(--green-900); color: var(--white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Toernooi: tussenstand op de hole, alle holes, speelhandicap */
.live-stand { display: flex; gap: 6px; width: 100%; padding: 0; border: 0; background: transparent; overflow-x: auto; scrollbar-width: none; color: inherit; font: inherit; cursor: pointer; }
.live-stand[hidden] { display: none; }
.live-stand::-webkit-scrollbar { display: none; }
.live-stand-speler { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; min-height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); font-size: .85rem; font-weight: 650; white-space: nowrap; }
.live-stand-speler.ik { border-color: var(--lime-dark); background: #f1f8c8; }
.live-stand-speler i { color: var(--muted); font-style: normal; font-weight: 800; }
.live-stand-speler b { font-variant-numeric: tabular-nums; }
.toernooi-allen { justify-self: end; min-height: 36px; font-weight: 750; }
.toernooi-holes-scroll { overflow-x: auto; margin: 0 0 8px; }
.toernooi-holes { border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: .9rem; }
.toernooi-holes th, .toernooi-holes td { min-width: 30px; padding: 7px 5px; border-bottom: 1px solid var(--line); text-align: center; white-space: nowrap; }
.toernooi-holes thead th { color: var(--muted); font-size: .75rem; font-weight: 800; }
.toernooi-holes th[scope="row"], .toernooi-holes thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--white); text-align: left; font-weight: 750; }
.toernooi-holes .toernooi-som { font-weight: 800; }
.toernooi-holes td b { display: block; font-weight: 700; }
.toernooi-holes td small { color: var(--muted); font-size: .72rem; }
.toernooi-holes tr.ik td, .toernooi-holes tr.ik th { background: #f1f8c8; }
.toernooi-handicap { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); font-weight: 750; }
.toernooi-handicap span { display: grid; gap: 2px; }
.toernooi-handicap small { color: var(--muted); font-size: .78rem; font-weight: 500; }
.toernooi-handicap input { flex: 0 0 72px; width: 72px; height: 44px; padding: 0 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--white); color: var(--ink); font: inherit; font-size: 16px; text-align: center; }
#toernooi-form .live-holes-keuze { margin: 13px 0 8px; }
.main-column:has(#feed-view:not(.active)) #toernooi-banner { display: none; }
#toernooi-banner { background: var(--lime); color: var(--green-950); }
#toernooi-banner svg { stroke: var(--green-950); }

/* Toernooi instellen: staat net zo vast als Deel je rondje. Alleen omhoog en omlaag scrollen. */
#toernooi-dialog { overflow-x: hidden; overscroll-behavior: none; }
#toernooi-form { overflow-x: clip; touch-action: pan-y; max-width: 100%; }
#toernooi-form input, #toernooi-form select, #toernooi-form .form-row > * { min-width: 0; max-width: 100%; }
/* De onzichtbare keuzerondjes bij Spelvorm kregen de breedte van een invoerveld en staken rechts uit: daardoor schoof de pop-up opzij */
#toernooi-form .live-holes-keuze { position: relative; overflow: hidden; }
#toernooi-form .live-holes-keuze input { width: 1px; height: 1px; min-height: 0; padding: 0; }
@media (max-width: 820px) {
  #toernooi-dialog[open], html.native-app #toernooi-dialog[open] {
    inset: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh;
    margin: 0; border-radius: 0; box-shadow: none;
    transition: height .28s cubic-bezier(.2, .8, .2, 1);
  }
  html.native-app #toernooi-dialog[open] { bottom: auto; height: calc(100dvh - var(--toetsenbord, 0px)); max-height: calc(100dvh - var(--toetsenbord, 0px)); }
  #toernooi-dialog[open] { animation: rondje-omhoog .28s cubic-bezier(.2, .8, .2, 1) both; }
  #toernooi-form { min-height: 100%; padding: 0 18px; }
  #toernooi-form .modal-head {
    position: sticky; top: 0; z-index: 4;
    margin: 0 -18px 4px; padding: calc(env(safe-area-inset-top) + 12px) 18px 12px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  #toernooi-form .vaste-knop { margin: 8px -18px 0; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); }
}

/* Toernooi: extra prijzen en organisatoren (60) */
.toernooi-prijs-keuze { margin-top: 8px; }
.toernooi-prijs-keuze [hidden] { display: none; }
#toernooi-form [data-organisator-blok][hidden] { display: none; }
.toernooi-prijzen { display: grid; gap: 8px; }
.toernooi-prijs { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.toernooi-prijs > div { display: grid; gap: 2px; min-width: 0; }
.toernooi-prijs small { color: var(--muted); }
.toernooi-winnaars { font-weight: 750; overflow-wrap: anywhere; }
.toernooi-prijs button { flex: none; min-height: 44px; }
[data-winnaars-form] { padding: 25px; }
[data-winnaars-form] .vinkje-rij span { display: grid; gap: 1px; }
[data-winnaars-form] .vinkje-rij small { color: var(--muted); font-weight: 500; }
[data-winnaars-form] .submit-round { width: 100%; margin-top: 14px; }

/* Live hole: signaal bij een prijs, en slagen en punten bij Stableford */
.live-prijs { display: flex; align-items: center; gap: 10px; width: 100%; margin: 0 0 8px; padding: 10px 12px; border: 0; border-radius: 14px; background: var(--lime); color: var(--green-950); font: inherit; text-align: left; }
button.live-prijs { cursor: pointer; }
.live-prijs svg { flex: none; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; }
.live-prijs span { display: grid; gap: 1px; min-width: 0; }
.live-prijs small { font-size: .82rem; }
.live-sf { display: grid; grid-template-columns: 1.35fr .8fr 1.15fr; gap: 6px; margin-bottom: 8px; }
.live-sf span { display: grid; gap: 1px; align-content: start; padding: 7px 8px; border-radius: 12px; background: var(--green-100); color: var(--green-900); min-width: 0; }
.live-sf small { font-size: .72rem; color: var(--muted); }
.live-sf strong { font-size: 1rem; overflow-wrap: anywhere; }

/* Cijfers van de ronde als slide (61) */
.cijfer-tegels { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 14px; }
.cijfer-tegels > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, .12); min-width: 0; }
.cijfer-tegels strong { font-family: var(--font-kop); font-size: clamp(1.3rem, 8cqi, 2.1rem); line-height: 1; color: var(--lime); }
.cijfer-tegels span { color: #dce9e2; font-size: .78rem; }
.cijfer-regels { display: grid; gap: 14px; width: 100%; }
.cijfer-regels > div { display: grid; gap: 3px; }
.cijfer-regels span { color: #c9dcd2; font-size: .8rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.cijfer-regels strong { font-family: var(--font-kop); font-size: clamp(1.25rem, 7.5cqi, 1.9rem); line-height: 1.1; overflow-wrap: anywhere; }

/* Toernooi: lijst met mensen, maximaal 6 tegelijk en zoeken */
#toernooi-form .toernooi-vrienden { max-height: none; overflow: visible; }
.kieslijst { display: grid; gap: 2px; margin-top: 8px; }
.modal .kieslijst label.vinkje-rij { align-items: center; min-height: 44px; margin: 0; }
.modal .kieslijst label.vinkje-rij[hidden] { display: none; }
.kies-meer { margin: 6px 0 0; color: var(--muted); font-size: .85rem; }
.kies-meer[hidden] { display: none; }

/* Toernooi: stand bekendmaken, scramble en teams kiezen (62) */
.modal label.comp-als-foto[hidden] { display: none; }
.toernooi-blok { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--white); }
.toernooi-blok > div { display: grid; gap: 2px; min-width: 0; }
.toernooi-blok small { color: var(--muted); }
.toernooi-blok button { flex: none; min-height: 44px; }
.toernooi-prijs.ik { border-color: var(--green-700); }
.toernooi-prijs small:empty { display: none; }
.toernooi-team-knop { width: 100%; margin-top: 8px; }
#toernooi-teams-dialog { overflow-x: hidden; overscroll-behavior: none; }
#toernooi-teams-form { overflow-x: clip; touch-action: pan-y; max-width: 100%; }
#toernooi-teams-form input, #toernooi-teams-form select, #toernooi-teams-form .form-row > * { min-width: 0; max-width: 100%; }
@media (max-width: 820px) {
  #toernooi-teams-dialog[open], html.native-app #toernooi-teams-dialog[open] {
    inset: 0; width: 100%; max-width: 100%; height: 100dvh; max-height: 100dvh;
    margin: 0; border-radius: 0; box-shadow: none;
  }
  html.native-app #toernooi-teams-dialog[open] { bottom: auto; height: calc(100dvh - var(--toetsenbord, 0px)); max-height: calc(100dvh - var(--toetsenbord, 0px)); }
  #toernooi-teams-dialog[open] { animation: rondje-omhoog .28s cubic-bezier(.2, .8, .2, 1) both; }
  #toernooi-teams-form { min-height: 100%; padding: 0 18px; }
  #toernooi-teams-form .modal-head {
    position: sticky; top: 0; z-index: 4;
    margin: 0 -18px 4px; padding: calc(env(safe-area-inset-top) + 12px) 18px 12px;
    background: rgba(255, 255, 255, .96);
    border-bottom: 1px solid var(--line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  #toernooi-teams-form .vaste-knop { margin: 8px -18px 0; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); }
}
.teams-aantal { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 0; font-weight: 750; }
.teams-aantal .stap { display: grid; grid-template-columns: 44px 36px 44px; align-items: center; text-align: center; font-weight: 800; }
.teams-aantal .stap button { height: 44px; }
.teams-verdeel { width: 100%; }
.team-kaart { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; }
.team-kaart small { display: block; margin-top: 4px; color: var(--muted); overflow-wrap: anywhere; }
.team-kaart .form-row { grid-template-columns: 1.4fr 1fr; }
.team-spelers { display: grid; gap: 6px; }
.modal label.team-speler { display: grid; grid-template-columns: minmax(0, 1fr) 132px; align-items: center; gap: 10px; margin: 0; padding: 4px 0; }
.team-speler span { display: grid; gap: 1px; min-width: 0; }
.team-speler strong { color: var(--ink); overflow-wrap: anywhere; }
.team-speler small { color: var(--muted); font-weight: 500; }
.team-speler select { margin: 0; }
.live-team { display: grid; gap: 1px; margin: 0 0 8px; padding: 10px 12px; border-radius: 14px; background: var(--green-900); color: #fff; }
.live-team small { color: #dce9e2; font-size: .82rem; }
.live-team.wacht { background: #f3f1e7; color: var(--ink); }
.live-team.wacht small { color: var(--muted); }
.uitslag-band .ub-marge svg { width: 20px; height: 20px; opacity: 1; }
.team-speler select { padding: 8px 28px 8px 10px; font-size: .88rem; font-weight: 700; }
.toernooi-annuleer { display: block; margin: 18px auto 8px; }

/* Toernooi naar links vegen: archiveren, terugzetten, verwijderen */
.toernooi-veeg { position: relative; margin: 0 0 6px; overflow: hidden; border-radius: 14px; }
.toernooi-veeg .spel-rij { position: relative; margin: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; transition: transform .2s var(--beweeg); }
.toernooi-veeg.veeg-bezig .spel-rij { transition: none; }
.toernooi-veeg-acties { position: absolute; top: 0; right: 0; bottom: 0; display: flex; max-width: 75%; visibility: hidden; transition: visibility 0s .2s; }
.toernooi-veeg.open .toernooi-veeg-acties, .toernooi-veeg.veeg-bezig .toernooi-veeg-acties { visibility: visible; transition: none; }
.toernooi-veeg-acties button { min-width: 44px; padding: 0 12px; border: 0; background: var(--green-800); color: #fff; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; }
.toernooi-veeg-acties button.gevaar { background: #b42318; }
.toernooi-veeg-hint { margin: 0 0 14px; color: var(--muted); font-size: .8rem; }
.toernooi-archief { margin: 18px 0 12px; }
.toernooi-archief > summary { min-height: 44px; padding: 10px 0; color: var(--muted); font-weight: 750; cursor: pointer; }

/* Cijfers delen in de chat (mijnspel.js, chat.js) */
.spel-cijfers-kop { margin: 28px 0 13px; }
/* Klein oogt rustiger naast de kop; ::after houdt het tikvlak 44 punten hoog */
.spel-delen-knop { position: relative; display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto; min-height: 32px; padding: 0 12px; border-radius: 999px; font-size: .84rem; }
.spel-delen-knop::after { content: ""; position: absolute; inset: -6px 0; }
.spel-delen-knop[hidden] { display: none; }
.spel-delen-knop svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.spel-delen-periode { display: grid; gap: 4px; margin-bottom: 10px; font-size: .84rem; font-weight: 700; color: var(--muted); }
.spel-delen-voorbeeld { margin-bottom: 8px; padding: 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--cream); }
.spel-delen-voorbeeld .leeg-tekst { margin: 0; }
#spel-delen-lijst[hidden] { display: none; }
#spel-delen-dialog .chat-nieuw-lijst { max-height: none; overflow: visible; }
.chat-bubbel.met-statistiek { width: min(88%, 400px); max-width: none; padding: 9px; }
.bericht-menu-bubbel .chat-bubbel.met-statistiek { width: 100%; }
.bericht-menu-bubbel .chat-regel:has(.met-statistiek) { align-items: flex-start; } /* hoge kaart in het menu: de kop blijft zichtbaar */
.cijfer-kaart { display: grid; gap: 8px; min-width: 0; text-align: left; }
.cijfer-kaart-kop { display: flex; align-items: center; gap: 8px; min-width: 0; }
.cijfer-kaart-kop svg { flex: 0 0 auto; width: 20px; height: 20px; fill: none; stroke: var(--green-800); stroke-width: 2.4; stroke-linecap: round; }
.cijfer-kaart-kop span { display: grid; min-width: 0; }
.cijfer-kaart-kop small { color: var(--muted); font-size: .76rem; font-weight: 700; }
.chat-regel.mij .cijfer-kaart-kop small, .chat-regel.mij .cijfer-kaart-stand { color: var(--ink); opacity: .72; }
.cijfer-kaart-tegels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.cijfer-kaart-tegels div { display: grid; align-content: start; gap: 1px; min-width: 0; padding: 8px 9px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.cijfer-kaart-tegels strong { font-family: var(--font-kop, "Londrina Solid"), sans-serif; font-size: 1.25rem; font-weight: 900; color: var(--green-900); line-height: 1.05; }
.cijfer-kaart-tegels span { color: var(--muted); font-size: .72rem; font-weight: 700; line-height: 1.2; }
.cijfer-kaart-stand { color: var(--muted); font-size: .72rem; }
/* Voorbeeld in het venster compact, zodat de ontvangers op een kleine iPhone in beeld blijven */
.spel-delen-voorbeeld .cijfer-kaart-tegels { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.spel-delen-voorbeeld .cijfer-kaart-tegels div { padding: 5px 6px; border-radius: 10px; }
.spel-delen-voorbeeld .cijfer-kaart-tegels strong { font-size: 1.05rem; }
.spel-delen-voorbeeld .cijfer-kaart-tegels span { font-size: .64rem; }