/* VolleyStars — veldklok in de huisstijl van switch.feliro.nl: grijze pagina, witte kaarten,
   marineblauw voor de structuur en oranje voor de acties.
   Kleuren gelijk aan switch-tokens.css (navy #27285B, oranje #DC6A33, teal #12AA9E).
   v1.15: donkere modus (html[data-theme="dark"], zelfde palet als het overzicht) en een
   weergave voor een venster van het overzicht (html[data-ingebed]). */
:root {
    --v-navy: #27285B; --v-navy-dark: #1B1C42; --v-navy-soft: #ECEDF4;
    --v-orange: #DC6A33; --v-orange-dark: #BA5524; --v-orange-soft: #FDF0E8; --v-orange-tekst: #B84A0E;
    --v-teal: #12AA9E; --v-teal-dark: #0B6E66; --v-teal-soft: #E7F7F5;
    --v-page: #EEF0F5; --v-surface: #FFFFFF; --v-surface-2: #F4F5F8; --v-surface-3: #E9EBF1;
    --v-text: #1E2038; --v-muted: #454B63; --v-subtle: #6B7089; --v-line: #DCE0EA;
    --v-danger: #DC2626; --v-danger-soft: #FDECEC; --v-danger-tekst: #9B1C1C; --v-warn-soft: #FEF6E7; --v-warn-tekst: #8A5300;
    --v-shadow: 0 2px 7px rgba(39, 40, 91, .05);
    /* v1.15 · Oranje knoppen: wit op --vs-orange-dark haalt 4,76:1 (AA), ingedrukt 6,4:1. Het lichtere
       merkoranje haalt met wit maar 3,4:1 en blijft daarom voor randen en accenten. */
    --v-actie: #BA5524; --v-actie-tekst: #FFFFFF; --v-actie-druk: #9C4519; --v-actie-gloed: rgba(186, 85, 36, .28);
    --v-knop-navy: #27285B; --v-knop-navy-druk: #1B1C42;
    --v-kop: #FFFFFF; --v-invoer: #FFFFFF; --v-stip: #C5C9D8; --v-streep: #B9BDCC; --v-focus: rgba(186, 85, 36, .55);
    --v-overlay: rgba(20, 21, 58, .45); --v-zweef: 0 10px 30px rgba(39, 40, 91, .2); --v-nav-schaduw: 0 -6px 20px rgba(39, 40, 91, .08);
    --v-nav: calc(76px + env(safe-area-inset-bottom));
    color-scheme: light;
}
/* v1.15 · Donkere modus: diep navy zoals het overzicht. Navy als tekstkleur wordt licht; knoppen
   krijgen hun eigen tint. Navy tekst op het merkoranje haalt 5,3:1 (AA). */
html[data-theme="dark"] {
    --v-navy: #E4E7F4; --v-navy-dark: #F4F5FA; --v-navy-soft: #252B57;
    --v-orange-soft: #3B2721; --v-orange-tekst: #F2A374;
    --v-teal-dark: #5FD6C8; --v-teal-soft: #173C45;
    --v-page: #0F1330; --v-surface: #191E44; --v-surface-2: #20264F; --v-surface-3: #2A305E;
    --v-text: #ECEEF6; --v-muted: #AEB4CB; --v-subtle: #9399B4; --v-line: #3A4272;
    --v-danger-soft: #4A2224; --v-danger-tekst: #FFB4AE; --v-warn-soft: #3D3118; --v-warn-tekst: #F5C26B;
    --v-shadow: 0 2px 10px rgba(0, 0, 0, .28);
    --v-actie: #DC6A33; --v-actie-tekst: #0F1330; --v-actie-druk: #E8793F; --v-actie-gloed: rgba(0, 0, 0, .35);
    --v-knop-navy: #343C78; --v-knop-navy-druk: #252B57;
    --v-kop: #151A3D; --v-invoer: #141938; --v-stip: #58619A; --v-streep: #58619A; --v-focus: #F2A374;
    --v-overlay: rgba(5, 7, 20, .66); --v-zweef: 0 10px 30px rgba(0, 0, 0, .5); --v-nav-schaduw: 0 -2px 14px rgba(0, 0, 0, .35);
    color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body.veld-body { min-height: 100dvh; padding-bottom: calc(var(--v-nav) + 12px); color: var(--v-text); background: var(--v-page); font: 500 15px/1.4 Poppins, system-ui, -apple-system, 'Segoe UI', sans-serif; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; }
[hidden] { display: none !important; }
h2, p { margin: 0; }
button { margin: 0; font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; opacity: .4; }
button:focus-visible, input:focus-visible { outline: 3px solid var(--v-focus); outline-offset: 2px; }
input { -webkit-user-select: text; user-select: text; }
svg { flex: 0 0 auto; }

/* ---------- Kop: zelfde behandeling als de team-apps, in marineblauw van het logo ---------- */
.veld-top { position: sticky; top: 0; z-index: 5; padding-top: env(safe-area-inset-top); color: var(--v-navy); background: var(--v-kop); box-shadow: 0 1px 0 var(--v-line); }
.veld-top::before { content: ''; display: block; height: 3px; background: var(--v-orange); }
.veld-top-binnen { display: flex; align-items: center; gap: 10px; max-width: 600px; margin: 0 auto; padding: 8px max(14px, env(safe-area-inset-right)) 9px max(14px, env(safe-area-inset-left)); }
.veld-logo { display: block; flex: 0 0 auto; }
.veld-logo img { display: block; width: auto; height: 34px; }
.veld-logo .veld-logo-donker, html[data-theme="dark"] .veld-logo .veld-logo-licht { display: none; }
html[data-theme="dark"] .veld-logo .veld-logo-donker { display: block; }
.veld-top-tekst { display: grid; flex: 1 1 auto; min-width: 0; line-height: 1.25; }
/* v1.15 · Een lange zaalnaam krijgt de puntjes, "Veld C1" blijft altijd heel. */
.veld-top-tekst strong { display: flex; min-width: 0; font-size: 16px; font-weight: 700; white-space: nowrap; }
.veld-kop-zaal { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.veld-kop-veld { flex: 0 0 auto; }
.veld-top-tekst > span { overflow: hidden; color: var(--v-muted); font-size: 13px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.veld-top-rechts { display: flex; flex: 0 0 auto; align-items: center; gap: 8px; }
.veld-nu { color: var(--v-navy); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.veld-verbinding { width: 10px; height: 10px; border-radius: 50%; background: transparent; box-shadow: inset 0 0 0 2px var(--v-subtle); }
.veld-verbinding[data-status="online"] { background: var(--v-teal); box-shadow: none; }
.veld-verbinding[data-status="wachtend"] { background: #F59E0B; box-shadow: none; }

/* ---------- Pagina en kaarten ---------- */
.veld-main { display: grid; gap: 12px; max-width: 600px; margin: 0 auto; padding: 12px max(12px, env(safe-area-inset-right)) 4px max(12px, env(safe-area-inset-left)); }
.veld-main > section { display: grid; gap: 12px; min-width: 0; }
.veld-kaart { padding: 14px; border: 1px solid var(--v-line); border-radius: 14px; background: var(--v-surface); box-shadow: var(--v-shadow); }
.veld-leeg { margin: 24px 8px; color: var(--v-muted); font-size: 15px; text-align: center; }
.veld-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 28px; padding: 3px 11px; border-radius: 999px; color: var(--v-navy); background: var(--v-navy-soft); font-size: 13px; font-weight: 700; white-space: nowrap; }

/* ---------- Knoppen ---------- */
.veld-knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 8px 16px; border: 1.5px solid transparent; border-radius: 12px; font-size: 16px; font-weight: 600; line-height: 1.2; transition: transform .12s, background-color .12s; }
.veld-knop:active:not(:disabled) { transform: scale(.98); }
.veld-knop-navy { color: #fff; background: var(--v-knop-navy); }
.veld-knop-navy:active:not(:disabled) { background: var(--v-knop-navy-druk); }
.veld-knop-oranje { color: var(--v-actie-tekst); background: var(--v-actie); box-shadow: 0 4px 12px var(--v-actie-gloed); }
.veld-knop-oranje:active:not(:disabled) { background: var(--v-actie-druk); }
.veld-knop-rand { border-color: var(--v-line); color: var(--v-navy); background: var(--v-surface); }
.veld-knop-rand:active:not(:disabled) { background: var(--v-surface-2); }
.veld-knop-rood { color: #fff; background: var(--v-danger); }

/* ---------- Klok ---------- */
.veld-fase { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 28px; }
.veld-dots { display: inline-flex; gap: 5px; }
.veld-dots:has(> span:only-child) { display: none; }
.veld-dots span { width: 8px; height: 8px; border-radius: 50%; background: var(--v-stip); }
.veld-dots .is-nu { background: transparent; box-shadow: inset 0 0 0 2px currentColor; }
.veld-dots .is-klaar { background: currentColor; }
.veld-gespeeld { overflow: hidden; color: var(--v-subtle); font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.veld-tijd { margin: 2px 0 6px; color: var(--v-navy); font-size: clamp(68px, 23vw, 108px); font-weight: 700; letter-spacing: -.03em; line-height: 1.05; text-align: center; font-variant-numeric: tabular-nums; }
.veld-voortgang { height: 6px; margin: 0 0 14px; overflow: hidden; border-radius: 999px; background: var(--v-surface-3); }
.veld-voortgang span { display: block; height: 100%; border-radius: inherit; transform-origin: left center; background: var(--v-navy); transition: transform .25s linear; }
.veld-klok[data-mode="paused"] .veld-tijd { animation: veld-adem 2.4s ease-in-out infinite; }
.veld-klok[data-phase="changeover"] { border-color: rgba(18, 170, 158, .35); background: var(--v-teal-soft); }
.veld-klok[data-phase="changeover"] .veld-bijstel-knop { background: rgba(255, 255, 255, .7); }
html[data-theme="dark"] .veld-klok[data-phase="changeover"] .veld-bijstel-knop { background: rgba(255, 255, 255, .07); }
.veld-klok[data-phase="changeover"] .veld-chip { color: var(--v-teal-dark); background: var(--v-teal-soft); }
.veld-klok[data-phase="changeover"] .veld-tijd { color: var(--v-teal-dark); }
.veld-klok[data-phase="changeover"] .veld-voortgang span { background: var(--v-teal); }
.veld-klok[data-mode="finished"] .veld-tijd { color: var(--v-subtle); }
.veld-klok[data-phase="changeover"] .veld-gespeeld { display: none; }
.veld-klok[data-phase="changeover"] .veld-pauze { flex: 0 0 auto; padding: 0 16px; font-size: 16px; }

.veld-bijstel { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 12px; }
.veld-bijstel > span { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.veld-bijstel-knop { min-width: 0; min-height: 48px; padding: 0 4px; border: 1px solid var(--v-line); border-radius: 10px; color: var(--v-navy); background: var(--v-surface-2); font-size: 14px; font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; }
.veld-bijstel-knop:active:not(:disabled) { transform: scale(.96); background: var(--v-surface-3); }

/* Eén grote knop: Start, en zolang de set loopt Pauze op dezelfde plek. Set klaar staat
   er klein en in de rand naast. Uitgeschakelde knoppen verdwijnen, zodat er nooit twee
   hoofdknoppen tegelijk staan. */
.veld-klokknoppen { display: flex; gap: 16px; }
.veld-klokknoppen .veld-knop { min-height: 58px; }
.veld-pauze, .veld-hoofdknop { flex: 1 1 0; min-width: 0; font-size: 19px; font-weight: 700; }
.veld-pauze:disabled, .veld-setklaar:disabled, .veld-hoofdknop.is-bezig { display: none; }
.veld-hoofdknop { color: var(--v-actie-tekst); background: var(--v-actie); box-shadow: 0 4px 12px var(--v-actie-gloed); }
.veld-hoofdknop:active { background: var(--v-actie-druk); }
.veld-hoofdknop[data-actie="start"]::before, .veld-hoofdknop[data-actie="volgende"]::before { content: ''; flex: 0 0 auto; width: 0; height: 0; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-left: 13px solid currentColor; }
.veld-setklaar { flex: 0 0 auto; padding: 0 14px; color: var(--v-muted); font-size: 15px; }
.veld-icoon-pauze { width: 12px; height: 16px; border-right: 4px solid currentColor; border-left: 4px solid currentColor; }
.veld-icoon-stop { width: 12px; height: 12px; border-radius: 2px; background: currentColor; }

/* ---------- Telling ---------- */
.veld-teams, .veld-plus, .veld-herstel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
/* Per team, midden boven de eigen stand en plusknop: logo, naam. Het kruisje (en na een
   wissel het terugzetten) staat klein in de hoek, ver van de plusknoppen. */
.veld-team { position: relative; display: grid; justify-items: center; align-content: start; gap: 4px; min-width: 0; text-align: center; }
.veld-team-logo { display: grid; width: 32px; height: 32px; place-items: center; overflow: hidden; border: 1px solid var(--v-line); border-radius: 50%; background: #fff; }
.veld-team-logo .club-logo { display: grid; width: 26px; height: 22px; place-items: center; border: 0; background: transparent; }
.veld-team-logo .club-logo > * { grid-area: 1 / 1; }
.veld-team-logo .club-logo img { position: relative; z-index: 1; width: 26px; height: 22px; object-fit: contain; background: #fff; }
.veld-team-logo .club-logo-fallback svg { width: 16px; height: 16px; color: #27285B; }
.veld-team-tekst { display: grid; justify-items: center; width: 100%; min-width: 0; }
.veld-team-naam { display: -webkit-box; max-width: 100%; overflow: hidden; color: var(--v-navy); font-size: 15px; font-weight: 600; line-height: 1.2; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.veld-label { color: var(--v-orange-tekst); font-size: 11px; font-weight: 700; }
.veld-team-weg, .veld-team-herstel { position: absolute; top: -2px; right: 0; display: grid; width: 34px; height: 34px; padding: 0; place-items: center; border: 1px solid var(--v-line); border-radius: 50%; color: var(--v-subtle); background: var(--v-surface-2); font-size: 20px; line-height: 1; }
.veld-team-herstel { font-size: 16px; }
/* Kruisjes in de buitenhoeken, terugzetten in de binnenhoek: symmetrisch en uit elkaars buurt. */
.veld-teams > .veld-team:first-child .veld-team-weg, .veld-teams > .veld-team:nth-child(2) .veld-team-herstel { right: auto; left: 0; }
.veld-team-weg::after, .veld-team-herstel::after { content: ''; position: absolute; inset: -7px; }
.veld-team.is-bewerk { grid-column: 1 / -1; justify-items: stretch; gap: 8px; text-align: left; }
.veld-team-invoer { display: grid; gap: 4px; min-width: 0; color: var(--v-muted); font-size: 12px; font-weight: 600; }
.veld-team-invoer input { width: 100%; min-width: 0; min-height: 48px; padding: 8px 12px; border: 1.5px solid var(--v-line); border-radius: 12px; color: var(--v-text); background: var(--v-invoer); font: 600 16px Poppins, system-ui, sans-serif; }
.veld-team-invoer input:focus { border-color: var(--v-orange); outline: none; }
.veld-team-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.veld-stand { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 4px 0 10px; text-align: center; font-variant-numeric: tabular-nums; }
.veld-stand strong { color: var(--v-navy); font-size: clamp(76px, 25vw, 118px); font-weight: 700; letter-spacing: -.03em; line-height: 1.02; }
.veld-stand span { position: absolute; top: 50%; left: 50%; color: var(--v-streep); font-size: 30px; font-weight: 600; transform: translate(-50%, -50%); }
.veld-plus-knop { min-height: 76px; border: 0; border-radius: 14px; color: #fff; background: var(--v-knop-navy); box-shadow: 0 3px 0 var(--v-knop-navy-druk); font-size: 30px; font-weight: 700; line-height: 1; }
.veld-plus-knop:active { transform: translateY(2px); background: var(--v-knop-navy-druk); box-shadow: 0 1px 0 var(--v-knop-navy-druk); }
html[data-theme="dark"] .veld-plus-knop { box-shadow: inset 0 0 0 1px #4A5390, 0 3px 0 #0A0D24; }
html[data-theme="dark"] .veld-plus-knop:active { box-shadow: inset 0 0 0 1px #4A5390, 0 1px 0 #0A0D24; }
.veld-herstel { margin-top: 12px; }
.veld-terug { padding: 6px 10px; color: var(--v-muted); font-size: 15px; }
.veld-terug svg, .veld-reset svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.veld-bord-voet { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 48px; margin: 12px -14px -14px; padding: 0 6px 0 14px; border-top: 1px solid var(--v-line); border-radius: 0 0 14px 14px; background: var(--v-surface-2); }
.veld-eerder { display: flex; flex-wrap: wrap; gap: 2px 14px; color: var(--v-muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.veld-reset { min-height: 48px; min-width: 64px; padding: 0 12px; border: 0; color: var(--v-muted); background: transparent; font-size: 14px; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Wedstrijden op dit veld ---------- */
.veld-lijst { display: grid; gap: 8px; }
.veld-rij { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; min-height: 68px; padding: 10px 12px; border: 1px solid var(--v-line); border-radius: 12px; color: var(--v-text); background: var(--v-surface); box-shadow: var(--v-shadow); text-align: left; }
/* v1.15 · De gekozen wedstrijd springt eruit: oranje rand en het woord "Gekozen" onder de tijd. */
.veld-rij.is-gekozen { border-color: var(--v-orange); background: var(--v-orange-soft); box-shadow: inset 5px 0 0 var(--v-orange), var(--v-shadow); }
/* v1.16 · Gespeeld en afgelast vallen terug, maar alleen de tijd en de teams: het label rechts houdt zijn volle
   kleur en haalt zo het contrast (AA), ook in de donkere modus. */
.veld-rij[data-status="gespeeld"] :is(.veld-rij-tijd, .veld-rij-teams), .veld-rij[data-status="verstuurd"] :is(.veld-rij-tijd, .veld-rij-teams) { opacity: .72; }
.veld-rij[data-status="afgelast"] :is(.veld-rij-tijd, .veld-rij-teams) { opacity: .6; }
.veld-rij-tijd { display: grid; gap: 1px; color: var(--v-navy); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.veld-rij-gekozen { color: var(--v-orange-tekst); font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; }
.veld-rij-teams { display: grid; min-width: 0; }
.veld-rij-teams strong { overflow: hidden; font-size: 15px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.veld-rij-status { padding: 3px 9px; border-radius: 999px; color: var(--v-muted); background: var(--v-surface-2); font-size: 12px; font-weight: 600; white-space: nowrap; }
.veld-rij[data-status="nu"] .veld-rij-status { color: var(--v-teal-dark); background: var(--v-teal-soft); }
.veld-rij[data-status="komend"] .veld-rij-status, .veld-rij[data-status="bewaard"] .veld-rij-status { color: var(--v-navy); background: var(--v-navy-soft); }
.veld-rij[data-status="verstuurd"] .veld-rij-status { color: var(--v-teal-dark); background: var(--v-teal-soft); }
.veld-rij[data-status="wacht"] .veld-rij-status { color: var(--v-warn-tekst); background: var(--v-warn-soft); }
.veld-rij[data-status="afgelast"] .veld-rij-status { color: var(--v-danger-tekst); background: var(--v-danger-soft); }

/* ---------- Uitslag ---------- */
.veld-uitslag { display: grid; gap: 12px; }
.veld-uitslag-kop { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--v-muted); font-size: 14px; font-weight: 600; }
.veld-uitslag-teams, .veld-uitslag-set { display: grid; grid-template-columns: 48px minmax(0, 1fr) 14px minmax(0, 1fr); align-items: center; gap: 8px; }
.veld-uitslag-teams strong { color: var(--v-navy); font-size: 15px; font-weight: 600; line-height: 1.2; text-align: center; overflow-wrap: anywhere; }
.veld-uitslag-set > span:first-child { color: var(--v-muted); font-size: 14px; font-weight: 600; }
.veld-uitslag-set > span:nth-child(3) { color: var(--v-subtle); text-align: center; }
.veld-uitslag-set input { width: 100%; min-width: 0; min-height: 58px; border: 1.5px solid var(--v-line); border-radius: 12px; color: var(--v-navy); background: var(--v-surface-2); font: 700 28px Poppins, system-ui, sans-serif; text-align: center; font-variant-numeric: tabular-nums; -moz-appearance: textfield; appearance: textfield; }
.veld-uitslag-set input::-webkit-outer-spin-button, .veld-uitslag-set input::-webkit-inner-spin-button { margin: 0; -webkit-appearance: none; }
.veld-uitslag-set input:focus { border-color: var(--v-orange); background: var(--v-surface); outline: none; }
.veld-uitslag-punten { display: flex; align-items: baseline; justify-content: space-between; padding-top: 10px; border-top: 1px solid var(--v-line); color: var(--v-muted); font-size: 14px; font-weight: 600; }
.veld-uitslag-punten strong { color: var(--v-navy); font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.veld-verzend { width: 100%; min-height: 56px; font-size: 17px; font-weight: 700; }
.veld-volgende { width: 100%; }
.veld-melding { padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; line-height: 1.45; }
.veld-melding.is-ok { color: var(--v-teal-dark); background: var(--v-teal-soft); }
.veld-melding.is-wacht { color: var(--v-warn-tekst); background: var(--v-warn-soft); }
.veld-melding.is-fout { color: var(--v-danger-tekst); background: var(--v-danger-soft); }

/* ---------- Bevestigen ---------- */
.veld-bevestig { position: fixed; inset: 0; z-index: 20; display: grid; grid-template-columns: minmax(0, 480px); justify-content: center; place-items: end center; padding: 16px 16px calc(16px + env(safe-area-inset-bottom)); background: var(--v-overlay); }
.veld-bevestig-kaart { box-sizing: border-box; width: 100%; min-width: 0; padding: 18px; border: 1px solid var(--v-line); border-radius: 16px; color: var(--v-text); background: var(--v-surface); box-shadow: var(--v-zweef); }
.veld-bevestig-kaart h2, .veld-bevestig-kaart p { overflow-wrap: anywhere; }
.veld-bevestig-kaart h2 { margin: 0 0 6px; color: var(--v-navy); font-size: 19px; font-weight: 700; }
.veld-bevestig-kaart p { margin: 0 0 16px; color: var(--v-muted); }
.veld-bevestig-knoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

/* ---------- Onderbalk: zoals de team-apps, tegen de onderrand ---------- */
/* v1.15 · Geen drie kleine tabbladen meer, maar de twee stappen naast de klok als grote oranje knoppen
   met duidelijke tekst. De stap die open staat, staat ingedrukt; terug naar de klok gaat bovenaan de stap. */
.veld-nav { position: fixed; right: 0; bottom: 0; left: 0; z-index: 6; padding: 8px max(10px, env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); border-top: 1px solid var(--v-line); background: var(--v-kop); box-shadow: var(--v-nav-schaduw); }
.veld-nav-binnen { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); gap: 8px; max-width: 600px; margin: 0 auto; }
.veld-nav-actie { display: flex; align-items: center; justify-content: center; gap: 8px; min-width: 0; min-height: 58px; padding: 6px 12px; border: 0; border-radius: 14px; color: var(--v-actie-tekst); background: var(--v-actie); box-shadow: 0 3px 0 var(--v-actie-druk); font-size: 16px; font-weight: 700; line-height: 1.15; text-align: left; text-wrap: balance; transition: transform .12s, background-color .12s, box-shadow .12s; }
.veld-nav-actie:active:not(:disabled), .veld-nav-actie.active { transform: translateY(2px); background: var(--v-actie-druk); box-shadow: 0 1px 0 var(--v-actie-druk); }
.veld-nav-actie.active { box-shadow: inset 0 0 0 3px var(--v-kop), 0 0 0 2px var(--v-actie-druk); }
.veld-nav-icoon { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* Smalle telefoons: nooit meer dan twee regels per knop. Brede schermen: twee gelijke knoppen op één regel. */
@media (max-width: 389px) {
    .veld-nav-binnen { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
    .veld-nav-actie { gap: 6px; padding: 6px 10px; font-size: 15px; }
    .veld-nav-icoon { width: 18px; height: 18px; }
}
@media (max-width: 350px) { .veld-nav-icoon { display: none; } }
@media (min-width: 520px) { .veld-nav-binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- v1.15 · Kop van een stap: terug naar de klok en de naam van de stap ---------- */
.veld-subkop { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* v1.16 · 'Klok' (terug) blijft onder de kop (56 px, plus de inkeping) staan, ook als de lijst van de
   wedstrijden al is doorgeschoven (de gekozen wedstrijd komt bij openen in het midden). */
.veld-subkop { position: sticky; top: calc(56px + env(safe-area-inset-top)); z-index: 4; margin: -12px -4px 0; padding: 12px 4px 8px; background: var(--v-page); }
.veld-naar-klok { flex: 0 0 auto; gap: 4px; min-height: 44px; padding: 6px 14px 6px 8px; font-size: 15px; font-weight: 700; }
.veld-naar-klok svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.veld-subtitel { min-width: 0; color: var(--v-navy); font-size: 20px; font-weight: 700; line-height: 1.2; }

/* ---------- v1.15 · Schakelaar voor de donkere modus in de kop ---------- */
/* 44 px om op te tikken; de baan zelf is kleiner. Zon = licht, maan = donker. */
.veld-thema { display: grid; flex: 0 0 auto; width: 52px; min-height: 44px; margin: -4px -4px -4px 0; padding: 0; place-items: center; border: 0; border-radius: 12px; background: transparent; }
.veld-thema-baan { position: relative; display: block; width: 46px; height: 28px; border: 1.5px solid var(--v-subtle); border-radius: 999px; background: var(--v-surface-3); transition: background-color .2s, border-color .2s; }
.veld-thema-knop { position: absolute; top: 2px; left: 2px; display: grid; width: 21px; height: 21px; place-items: center; border-radius: 50%; color: #B84A0E; background: #FFFFFF; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s; }
.veld-thema-knop svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.veld-thema .veld-thema-maan, .veld-thema[aria-checked="true"] .veld-thema-zon { display: none; }
.veld-thema[aria-checked="true"] .veld-thema-maan { display: block; fill: currentColor; stroke: none; }
.veld-thema[aria-checked="true"] .veld-thema-baan { border-color: #7C84B5; background: #3A4272; }
.veld-thema[aria-checked="true"] .veld-thema-knop { color: #27285B; background: #F4F5FA; transform: translateX(18px); }

/* ---------- Kleine schermen ---------- */
@media (max-width: 350px) {
    .veld-top-binnen { gap: 8px; }
    .veld-logo img { height: 28px; }
    .veld-nu { display: none; }
    .veld-top-rechts { gap: 6px; }
    .veld-kaart { padding: 12px; }
    .veld-bord-voet { margin: 12px -12px -12px; padding-left: 12px; }
    .veld-bijstel { gap: 10px; }
    .veld-bijstel-knop { font-size: 13px; }
    .veld-setklaar { padding: 0 10px; font-size: 14px; }
    .veld-team-naam { font-size: 14px; }
}
/* Lage schermen: klok en stand iets kleiner, zodat de plusknoppen in beeld blijven. */
@media (max-height: 720px) {
    .veld-tijd { font-size: clamp(60px, 20vw, 84px); }
    .veld-stand strong { font-size: clamp(60px, 20vw, 92px); }
    .veld-plus-knop { min-height: 68px; }
    .veld-klokknoppen .veld-knop { min-height: 54px; }
}
/* Lage telefoons (320 x 640 tot 360 x 760): ook −1 blijft boven de balk onderin. */
@media (max-height: 760px) {
    .veld-main { gap: 10px; }
    .veld-kaart { padding-top: 10px; padding-bottom: 10px; }
    .veld-tijd { margin: 0 0 2px; font-size: clamp(50px, 17vw, 72px); }
    .veld-voortgang { margin-bottom: 10px; }
    .veld-bijstel { margin-bottom: 10px; }
    .veld-stand { margin: 0 0 6px; }
    .veld-stand strong { font-size: clamp(50px, 17vw, 76px); }
    .veld-plus-knop { min-height: 60px; }
    .veld-klokknoppen .veld-knop { min-height: 50px; }
}
@media (max-height: 640px) {
    .veld-main { gap: 8px; padding-top: 8px; }
    .veld-kaart { padding-top: 8px; padding-bottom: 8px; }
    .veld-tijd { font-size: clamp(44px, 13vw, 56px); line-height: 1; }
    .veld-voortgang, .veld-bijstel { margin-bottom: 8px; }
    .veld-bijstel-knop, .veld-klokknoppen .veld-knop { min-height: 44px; }
    .veld-team { gap: 2px; }
    .veld-stand { margin-bottom: 2px; }
    .veld-stand strong { font-size: clamp(44px, 13vw, 60px); line-height: 1; }
    .veld-plus-knop { min-height: 56px; }
    .veld-herstel { margin-top: 8px; }
}
@keyframes veld-adem { 50% { opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .veld-klok[data-mode="paused"] .veld-tijd { animation: none; } .veld-voortgang span, .veld-knop, .veld-nav-actie, .veld-thema-baan, .veld-thema-knop { transition: none; } }

/* Hufterproof: geen herlaad door omlaag trekken, geen zoom door dubbel tikken. */
html, body { overscroll-behavior-y: contain; }
button, input, a { touch-action: manipulation; }
.veld-sr { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Hufterproof: geen herlaad door omlaag trekken, geen zoom of menu bij dubbel of lang tikken. */
html, body { overscroll-behavior-y: contain; }
button, input, a { touch-action: manipulation; }
button { -webkit-touch-callout: none; }
/* Wie net een punt kreeg, licht kort op; zo valt een verkeerde tik meteen op. */
.veld-stand strong.is-net { animation: veld-punt .45s ease-out; }
@keyframes veld-punt { 0% { color: var(--v-orange); transform: scale(1.12); } 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .veld-stand strong.is-net { animation: none; } }
/* De teamnaam klein in de plusknop: ook met een lange of zelf getypte naam is duidelijk wie het punt krijgt. */
.veld-plus-knop { display: grid; place-content: center; gap: 2px; min-width: 0; padding: 6px 8px; }
.veld-plus-naam { padding-block: 3px; margin-block: -3px; overflow: hidden; max-width: 100%; font-size: 12px; font-weight: 600; opacity: .85; text-overflow: ellipsis; white-space: nowrap; }
.veld-reset:disabled { visibility: hidden; }

/* ---------- v1.15 · In een venster van het overzicht (?ingebed=1) ---------- */
/* Geen logo en andere onderdelen van de losse pagina; de schakelaar en beide acties blijven. Het venster
   is 360 tot 600 px breed en schuift zelf, zonder de pagina erachter mee te trekken. */
html[data-ingebed] [data-alleen-los] { display: none !important; }
html[data-ingebed], html[data-ingebed] body { overscroll-behavior: contain; }

/* ---------- v1.24 · Tablet-landscape en laptop (vanaf 900 px): klok links, score rechts ---------- */
/* Aan het veld ligt de tablet meestal dwars. Dan staan de klok en de telling naast elkaar, allebei helemaal in
   beeld, en staan de twee acties onderin elk onder het eigen paneel. Wedstrijd kiezen en de uitslag blijven één
   kolom in het midden. Alles staat achter min-width: de telefoon en het venster in het overzicht (tot 600 px)
   veranderen niet. */
@media screen and (min-width: 900px) {
    .veld-top-binnen, .veld-main, .veld-nav-binnen { max-width: 1120px; }
    .veld-top-binnen { padding-right: max(20px, env(safe-area-inset-right)); padding-left: max(20px, env(safe-area-inset-left)); }
    .veld-main { gap: 20px; padding: 20px max(20px, env(safe-area-inset-right)) 8px max(20px, env(safe-area-inset-left)); }
    .veld-main > section[data-veld-view="klok"] { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 20px; }
    /* Beide kaarten even hoog; de klok staat in het midden van de zijne. */
    .veld-klok { display: grid; align-content: center; }
    .veld-main > section[data-veld-view="veld"], .veld-main > section[data-veld-view="uitslag"], .veld-melding, .veld-leeg { width: 100%; max-width: 640px; justify-self: center; }
    .veld-kaart { padding: 20px; border-radius: 18px; }
    .veld-bord-voet { margin: 16px -20px -20px; padding-left: 20px; border-radius: 0 0 18px 18px; }
    .veld-tijd { margin: 6px 0 10px; font-size: clamp(96px, 11.5vw, 168px); }
    .veld-voortgang { margin-bottom: 18px; }
    .veld-bijstel { margin-bottom: 16px; }
    .veld-stand { margin: 8px 0 14px; }
    .veld-stand strong { font-size: clamp(96px, 11.5vw, 168px); }
    .veld-plus-knop { min-height: 92px; font-size: 34px; }
    .veld-klokknoppen .veld-knop { min-height: 60px; }
    .veld-nav-binnen { gap: 20px; }
}
/* Laag en breed (bijvoorbeeld 1024 × 600): iets kleiner, zodat beide panelen boven de balk blijven. */
@media screen and (min-width: 900px) and (max-height: 640px) {
    .veld-main { gap: 16px; padding-top: 12px; }
    .veld-kaart { padding: 14px; }
    .veld-bord-voet { margin: 12px -14px -14px; padding-left: 14px; }
    .veld-tijd { margin: 2px 0 6px; font-size: clamp(64px, 8vw, 96px); }
    .veld-voortgang, .veld-bijstel { margin-bottom: 10px; }
    .veld-stand { margin: 2px 0 8px; }
    .veld-stand strong { font-size: clamp(64px, 8vw, 96px); }
    .veld-plus-knop { min-height: 64px; }
    .veld-klokknoppen .veld-knop { min-height: 52px; }
}

/* ---------- v1.31 · Onderbalk bescheiden en direct onder de inhoud ---------- */
/* De twee stappen onderin ('Andere wedstrijd' en 'Uitslag') zijn geen grote oranje knoppen meer maar rustige knoppen
   op één regel: navy tekst op wit met een oranje icoon; de open stap licht oranje. De balk staat niet meer vast
   onderaan het scherm met lege ruimte erboven, maar direct onder de inhoud; is de inhoud langer dan het scherm,
   dan blijft hij onderin plakken (sticky). Verzenden gebeurt alleen met 'Uitslag verzenden' in het scherm Uitslag. */
body.veld-body { padding-bottom: 0; }
.veld-main { padding-bottom: 12px; }
.veld-nav { position: sticky; bottom: 0; padding: 4px max(12px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); border-top: 0; background: var(--v-page); box-shadow: none; }
.veld-nav-actie { min-height: 44px; padding: 6px 12px; border: 1.5px solid var(--v-line); border-radius: 12px; color: var(--v-navy); background: var(--v-surface); box-shadow: none; font-size: 15px; font-weight: 600; text-align: center; white-space: nowrap; }
.veld-nav-actie .veld-nav-icoon { width: 18px; height: 18px; color: var(--v-orange); }
.veld-nav-actie:hover:not(:disabled) { border-color: var(--v-streep); }
.veld-nav-actie:active:not(:disabled) { transform: translateY(1px); background: var(--v-surface-2); box-shadow: none; }
.veld-nav-actie.active { border-color: var(--v-orange); color: var(--v-orange-tekst); background: var(--v-orange-soft); box-shadow: none; }
.veld-nav-actie.active .veld-nav-icoon { color: var(--v-orange-tekst); }
.veld-nav-actie:disabled { opacity: .45; }
@media (min-width: 390px) { .veld-nav-binnen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .veld-nav-actie:active:not(:disabled) { transform: none; } }

/* ---------- v1.45 · Uitleg (vraagteken), telling boven de klok, einduitslag direct invullen ---------- */
/* Rechtsboven een vraagteken: de uitleg voor de teller als venster boven de veldklok (×, Escape of een tik ernaast
   sluit het). De telling staat boven de klok; daartussen een duidelijke knop voor wie de stand op een eigen
   scorebord bijhoudt en alleen de einduitslag invult. Op tablet en laptop blijft de klok links en de telling rechts. */
.veld-help { display: grid; place-items: center; flex: 0 0 auto; width: 34px; height: 34px; padding: 0; border: 1.5px solid var(--v-line); border-radius: 50%; color: var(--v-navy); background: var(--v-surface); }
.veld-help:active { transform: scale(.94); }
.veld-help svg { display: block; }
.veld-direct { width: 100%; min-height: 52px; color: var(--v-navy); font-size: 16px; }
.veld-direct svg { flex: 0 0 auto; color: var(--v-orange-tekst); }
.veld-uitleg-venster { width: min(640px, calc(100vw - 16px)); height: calc(100dvh - 24px); max-width: none; max-height: none; margin: auto; padding: 0; border: 0; border-radius: 16px; color: var(--v-text); background: var(--v-surface); box-shadow: var(--v-zweef); overflow: hidden; }
.veld-uitleg-venster[open] { display: flex; flex-direction: column; }
.veld-uitleg-venster::backdrop { background: var(--v-overlay); }
.veld-uitleg-kop { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-bottom: 1px solid var(--v-line); }
.veld-uitleg-kop h2 { flex: 1 1 auto; min-width: 0; margin: 0; overflow: hidden; font-size: 16px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.veld-uitleg-sluit { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--v-line); border-radius: 12px; color: var(--v-navy); background: var(--v-surface); font-size: 24px; line-height: 1; }
.veld-uitleg-frame { flex: 1 1 auto; width: 100%; min-height: 0; border: 0; background: #F4F6FA; }
@media (prefers-reduced-motion: reduce) { .veld-help:active { transform: none; } }
@media screen and (min-width: 900px) {
    .veld-main > section[data-veld-view="klok"] { grid-template-areas: "klok bord"; }
    .veld-klok { grid-area: klok; }
    .veld-bord { grid-area: bord; }
}

/* ---------- v1.46 · Telefoon: alles op één scherm (telling, einduitslag, klok en Start) ---------- */
/* Sinds v1.45 staat de telling boven de klok. Op de telefoon (tot 900 px) de klok iets kleiner en de bijstelknoppen
   lager met minder ruimte ertussen, zodat de hele veldklok zonder zoomen of scrollen boven de balk onderin past.
   Per schermhoogte, zodat de lage-schermregels hierboven niet groter worden. */
@media screen and (max-width: 899px) {
    .veld-bijstel { gap: 8px; }
    .veld-bijstel > span { gap: 4px; }
    .veld-bijstel-knop { min-height: 40px; }
    .veld-klokknoppen { gap: 12px; }
    .veld-direct { min-height: 44px; }
}
@media screen and (max-width: 899px) and (min-height: 761px) {
    .veld-main { gap: 10px; }
    .veld-tijd { margin: 0 0 4px; font-size: clamp(56px, 18vw, 84px); }
    .veld-voortgang, .veld-bijstel { margin-bottom: 10px; }
    .veld-klokknoppen .veld-knop { min-height: 52px; }
}
@media screen and (max-width: 899px) and (min-height: 641px) and (max-height: 760px) {
    .veld-tijd { font-size: clamp(46px, 15vw, 60px); }
    .veld-stand strong { font-size: clamp(48px, 16vw, 68px); }
    .veld-plus-knop { min-height: 56px; }
    .veld-herstel { margin-top: 8px; }
    .veld-klokknoppen .veld-knop { min-height: 46px; }
}
/* Lage telefoons (bijvoorbeeld 375 × 667): ook de telling iets compacter. */
@media screen and (max-width: 899px) and (max-height: 700px) {
    .veld-tijd { font-size: clamp(40px, 12vw, 50px); line-height: 1; }
    .veld-stand strong { font-size: clamp(42px, 13vw, 56px); line-height: 1; }
    .veld-plus-knop { min-height: 52px; }
    .veld-herstel { margin-top: 6px; }
    .veld-herstel .veld-knop { min-height: 40px; }
    .veld-bord-voet { min-height: 40px; margin-top: 8px; }
    .veld-bijstel-knop { min-height: 36px; }
    .veld-klokknoppen .veld-knop { min-height: 44px; }
}

/* ---------- v1.47 · Kop van de veldklok: het veld op de tweede regel ---------- */
/* De zaalnaam heeft de hele eerste regel (geen 'De D…' meer); 'Veld C1' staat vet vooraan op de tweede regel, vóór de
   dag, de tijd en de poule, en valt dus nooit weg. */
.veld-top-tekst > span .veld-kop-veld { color: var(--v-navy); font-weight: 700; }

/* ---------- v1.47 · Telefoon: telling en een kleinere klok samen in beeld, ook met de balken van de browser ---------- */
/* Een telefoon heeft minder ruimte dan het scherm: de adres- en knoppenbalk van de browser gaan eraf (390 × 844 wordt
   in Safari ongeveer 390 × 664). 'Einduitslag invullen' is een compacte link onderin de telling, naast Reset; de klok
   blijft, maar kleiner. Deze regels staan onderaan en gelden per schermhoogte, zodat ze de oudere laag-scherm-regels
   hierboven vervangen. Vanaf 900 px (tablet, laptop) verandert er niets. */
.veld-bord-voet .veld-direct { display: inline-flex; align-items: center; gap: 6px; width: auto; min-width: 0; min-height: 44px; padding: 0 8px 0 0; border: 0; color: var(--v-orange-tekst); background: transparent; font-size: 14px; font-weight: 600; white-space: nowrap; }
.veld-bord-voet .veld-direct svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.veld-voet-rechts { display: flex; align-items: center; gap: 10px; min-width: 0; }
.veld-voet-rechts .veld-eerder { justify-content: flex-end; text-align: right; }
@media screen and (max-width: 899px) {
    .veld-main { gap: 8px; padding-top: 8px; }
    .veld-kaart { padding: 10px 12px; }
    .veld-team { gap: 2px; }
    .veld-team-logo { width: 28px; height: 28px; }
    .veld-stand { margin: 0 0 4px; }
    .veld-stand strong { font-size: clamp(48px, 15vw, 64px); line-height: 1; }
    .veld-plus-knop { min-height: 58px; font-size: 26px; }
    .veld-herstel { margin-top: 6px; }
    .veld-herstel .veld-knop { min-height: 40px; }
    .veld-bord-voet { min-height: 40px; margin: 8px -12px -10px; padding: 0 4px 0 10px; }
    .veld-bord-voet .veld-direct, .veld-reset { min-height: 40px; }
    .veld-fase { min-height: 24px; }
    .veld-tijd { margin: 0 0 4px; font-size: clamp(40px, 12.5vw, 54px); line-height: 1; }
    .veld-voortgang, .veld-bijstel { margin-bottom: 8px; }
    .veld-bijstel-knop { min-height: 36px; }
    .veld-klokknoppen .veld-knop { min-height: 46px; }
}
/* Hoge telefoons zonder veel balken: iets ruimer. */
@media screen and (max-width: 899px) and (min-height: 800px) {
    .veld-stand strong { font-size: clamp(56px, 17vw, 76px); }
    .veld-plus-knop { min-height: 66px; }
    .veld-tijd { font-size: clamp(46px, 14vw, 62px); }
    .veld-bijstel-knop { min-height: 40px; }
    .veld-klokknoppen .veld-knop { min-height: 50px; }
}
/* Lage schermen (bijvoorbeeld 375 × 553 in Safari): nog compacter. */
@media screen and (max-width: 899px) and (max-height: 620px) {
    .veld-main { gap: 6px; padding-top: 6px; }
    .veld-kaart { padding-top: 8px; padding-bottom: 8px; }
    .veld-bord-voet { margin-bottom: -8px; }
    .veld-team-logo { width: 24px; height: 24px; }
    .veld-team-logo .club-logo, .veld-team-logo .club-logo img { width: 20px; height: 17px; }
    .veld-stand strong { font-size: clamp(40px, 12vw, 50px); }
    .veld-plus-knop { min-height: 50px; font-size: 24px; }
    .veld-herstel .veld-knop, .veld-bord-voet, .veld-bord-voet .veld-direct, .veld-reset { min-height: 36px; }
    .veld-tijd { font-size: clamp(34px, 10vw, 44px); }
    .veld-bijstel-knop { min-height: 32px; }
    .veld-klokknoppen .veld-knop { min-height: 42px; }
}

/* ---------- v1.49 · Kop: de tijd en de verbindingsstip op de regel van de zaal ---------- */
/* Zo heeft de tweede regel (Veld C1 · dag · tijd · poule) de hele breedte tot het vraagteken en wordt hij niet
   afgekapt. Alleen de indeling: de volgorde in de pagina blijft. Afstanden als marge, niet als gap: wat er niet is
   (het logo in de pop-up, de stip en het vraagteken in de telapp) laat dan geen gat achter. */
.veld-top-binnen { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto auto; grid-template-rows: auto auto; gap: 0; align-items: center; }
.veld-top-tekst, .veld-top-rechts { display: contents; }
.veld-logo { grid-column: 1; grid-row: 1 / span 2; margin-right: 10px; }
.veld-top-tekst > strong { grid-column: 2; grid-row: 1; }
.veld-top-tekst > span { grid-column: 2 / 5; grid-row: 2; }
.veld-nu { grid-column: 3; grid-row: 1; margin-left: 10px; }
.veld-verbinding { grid-column: 4; grid-row: 1; margin-left: 8px; }
.veld-help { grid-column: 5; grid-row: 1 / span 2; margin-left: 10px; }
.veld-thema { grid-column: 6; grid-row: 1 / span 2; margin-left: 8px; }
@media (max-width: 350px) {
    .veld-logo { margin-right: 8px; }
    .veld-help { margin-left: 8px; }
    .veld-thema { margin-left: 6px; }
}

/* ---------- v1.50 · Kop 'C1: De Dissel' en de wedstrijdcode bovenin de telling ---------- */
/* Het veld vooraan op de eerste regel ('C1:'), de zaalnaam krijgt de puntjes. De wedstrijdcode staat midden tussen de
   twee logo's, los van de rest (absoluut): de telling wordt er niet hoger van. */
.veld-top-tekst > strong { column-gap: .3em; }
.veld-teams { position: relative; }
.veld-code { position: absolute; top: 16px; left: 50%; max-width: 38%; overflow: hidden; padding: 4px 9px; border: 1px solid var(--v-line); border-radius: 999px; color: var(--v-navy); background: var(--v-surface-2); font-size: 12px; font-weight: 700; line-height: 1.2; letter-spacing: .03em; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; transform: translate(-50%, -50%); }
@media screen and (max-width: 899px) {
    .veld-code { top: 14px; }
}
@media screen and (max-width: 899px) and (max-height: 620px) {
    .veld-code { top: 12px; padding: 3px 8px; font-size: 11px; }
}

/* ---------- v1.51 · Veldklok: de tijd en de verbindingsstip linksboven in het klokblok ---------- */
/* In de kop staat alleen nog 'Veld C1: De Dissel' met daaronder dag, speeltijd en poule; die regel heeft zo de hele
   breedte tot het vraagteken. Linksboven in het klokblok: tijd en stip, dan de fase; 'Gespeeld' blijft rechts. De
   telapp houdt de tijd in de kop (v1.49). */
.veld-fase { justify-content: flex-start; }
.veld-fase .veld-gespeeld { margin-left: auto; }
.veld-klok-nu { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; margin-right: 2px; }
.veld-fase .veld-nu { display: inline; margin: 0; color: var(--v-muted); font-size: 13px; }
.veld-fase .veld-verbinding { margin: 0; }

/* ---------- v1.52 · Veldklok: geen zoom, traploos passend op één scherm, uitslag delen ---------- */
/* Geen zoom: knijpen en dubbeltikken doen niets (de viewport en het script doen de rest, ook op iOS). Geen vergroten
   van letters bij draaien, geen menu bij lang drukken. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.veld-body:not(.tel-body) { touch-action: pan-x pan-y; -webkit-touch-callout: none; }
/* Uitslag delen: ronde knoppen onderin de uitslag (WhatsApp, mail, het deelmenu van het toestel, kopiëren). */
.veld-deel { display: flex; align-items: center; gap: 8px; margin-top: 2px; padding-top: 12px; border-top: 1px solid var(--v-line); }
.veld-deel-titel { margin-right: auto; color: var(--v-muted); font-size: 14px; font-weight: 600; }
.veld-deel-knop { display: grid; flex: 0 0 auto; width: 48px; height: 48px; padding: 0; place-items: center; border: 1px solid var(--v-line); border-radius: 50%; color: var(--v-navy); background: var(--v-surface-2); }
.veld-deel-knop:active { transform: scale(.94); }
.veld-deel-knop svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.veld-deel-knop .veld-deel-vlak { fill: #25D366; stroke: none; }
.veld-deel-knop .veld-deel-hoorn { fill: #FFFFFF; stroke: none; }
.veld-deel-knop .veld-deel-vink { display: none; }
.veld-deel-knop.is-gekopieerd { border-color: var(--v-teal); color: var(--v-teal-dark); }
.veld-deel-knop.is-gekopieerd .veld-deel-vink { display: inline; }
@media (prefers-reduced-motion: reduce) { .veld-deel-knop:active { transform: none; } }
/* Traploos passend (telefoon staand): stand, +1, −1, de voetregel, de klok, de bijstelknoppen en Start schalen mee met
   de zichtbare hoogte, zodat alles op één scherm staat en de knoppen op een lange telefoon groter worden. Op 390 × 664
   precies als in v1.47. Maat is svh: de hoogte mét de balken van de browser in beeld. Met dvh (of 100 % hoogte als
   minimum) werd de pagina in sommige iOS-browsers hoger dan het scherm: dan schoof hij na scrollen of het toetsenbord
   omhoog, de kop viel weg en onderin bleef een lege strook. Browsers zonder svh houden de stappen hierboven. */
@supports (height: 100svh) {
    body.veld-body:not(.tel-body) { min-height: 100svh; }
    @media screen and (max-width: 899px) and (orientation: portrait) {
        body.veld-body:not(.tel-body) { --veld-ruimte: calc(100svh - 320px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
        body.veld-body:not(.tel-body) .veld-stand strong { font-size: min(19vw, clamp(38px, calc(var(--veld-ruimte) * .17), 92px)); }
        body.veld-body:not(.tel-body) .veld-plus-knop { min-height: clamp(44px, calc(var(--veld-ruimte) * .169), 84px); }
        body.veld-body:not(.tel-body) .veld-herstel .veld-knop { min-height: clamp(34px, calc(var(--veld-ruimte) * .116), 50px); }
        body.veld-body:not(.tel-body) .veld-bord-voet, body.veld-body:not(.tel-body) .veld-bord-voet .veld-direct, body.veld-body:not(.tel-body) .veld-reset { min-height: clamp(34px, calc(var(--veld-ruimte) * .119), 48px); }
        body.veld-body:not(.tel-body) .veld-tijd { font-size: min(15vw, clamp(32px, calc(var(--veld-ruimte) * .142), 76px)); }
        body.veld-body:not(.tel-body) .veld-bijstel-knop { min-height: clamp(30px, calc(var(--veld-ruimte) * .105), 46px); }
        body.veld-body:not(.tel-body) .veld-klokknoppen .veld-knop { min-height: clamp(40px, calc(var(--veld-ruimte) * .134), 64px); }
    }
    /* Heel laag (bijvoorbeeld 320 × 500 of 375 × 548 met balken): ook de vaste ruimte kleiner. */
    @media screen and (max-width: 899px) and (orientation: portrait) and (max-height: 580px) {
        body.veld-body:not(.tel-body) { --veld-ruimte: calc(100svh - 292px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
        body.veld-body:not(.tel-body) .veld-main { gap: 6px; padding-top: 4px; padding-bottom: 6px; }
        body.veld-body:not(.tel-body) .veld-main > section[data-veld-view="klok"] { gap: 6px; }
        body.veld-body:not(.tel-body) .veld-kaart { padding-top: 6px; padding-bottom: 6px; }
        body.veld-body:not(.tel-body) .veld-bord-voet { margin-top: 4px; margin-bottom: -6px; }
        body.veld-body:not(.tel-body) .veld-herstel { margin-top: 4px; }
        body.veld-body:not(.tel-body) .veld-fase { min-height: 22px; }
        body.veld-body:not(.tel-body) .veld-fase .veld-chip { min-height: 22px; padding-top: 1px; padding-bottom: 1px; }
        body.veld-body:not(.tel-body) .veld-voortgang, body.veld-body:not(.tel-body) .veld-bijstel { margin-bottom: 5px; }
        body.veld-body:not(.tel-body) .veld-team-logo { width: 22px; height: 22px; }
        body.veld-body:not(.tel-body) .veld-team-logo .club-logo, body.veld-body:not(.tel-body) .veld-team-logo .club-logo img { width: 18px; height: 15px; }
        body.veld-body:not(.tel-body) .veld-plus-knop { min-height: clamp(42px, calc(var(--veld-ruimte) * .169), 84px); }
        body.veld-body:not(.tel-body) .veld-herstel .veld-knop, body.veld-body:not(.tel-body) .veld-bord-voet, body.veld-body:not(.tel-body) .veld-bord-voet .veld-direct, body.veld-body:not(.tel-body) .veld-reset { min-height: clamp(32px, calc(var(--veld-ruimte) * .116), 50px); }
        body.veld-body:not(.tel-body) .veld-bijstel-knop { min-height: clamp(28px, calc(var(--veld-ruimte) * .105), 46px); }
        body.veld-body:not(.tel-body) .veld-klokknoppen .veld-knop { min-height: clamp(40px, calc(var(--veld-ruimte) * .134), 64px); }
    }
    /* Telefoon liggend: klok links, telling rechts (zoals op een tablet), passend in de lage hoogte. */
    @media screen and (orientation: landscape) and (max-height: 540px) and (min-width: 600px) and (max-width: 1023px) {
        body.veld-body:not(.tel-body) { --veld-paneel: calc(100svh - 128px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
        body.veld-body:not(.tel-body) .veld-top-binnen, body.veld-body:not(.tel-body) .veld-main, body.veld-body:not(.tel-body) .veld-nav-binnen { max-width: none; }
        body.veld-body:not(.tel-body) .veld-main > section[data-veld-view="veld"], body.veld-body:not(.tel-body) .veld-main > section[data-veld-view="uitslag"], body.veld-body:not(.tel-body) .veld-melding, body.veld-body:not(.tel-body) .veld-leeg { width: 100%; max-width: 640px; justify-self: center; }
        body.veld-body:not(.tel-body) .veld-top-binnen { padding-top: 4px; padding-bottom: 5px; }
        body.veld-body:not(.tel-body) .veld-main { gap: 6px; padding-top: 6px; padding-bottom: 4px; }
        body.veld-body:not(.tel-body) .veld-main > section[data-veld-view="klok"] { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "klok bord"; align-items: stretch; gap: 10px; }
        body.veld-body:not(.tel-body) .veld-klok { grid-area: klok; display: grid; align-content: center; }
        body.veld-body:not(.tel-body) .veld-bord { grid-area: bord; }
        body.veld-body:not(.tel-body) .veld-kaart { padding: 6px 12px; border-radius: 14px; }
        body.veld-body:not(.tel-body) .veld-teams .veld-team:not(.is-bewerk) { grid-auto-flow: column; justify-content: center; align-items: center; gap: 6px; padding-inline: 30px; }
        body.veld-body:not(.tel-body) .veld-team-logo { width: 22px; height: 22px; }
        body.veld-body:not(.tel-body) .veld-team-logo .club-logo, body.veld-body:not(.tel-body) .veld-team-logo .club-logo img { width: 18px; height: 15px; }
        body.veld-body:not(.tel-body) .veld-team-naam { -webkit-line-clamp: 1; font-size: 14px; }
        /* De code op een eigen regel boven de teams: naast elkaar is er tussen de namen geen plek. */
        body.veld-body:not(.tel-body) .veld-teams { row-gap: 2px; }
        body.veld-body:not(.tel-body) .veld-teams .veld-code { position: static; grid-column: 1 / -1; grid-row: 1; justify-self: center; max-width: 60%; padding: 1px 8px; font-size: 11px; transform: none; }
        body.veld-body:not(.tel-body) .veld-teams .veld-team-weg, body.veld-body:not(.tel-body) .veld-teams .veld-team-herstel { top: -3px; width: 28px; height: 28px; font-size: 16px; }
        body.veld-body:not(.tel-body) .veld-stand { margin: 0 0 2px; }
        body.veld-body:not(.tel-body) .veld-stand strong { font-size: clamp(34px, calc(var(--veld-paneel) * .24), 72px); line-height: 1; }
        body.veld-body:not(.tel-body) .veld-plus-knop { min-height: clamp(40px, calc(var(--veld-paneel) * .22), 64px); font-size: 22px; }
        body.veld-body:not(.tel-body) .veld-plus-knop .veld-plus-naam { display: none; }
        body.veld-body:not(.tel-body) .veld-herstel { margin-top: 4px; }
        body.veld-body:not(.tel-body) .veld-herstel .veld-knop, body.veld-body:not(.tel-body) .veld-bord-voet, body.veld-body:not(.tel-body) .veld-bord-voet .veld-direct, body.veld-body:not(.tel-body) .veld-reset { min-height: clamp(30px, calc(var(--veld-paneel) * .15), 44px); }
        body.veld-body:not(.tel-body) .veld-bord-voet { margin: 4px -12px -6px; padding-left: 12px; border-radius: 0 0 14px 14px; }
        body.veld-body:not(.tel-body) .veld-fase { min-height: 22px; }
        body.veld-body:not(.tel-body) .veld-tijd { margin: 0 0 4px; font-size: clamp(34px, calc(var(--veld-paneel) * .28), 84px); line-height: 1; }
        body.veld-body:not(.tel-body) .veld-voortgang, body.veld-body:not(.tel-body) .veld-bijstel { margin-bottom: 6px; }
        body.veld-body:not(.tel-body) .veld-bijstel-knop { min-height: clamp(28px, calc(var(--veld-paneel) * .15), 44px); }
        body.veld-body:not(.tel-body) .veld-klokknoppen .veld-knop { min-height: clamp(38px, calc(var(--veld-paneel) * .2), 56px); }
        body.veld-body:not(.tel-body) .veld-nav { padding-top: 2px; padding-bottom: calc(6px + env(safe-area-inset-bottom)); }
        body.veld-body:not(.tel-body) .veld-nav-actie { min-height: 44px; }
    }
}

/* ---------- v1.53 · Telapp (/tel/) als veldklok zonder competitie ---------- */
/* Dezelfde telling en klok als de veldklok (alle regels hierboven gelden ook hier: geen zoom, traploos op één scherm,
   liggend twee panelen). Eigen: een bal in plaats van een clublogo, een potlood om een teamnaam te wijzigen, het
   tabblad Wedstrijd (teams, aantal sets, speeltijd) en 'Wedstrijd afsluiten' in het bevestigvenster. */
.tel-team-logo .tel-bal { width: 20px; height: 20px; fill: none; stroke: #27285B; stroke-width: 1.4; stroke-linecap: round; }
.tel-team-wijzig svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tel-instellingen { display: grid; gap: 16px; }
.tel-veld { display: grid; gap: 6px; min-width: 0; color: var(--v-muted); font-size: 13px; font-weight: 600; }
.tel-veld input { box-sizing: border-box; width: 100%; min-width: 0; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--v-line); border-radius: 12px; color: var(--v-text); background: var(--v-invoer); font: 600 16px Poppins, system-ui, sans-serif; }
.tel-veld input::placeholder { color: var(--v-subtle); font-weight: 500; }
.tel-keuze { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.tel-keuze-knop { min-width: 0; min-height: 44px; padding: 0; border: 1.5px solid var(--v-line); border-radius: 12px; color: var(--v-navy); background: var(--v-surface-2); font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.tel-keuze-knop[aria-pressed="true"] { border-color: var(--v-orange); color: var(--v-orange-tekst); background: var(--v-orange-soft); }
.tel-stapper { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; align-items: center; gap: 8px; text-align: center; }
.tel-stapper strong { color: var(--v-navy); font-size: 18px; font-variant-numeric: tabular-nums; }
.tel-nieuw, .tel-bevestig-einde { width: 100%; }
.tel-bevestig-einde { margin-top: 10px; }
.tel-uitslag-sets { display: grid; gap: 10px; }
@media screen and (min-width: 900px) {
    .veld-main > section[data-veld-view="wedstrijd"] { width: 100%; max-width: 640px; justify-self: center; }
}
@media screen and (orientation: landscape) and (max-height: 540px) and (min-width: 600px) and (max-width: 1023px) {
    .veld-main > section[data-veld-view="wedstrijd"] { width: 100%; max-width: 640px; justify-self: center; }
}

/* ---------- v1.58 · Teamlogo's breed en laag, transparant in licht én donker ---------- */
/* Het logo wint in de breedte, niet in de hoogte: het vak is even hoog als het rondje van vroeger (de telling wordt niet
   hoger) en twee keer zo breed; het logo past erin (contain) en staat in het midden. Geen kader, cirkel of pil: de
   clublogo's zijn transparant en staan direct op de kaart, ook in donker. Het logo krijgt de kleur van de kaart, zodat
   het balletje eronder (voor een club zonder logo) niet doorschijnt. Donkere logo's (Switch, Voleem, AFAS-LEOS; vlag
   data-donker in switch-clubs.js) worden in donker licht gemaakt; hun eigen achtergrond moet dan transparant blijven,
   dus verdwijnt het balletje zolang het logo er is. De wedstrijdcode staat op halve hoogte tussen de logo's. */
body.veld-body .veld-teams { --logo-b: 64px; --logo-h: 32px; }
body.veld-body .veld-teams .veld-team-logo { box-sizing: border-box; width: var(--logo-b); height: var(--logo-h); padding: 0; place-items: center; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
body.veld-body .veld-teams .veld-team-logo .club-logo, body.veld-body .veld-teams .veld-team-logo .club-logo img { place-self: center; width: var(--logo-b); height: var(--logo-h); }
body.veld-body .veld-teams .veld-team-logo .club-logo img { object-fit: contain; object-position: center; background: var(--v-surface); }
body.veld-body .veld-teams .veld-team-logo .club-logo-fallback svg, body.veld-body .veld-teams .veld-team-logo .tel-bal { width: 22px; height: 22px; }
body.veld-body .veld-teams .veld-team-logo .club-logo-fallback svg { color: var(--v-navy); }
body.veld-body .veld-teams .veld-team-logo .tel-bal { stroke: var(--v-navy); }
body.veld-body .veld-teams .veld-code { top: calc(var(--logo-h) / 2); }
html[data-theme="dark"] body.veld-body .veld-teams .veld-team-logo .club-logo img[data-donker] { background: transparent; filter: invert(1) hue-rotate(180deg); }
html[data-theme="dark"] body.veld-body .veld-teams .veld-team-logo .club-logo:has(img[data-donker]) .club-logo-fallback { visibility: hidden; }
@media screen and (max-width: 899px) {
    body.veld-body .veld-teams { --logo-b: 56px; --logo-h: 28px; }
}
@media screen and (max-width: 899px) and (max-height: 620px) {
    body.veld-body .veld-teams { --logo-b: 48px; --logo-h: 24px; }
    body.veld-body .veld-teams .veld-team-logo .club-logo-fallback svg, body.veld-body .veld-teams .veld-team-logo .tel-bal { width: 18px; height: 18px; }
}
@supports (height: 100svh) {
    @media screen and (max-width: 899px) and (orientation: portrait) and (max-height: 580px) {
        body.veld-body .veld-teams { --logo-b: 44px; --logo-h: 22px; }
    }
    /* Heel laag (320 × 500, de kleinste iPhone met de balken van Safari): iets krappere ruimtes. */
    @media screen and (max-width: 899px) and (orientation: portrait) and (max-height: 520px) {
        body.veld-body:not(.tel-body) .veld-main { gap: 4px; padding-top: 2px; }
        body.veld-body:not(.tel-body) .veld-main > section[data-veld-view="klok"] { gap: 4px; }
    }
    @media screen and (orientation: landscape) and (max-height: 540px) and (min-width: 600px) and (max-width: 1023px) {
        body.veld-body .veld-teams { --logo-b: 44px; --logo-h: 22px; }
        body.veld-body .veld-teams .veld-team-logo .club-logo-fallback svg, body.veld-body .veld-teams .veld-team-logo .tel-bal { width: 16px; height: 16px; }
    }
}

/* ---------- v1.59 · Aftelklok met lucht boven en onder ---------- */
/* De tijd stond vlak onder de regel met 'Set 1' en dicht op de balk. Nu marge boven en onder, meegroeiend met de
   zichtbare hoogte. De ruimte daarvoor komt naar verhouding van de rest (stand, knoppen, klok: staand 4 %, liggend 5 %
   kleiner), zodat alles op één scherm blijft. Waar alles al op de kleinste maat staat, is er geen ruimte over: tot 520
   hoog (liggend tot 330) blijft de marge zoals hij was, en vanaf 521 en 581 (waar de compacte stappen van v1.52
   wisselen) loopt hij geleidelijk op, zodat ook lange teamnamen, de pauze en de wissel nergens gaan schuiven. Tablet
   staand krijgt dezelfde lucht (begrensd); desktop en tablet liggend veranderen niet. */
@supports (height: 100svh) {
    @media screen and (max-width: 899px) and (orientation: portrait) {
        body.veld-body:not(.tel-body) { --veld-ruimte: calc((100svh - 320px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .96); }
        body.veld-body:not(.tel-body) .veld-tijd { margin: clamp(3px, min(calc(var(--veld-ruimte) * .07 - 14.5px), calc(var(--veld-ruimte) * .025)), 14px) 0 clamp(5px, min(calc(var(--veld-ruimte) * .07 - 12.5px), calc(var(--veld-ruimte) * .03)), 16px); }
    }
    @media screen and (max-width: 899px) and (orientation: portrait) and (max-height: 580px) {
        body.veld-body:not(.tel-body) { --veld-ruimte: calc((100svh - 292px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .96); }
        body.veld-body:not(.tel-body) .veld-tijd { margin: clamp(0px, min(calc(var(--veld-ruimte) * .07 - 15.4px), calc(var(--veld-ruimte) * .025)), 14px) 0 clamp(4px, min(calc(var(--veld-ruimte) * .05 - 7px), calc(var(--veld-ruimte) * .03)), 16px); }
    }
    @media screen and (max-width: 899px) and (orientation: portrait) and (max-height: 520px) {
        body.veld-body:not(.tel-body) .veld-tijd { margin: 0 0 4px; }
    }
    @media screen and (orientation: landscape) and (max-height: 540px) and (min-width: 600px) and (max-width: 1023px) {
        body.veld-body:not(.tel-body) { --veld-paneel: calc((100svh - 128px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * .95); }
        body.veld-body:not(.tel-body) .veld-tijd { margin: clamp(4px, calc(var(--veld-paneel) * .03), 10px) 0 clamp(6px, calc(var(--veld-paneel) * .04), 12px); }
    }
    @media screen and (orientation: landscape) and (max-height: 330px) and (min-width: 600px) and (max-width: 1023px) {
        body.veld-body:not(.tel-body) .veld-tijd { margin: 0 0 4px; }
    }
}
/* In de wissel staat de hoofdknop ('Start set 2 nu') zo groot als Pauze ernaast; in de telapp liep hij anders over drie
   regels en schoof de pagina. Op de smalste telefoons (tot 349 breed) blijft 'Hervat set 1' op één regel. */
body.veld-body .veld-klok[data-phase="changeover"] .veld-hoofdknop { font-size: 16px; }
@media screen and (max-width: 349px) {
    body.veld-body .veld-klokknoppen { gap: 10px; }
    body.veld-body .veld-hoofdknop { gap: 6px; padding-inline: 10px; font-size: 17px; }
}