:root{
  --paper:#f2f2ef; --card:#fff; --ink:#1a1a1a; --muted:#8e8b85; --line:#e0dfd9;
  --rood:#c8102e; --diep:#8e0b20; --zacht:#fbeaed;
  --wit:#3d4450; --pitch:#14401f; --ok:#1a6e3c; --geel:#f2c94c;
  --r:14px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{background:var(--paper);color:var(--ink);font-family:'Barlow',ui-sans-serif,system-ui,-apple-system,sans-serif;
  font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;
  padding-bottom:calc(78px + env(safe-area-inset-bottom))}
h1,h2,h3,.num{font-family:'Barlow Condensed','Barlow',sans-serif}
h1{font-size:29px;font-weight:700;letter-spacing:-.01em;margin:0}
h2{font-size:20px;font-weight:600;margin:0 0 10px}
h3{font-size:17px;font-weight:600;margin:0 0 8px}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:16px;color:inherit}
:focus-visible{outline:3px solid #2563eb;outline-offset:2px;border-radius:6px}
[disabled]{opacity:.45;pointer-events:none}

.wrap{max-width:640px;margin:0 auto;padding:14px 14px 24px}
.brand{display:flex;align-items:center;gap:12px;background:var(--card);
  border:0;border-bottom:3px solid var(--rood);padding:calc(10px + env(safe-area-inset-top)) 14px 10px;
  width:100%;margin:0;font:inherit;color:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.brand:active{background:var(--paper)}
.crest{width:40px;height:46px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:15px;letter-spacing:.04em}
.crest img{max-width:100%;max-height:100%;display:block}
.crest span{display:none}
.crest.geen{background:var(--rood);color:#fff;border-radius:5px}
.crest.geen span{display:block}
.woord{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:19px;font-weight:700;
  letter-spacing:.12em;line-height:1.1}
.wisselIcon{font-size:13px;color:var(--muted);font-weight:400;letter-spacing:0;margin-left:2px}
.ondertitel{font-size:12px;color:var(--muted);letter-spacing:.02em}
.topbar{position:sticky;top:0;z-index:30;background:var(--paper);
  padding:calc(10px + env(safe-area-inset-top)) 14px 8px;max-width:640px;margin:0 auto;
  display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.topbar .sub{color:var(--muted);font-size:13px;margin-top:2px}
.row{display:flex;gap:8px;flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between;gap:10px}
.stack{display:grid;gap:10px}
.mt{margin-top:18px}
.grow{flex:1;min-width:0}

.btn{border:1px solid var(--line);background:var(--card);border-radius:11px;padding:11px 14px;
  font-weight:600;font-size:15px;min-height:44px;display:inline-flex;align-items:center;gap:7px;justify-content:center}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--rood{background:var(--rood);color:#fff;border-color:var(--rood)}
.btn--ghost{background:transparent;border-color:transparent;color:var(--muted);padding:8px 6px;min-height:38px}
.btn--sm{padding:7px 11px;min-height:36px;font-size:14px;border-radius:9px}
.btn--wide{width:100%}
.btn--big{min-height:54px;font-size:16px;flex-direction:column;gap:1px;line-height:1.15;padding:8px 6px}
.btn--big small{font-weight:500;font-size:11.5px;opacity:.7}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.card--flat{padding:0;overflow:hidden}
.hint{color:var(--muted);font-size:13px}
.danger{color:var(--rood)}
hr.sep{border:0;border-top:1px solid var(--line);margin:14px 0}
.empty{text-align:center;color:var(--muted);padding:24px 16px;font-size:14.5px}
.empty strong{display:block;color:var(--ink);font-size:16px;margin-bottom:4px}

/* ---------- wedstrijdblad om af te drukken of als pdf te bewaren ---------- */
#blad{display:none}
@media print{
  body{padding:0!important;background:#fff;color:#000;font-size:11pt}
  .topbar,.tabs,#view,#sheetHost,#toastHost,#gate{display:none!important}
  #blad{display:block}
  @page{size:A4 portrait;margin:14mm}
  a{color:#000;text-decoration:none}
  /* Zonder dit negeert de browser standaard achtergrondkleuren bij het
     afdrukken (het gras-groen van .pitch, de gekleurde .chip__n-rondjes) —
     nodig sinds het opstelling-extract (2.57) hier een echt, gekleurd
     veldschema toont i.p.v. enkel zwart-op-wit tekst/tabellen. */
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}
  /* Opstelling-extract (2.57/2.58): precies twee kwartjes per A4 i.p.v. het
     aantal dat toevallig past — n.a.v. Francis met screenshot: "de afdrukken
     komen niet mooi uit op het papier, kan je ervoor zorgen dat er twee
     kwartjes per A4 oppassen?". .deelblok (één per deel/helft, zie
     opstellingBladHTML()) mag nooit mee-in-tweeën-splitsen over een
     bladzijde, en na elk TWEEDE deelblok (behalve het allerlaatste, anders
     krijg je een loze lege pagina erna) komt een geforceerde paginawissel.
     .delen is een pure wrapper zodat :nth-of-type hier enkel .deelblok-
     kinderen telt — zonder die wrapper telt :nth-of-type ALLE divs mee
     (ook .kop ervoor), wat de 1e/2e-telling door de war zou gooien. */
  #blad .delen .deelblok:nth-of-type(2n):not(:last-child){break-after:page;page-break-after:always}
}
#blad .deelblok{margin-top:10px;break-inside:avoid;page-break-inside:avoid}
#blad .pitch{margin-top:4px;padding:8px 6px;gap:6px}
#blad .pline{gap:5px}
#blad .chip{width:68px;gap:1px}
#blad .chip__n{width:34px;height:34px;font-size:12px}
#blad .chip__name{max-width:68px;font-size:9.5pt;line-height:1.15}
#blad .chip__pos{font-size:8pt;padding:0 3px}
#blad h1{font-size:22pt;margin:0 0 2px}
#blad .kop{border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:14px}
#blad .meta{font-size:10pt;color:#333}
#blad .uitslag{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:34pt;font-weight:700;
  line-height:1;margin:10px 0 2px}
#blad h2{font-size:12pt;margin:16px 0 6px;border-bottom:1px solid #999;padding-bottom:3px}
#blad table{width:100%;border-collapse:collapse;font-size:9.5pt}
#blad th,#blad td{border:1px solid #bbb;padding:3px 5px;text-align:left}
#blad th{background:#eee;font-weight:600}
#blad td.c,#blad th.c{text-align:center;width:34px}
#blad td.n{text-align:right;width:38px}
#blad .ev2{font-size:10pt;line-height:1.6}
#blad .voet{margin-top:18px;border-top:1px solid #999;padding-top:6px;font-size:8.5pt;color:#555}
#blad .twee{display:grid;grid-template-columns:1fr 1fr;gap:18px}


.flag{display:inline-block;width:11px;height:11px;border-radius:3px;flex:0 0 auto}
.flag--mix{background:linear-gradient(135deg,var(--rood) 50%,var(--wit) 50%);border:1px solid var(--wit)}
.tag--beker{border-color:#9a7bd6;background:#f4efff;color:#54368f}
.tag--vriend{border-color:#8fbcd4;background:#eef7fb;color:#2f6484}
.tcard{display:block;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);padding:13px 14px}
.tcard:active{background:#f4f6f7}
.tcard .tn{font-weight:700;font-size:17px;font-family:'Barlow Condensed';letter-spacing:.01em}
.ronde{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.02em;padding:8px 8px 8px 14px;
  background:#f4f6f7;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:8px}
.ronde button{padding:4px 7px;min-height:30px;font-size:13px}
.tag{font-size:11.5px;font-weight:600;border-radius:6px;padding:2.5px 7px;border:1px solid var(--line);
  color:var(--muted);background:#f4f6f7;white-space:nowrap}
.tag--niveau{font-size:12px;letter-spacing:.02em}
.tag--niveau b{font-weight:800}
.tag--ip{border-color:#c9a227;background:#fdf6e0;color:#7a5d00}
.tag--ok{border-color:#a9d1b0;background:#eef7ef;color:#1f6b34}
.tag--prov{border-color:#eec3cb;background:var(--zacht);color:var(--diep)}
.tag--live{border-color:#fff;background:#fff;color:var(--diep)}

/* sync-indicator */
/* Sinds 2.61 een VERBINDINGSindicator, geen bewaar-teller meer: groen "Live" zolang de
   realtime-verbinding staat (of "Verbonden" als enkel de 45s-polling werkt), rood bij
   "Offline" of "Niet bewaard". Vaste breedte en geen tekstwissel bij elke bewaarbeurt,
   zodat de knoppen ernaast niet meer verspringen; bewaren toont enkel een pulserend bolletje. */
.sync{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-size:12px;font-weight:600;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:5px 10px;white-space:nowrap;min-width:112px}
.sync i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.sync[data-bewaart="1"] i{animation:pulse 1s infinite}
.sync[data-s="offline"],.sync[data-s="fout"]{color:var(--rood);border-color:#eec3cb;background:var(--zacht)}
.sync[data-s="offline"] i,.sync[data-s="fout"] i{background:var(--rood)}
@keyframes pulse{50%{opacity:.3}}
@media (prefers-reduced-motion:reduce){.sync i{animation:none}}

.volgende{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--rood);
  border-radius:0 12px 12px 0;padding:13px 14px}
.volgende .wanneer{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--rood);margin-bottom:5px}
.volgende h3{font-size:19px;margin:0;line-height:1.2}
.weerchip{display:inline-flex;align-items:center;gap:4px;font-size:15px;font-weight:600;
  padding:3px 10px;border-radius:20px;white-space:nowrap;flex:0 0 auto;line-height:1.3}
.weerchip b{font-family:'Barlow Condensed';font-size:17px;font-weight:700}
.volgende .weerchip{background:#fdf1e4;color:#a15b1f;margin-bottom:5px}
.weerchip--board{background:rgba(255,255,255,.16);color:#fff}
.eindkaart{display:flex;align-items:center;gap:12px;border-left:4px solid var(--muted)}
.eindkaart--podium{border-left-color:#c9a227;background:#fffbea}
.eindkaart--vraag{border-left-color:var(--rood);background:#fdf8ef;border-color:#f6dcb4}
.eindkaart__icoon{font-size:34px;line-height:1;flex:0 0 auto}
.eindkaart__kop{font-size:11px;font-weight:700;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}
.eindkaart__label{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:23px;font-weight:700;line-height:1.15}
.stapkaart{border-left:4px solid var(--rood)}
.tag--eind{border-color:#c9c6bd;background:#f6f5f1;color:#3d4450}
.tag--podium{border-color:#c9a227;background:#fdf6e0;color:#7a5d00}
.tegsnel{display:block;margin:-2px 0 8px 64px}
.maandkop{font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;
  border-bottom:1px solid var(--line);padding-bottom:5px;margin:20px 0 10px}
.dag{display:grid;grid-template-columns:42px 1fr;gap:11px;margin-bottom:12px}
.dagnr{text-align:center;padding-top:2px}
.dagnr .dw{font-size:11px;color:var(--muted)}
.dagnr .dd{font-family:'Barlow Condensed';font-size:23px;font-weight:700;line-height:1}
.dag--oud .dd,.dag--oud .dw{color:var(--muted)}
.dagkaart{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.mrij{display:flex;align-items:center;gap:9px;padding:9px 11px;width:100%;text-align:left;
  background:var(--card);border:0;border-bottom:1px solid var(--line)}
.mrij:last-child{border-bottom:0}
.mrij:active{background:#f4f6f7}
.mrij .teg{flex:1;font-size:13.5px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mrij .uur{font-size:12.5px;color:var(--muted);white-space:nowrap}
.mrij .uits{font-family:'Barlow Condensed';font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}
.vlag{width:10px;height:10px;border-radius:2px;flex:0 0 auto}
.vlag--mix{background:linear-gradient(135deg,var(--rood) 50%,var(--wit) 50%)}
/* Tegenstanderlogo's (2.60) — altijd binnen een vast kader op een witte ondergrond, zodat de
   JPEG's van de RBFA (witte achtergrond) en opgeladen PNG's er naast elkaar gelijk uitzien. */
.tlogo{width:24px;height:24px;border-radius:6px;background:#fff;object-fit:contain;flex:0 0 auto;padding:2px;
  border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;vertical-align:middle}
.tlogo--init{font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:10px;letter-spacing:.02em;color:var(--muted);background:#f4f6f7}
.tlogo--klein{width:18px;height:18px;border-radius:5px;padding:1px;font-size:8.5px;margin-right:5px}
.tlogo--bord{width:44px;height:44px;border-radius:11px;padding:4px;border:0;margin:0 auto 6px;display:flex;font-size:14px}
.tlogo--groot{width:88px;height:88px;border-radius:18px;padding:8px;font-size:24px;margin:0 auto}
button.tlogoknop{background:none;border:0;padding:0;display:block;margin:0 auto;cursor:pointer}
.tegkand{display:flex;align-items:center;gap:10px;width:100%;text-align:left;background:var(--card);border:1px solid var(--line);
  border-radius:10px;padding:8px 10px;margin-top:6px;min-height:48px}
.tegkand small{display:block;color:var(--muted);font-size:12px}
/* Vlaggetje rechtsonder op het logo (2.63). */
.tlogowrap{position:relative;display:inline-flex;flex:0 0 auto;vertical-align:middle}
.vlagje{display:inline-block;line-height:0;border-radius:2px;overflow:hidden;box-shadow:0 0 0 1.5px #fff,0 0 0 2px rgba(0,0,0,.12)}
.vlagje svg{display:block;width:100%;height:100%}
.tlogowrap .vlagje{position:absolute;right:-4px;bottom:-3px;width:12px;height:8px}
.tlogowrap--klein{margin-right:5px}.tlogowrap--klein .tlogo--klein{margin-right:0}
.tlogowrap--klein .vlagje{width:10px;height:7px;right:-3px;bottom:-2px}
.tlogowrap--bord{display:flex;width:44px;margin:0 auto 6px}.tlogowrap--bord .tlogo--bord{margin:0}
.tlogowrap--bord .vlagje{width:18px;height:12px;right:-6px;bottom:-4px;box-shadow:0 0 0 1.5px #fff}
.tlogowrap--groot{display:flex;width:88px;margin:0 auto}.tlogowrap--groot .tlogo--groot{margin:0}
.tlogowrap--groot .vlagje{width:27px;height:18px;right:-8px;bottom:-5px}
.vlagje--los{width:18px;height:12px;vertical-align:-1px;margin-right:4px}
/* Groot tegenstanderlogo naast het datumblokje in de tornooiweergave (2.64). */
.mcard.mcard--logo{grid-template-columns:52px 52px 1fr auto;gap:10px}
.mcard .tlogo--kaart,.mcard .tlogowrap--kaart{width:52px;height:52px;align-self:center}
.tlogo--kaart{height:auto;border-radius:8px;padding:5px;font-size:15px}
.tlogowrap--kaart{display:flex}.tlogowrap--kaart .tlogo--kaart{width:100%;height:100%}
.tlogowrap--kaart .vlagje{width:18px;height:12px;right:-6px;bottom:-4px}
.mcard{display:grid;grid-template-columns:52px 1fr auto;gap:12px;align-items:center;width:100%;text-align:left;
  background:var(--card);border:0;border-bottom:1px solid var(--line);padding:12px 14px}
.mcard:last-child{border-bottom:0}
.mcard:active{background:#f4f6f7}
.mdate{text-align:center;background:var(--rood);color:#fff;border-radius:8px;padding:5px 0 4px}
.mdate .d{font-family:'Barlow Condensed';font-size:23px;font-weight:700;display:block;line-height:1}
.mdate .m{font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:#fbd5dc}
.mcard[data-af="1"] .mdate{background:var(--ink)}
.mtitle{font-weight:600;display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.mmeta{color:var(--muted);font-size:13.5px;margin-top:2px}
/* 2.92: tornooikaart — tegenstander groot, ploeg klein, uur in het blokje */
.mcard--logo .mtitle{font-size:16.5px;font-weight:700;gap:8px;flex-wrap:nowrap;min-width:0}
.mcard--logo .mteg{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.mcard--logo .mmeta{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.mcard--logo .mmeta .flag{width:11px;height:11px}
.mdate--uur .d{font-size:19px;letter-spacing:.01em}
.mdate--uur .m{font-size:9.5px}
@media (max-width:480px){
  .mcard--logo .mteg{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2}
  .mcard--logo .mtitle{align-items:flex-start}
}
.mres{font-family:'Barlow Condensed';font-size:24px;font-weight:700;font-variant-numeric:tabular-nums}
.mres small{display:block;font-family:'Barlow';font-size:11px;font-weight:600}
.win{color:var(--ok)}.lose{color:var(--rood)}.draw{color:var(--muted)}

.board{background:var(--rood);color:#fff;border-radius:var(--r);padding:15px 14px 13px;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 7px)}
.board .who{display:flex;justify-content:space-between;align-items:center;font-size:13px;
  color:#fbd5dc;margin-bottom:6px;gap:8px}
.score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:10px;font-variant-numeric:tabular-nums}
.score b{font-size:52px;font-weight:700;line-height:.9;letter-spacing:-.03em;text-align:center;font-family:'Barlow Condensed'}
.score .side{font-size:14px;font-weight:600;color:#fbd5dc;text-align:center;word-break:break-word}
.qbar{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:12px}
.qbar button{background:rgba(255,255,255,.12);border:0;color:#fff;border-radius:9px;padding:7px 3px;
  font-weight:600;font-size:13px;min-height:52px;display:flex;flex-direction:column;gap:1px;line-height:1.1}
.qbar button[aria-pressed="true"]{background:rgba(255,255,255,.3);box-shadow:inset 0 0 0 1.5px #fff}
.qbar span{font-size:10.5px;opacity:.72;font-variant-numeric:tabular-nums}
.qbar button[aria-pressed="true"] span{opacity:1}
.qbar .qscore{font-size:12px;font-weight:700;opacity:.92;margin-top:1px}
.qbar button[aria-pressed="true"] .qscore{opacity:1}
.clock{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:11px;
  border-top:1px solid rgba(255,255,255,.16);padding-top:11px}
.clock .t{font-family:'Barlow Condensed';font-size:30px;font-weight:700;font-variant-numeric:tabular-nums;min-width:78px;text-align:center}
.clock .t.over{color:var(--geel)}
.clock button{background:rgba(255,255,255,.14);border:0;color:#fff;border-radius:9px;padding:9px 14px;font-weight:600;font-size:14px;min-height:40px}
.clock button.go{background:#fff;color:var(--diep)}
.afsluit{width:100%;margin-top:10px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);
  color:#fff;border-radius:10px;padding:11px;font-weight:600;font-size:14.5px;min-height:46px}
.afsluit:active{background:rgba(255,255,255,.26)}

.pitch{background:linear-gradient(#17492b,#123a22);border-radius:var(--r);padding:14px 8px;display:grid;gap:13px}
.pline{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.pline--empty{color:rgba(255,255,255,.5);font-size:13px;padding:2px}

/* Tactiekbord (2.16, C.3): vrij sleepbaar, los van de linie-indeling hierboven.
   Sinds 2.21 een half veld i.p.v. een heel veld (aspect-ratio 4/3, landschap i.p.v.
   staand) — herkenbaarder en beter leesbaar op een smalle telefoon dan een heel veld
   waar toch nog geen tweede doel op stond. De lijnen zelf (middencirkel, strafschop-
   gebied, doel) staan als losse SVG in viewTactiek() i.p.v. als CSS-pseudo-elementen,
   voor echte boogvormen i.p.v. rechte hoeken. */
.tactiekveld{position:relative;background:linear-gradient(#17492b,#123a22);border-radius:var(--r);
  aspect-ratio:4/3;width:100%;overflow:hidden;touch-action:none}
.tactiekveld__lijnen{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ttoken{position:absolute;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;
  gap:2px;width:60px;cursor:grab;touch-action:none;user-select:none;z-index:1}
.ttoken.dragging{cursor:grabbing;z-index:5}
.ttoken--bank{position:static;transform:none}
.ttoken__n{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed';font-weight:700;font-size:13px;border:2px solid rgba(0,0,0,.15);
  box-shadow:0 2px 5px rgba(0,0,0,.35)}
.ttoken__nm{font-size:10.5px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);text-align:center;
  max-width:60px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ttoken--bank .ttoken__nm{color:var(--ink);text-shadow:none}
.tactiekbank{display:flex;gap:10px;flex-wrap:wrap;padding:12px;background:#f4f6f7;border:1px solid var(--line);
  border-top:0;border-radius:0 0 var(--r) var(--r);min-height:56px;align-items:flex-start}
.chip{display:flex;flex-direction:column;align-items:center;gap:3px;width:74px;border:0;background:none;padding:2px}
.chip__n{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed';font-size:15px;font-weight:700;letter-spacing:.02em;
  background:#fff;color:var(--ink);border:2px solid rgba(0,0,0,.15)}
.chip--dark .chip__n{background:var(--wit);color:#fff;border-color:rgba(255,255,255,.25)}
.chip--rood .chip__n{background:var(--rood);color:#fff;border-color:rgba(255,255,255,.25)}
.chip--k .chip__n{background:var(--geel);color:#1a1a1a}
.chip__name{font-size:12.5px;font-weight:600;line-height:1.15;text-align:center;max-width:74px;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.pitch .chip__name{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.45)}
.chip--off{opacity:.42}
.chip__badge{font-size:11px;color:#fff;background:rgba(0,0,0,.35);border-radius:5px;padding:0 5px}
.chip__pos{font-size:10px;font-weight:700;letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.32);
  border-radius:4px;padding:0 5px}
.pill{font-size:11.5px;font-weight:600;border-radius:6px;padding:2px 7px;background:#f4f6f7;
  border:1px solid var(--line);color:var(--muted)}
.pill--afw{background:var(--zacht);border-color:#eec3cb;color:var(--diep)}
/* Eén kleur per scoremanier (build 2.55, n.a.v. Francis: "misschien per
   type doelpunt een ander kleurtje ook?") — bewust telkens een lichte tint
   als achtergrond met een donkerdere tekstkleur van dezelfde tint, zelfde
   opzet als .pill--afw hierboven, gewoon 9 keer met een andere kleur. Enkel
   ter onderscheid, geen betekenis-codering (geen "rood = slecht" bedoeling). */
.pill--collectief{background:#eaf2fb;border-color:#bcd6f0;color:#2a5d8f}
.pill--hoekschop{background:#e8f7f5;border-color:#b9e6df;color:#146b5e}
.pill--counter{background:#fdf1e6;border-color:#f3d3ab;color:#a15c11}
.pill--vrijetrap{background:#f3eefb;border-color:#d9c8f0;color:#6b3fa0}
.pill--individueel{background:#fbeaf3;border-color:#f0c3dc;color:#a02368}
.pill--kopbal{background:#eef0fb;border-color:#c9cdf0;color:#3c46a3}
.pill--owngoal{background:#f0f0f0;border-color:#d7d7d7;color:#55585c}
.pill--penalty{background:var(--zacht);border-color:#eec3cb;color:var(--diep)}
.pill--rebound{background:#f0f7e6;border-color:#d3e8b0;color:#4b7212}
/* Sprong naar de video bij een gebeurtenis of deel (2.74). Een <a> bij Veo/YouTube,
   een gewoon tijdstip (--tekst) bij Drive, dat niet naar een moment kan springen. */
.vchip{display:inline-flex;align-items:center;gap:4px;font-family:'Barlow',sans-serif;font-size:12px;font-weight:600;
  border-radius:6px;padding:2px 8px;margin-top:3px;background:#eef3f8;color:#2e5a82;border:1px solid #c9d8e6;
  text-decoration:none;white-space:nowrap;font-variant-numeric:tabular-nums;letter-spacing:0}
a.vchip:active{background:#dde8f2}
.vchip--tekst{background:#f4f6f7;color:var(--muted);border-color:var(--line)}
.ronde .vchip{margin-top:0}
.bench{display:flex;gap:5px;overflow-x:auto;padding:4px 2px 6px;scrollbar-width:none}
.bench::-webkit-scrollbar{display:none}

.rowitem{display:flex;align-items:center;gap:11px;padding:10px 14px;border:0;border-bottom:1px solid var(--line);
  background:var(--card);width:100%;text-align:left}
.rowitem:last-child{border-bottom:0}
.jersey{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.02em;
  background:#eef1f3;border:1px solid var(--line);flex:0 0 auto}
.jersey--k{background:var(--geel);border-color:#c9a227;color:#1a1a1a}
.pf{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.jersey,.chip__n,.pick__n{position:relative}
/* Rugnummer-badge bovenop een spelersfoto — zonder dit verdween het rugnummer volledig
   zodra een speler een foto had, want badgeHTML() toonde dan enkel de foto (zie build 2.7). */
.nrbadge{position:absolute;right:-2px;bottom:-2px;min-width:15px;height:15px;padding:0 2px;
  border-radius:8px;background:var(--rood);color:#fff;font-family:'Barlow Condensed',sans-serif;
  font-size:9.5px;font-weight:700;line-height:15px;text-align:center;border:1.5px solid #fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25)}
.name{font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{color:var(--muted);font-size:13px}

/* Rugnummer-chipje in de teamkleur — sinds build 2.8 de vaste plek voor een rugnummer naast
   een naam (Cijfers-tabel, kiesscherm bij een doelpunt/wissel): een lichte tint van de
   teamkleur als achtergrond, de volle kleur als tekst. .nrchip--ghost houdt bij een speler
   zonder rugnummer dezelfde breedte aan, zodat namen in een lijst of tabel toch mooi
   uitgelijnd blijven in plaats van op te schuiven. */
.nrchip{flex:0 0 auto;min-width:22px;height:22px;padding:0 5px;border-radius:6px;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:12.5px;
  display:flex;align-items:center;justify-content:center}
.nrchip--ghost{visibility:hidden}
table.stats td.pl{display:flex;align-items:center;gap:8px}
table.stats td.pl .hint{margin-left:auto}

/* Spelerrijen in het kiesscherm bij een doelpunt of wissel (pickGrid) — sinds build 2.8 een
   lijst i.p.v. een tegel-grid, naar het voorbeeld van .rowitem elders in de app: makkelijker
   te lezen, en er is meteen ruimte voor de positie erbij. De avatar is altijd een foto of
   initialen (nooit het rugnummer) — dat cijfer staat voortaan enkel nog in het .nrchip'je
   ernaast, dus geen dubbele weergave meer zoals vóór build 2.8. */
.pickrows{display:flex;flex-direction:column;gap:8px}
.pickrow{display:flex;align-items:center;gap:11px;width:100%;text-align:left;
  border:1px solid var(--line);background:var(--card);border-radius:12px;padding:9px 12px;min-height:44px}
.pickrow:active{background:#f4f6f7}
.pickrow__av{width:40px;height:40px;border-radius:50%;flex:0 0 auto;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:14px}
.pickrow__info{display:flex;flex-direction:column;gap:1px;min-width:0}
.pickrow__name{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pickrow__sub{font-size:12px;color:var(--muted)}

.ev{display:grid;grid-template-columns:52px 24px 1fr auto;gap:8px;align-items:center;padding:9px 12px;border-bottom:1px solid var(--line)}
.ev:last-child{border-bottom:0}
.ev .min{font-family:'Barlow Condensed';font-weight:700;font-size:15px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right}
.ev .ico{font-size:16px;text-align:center}
.ev .txt{font-size:14.5px;min-width:0}
.ev .txt em{font-style:normal;color:var(--muted)}

.seg{display:flex;background:#dfe4e7;border-radius:11px;padding:3px;gap:3px}
.seg button{flex:1;border:0;background:transparent;border-radius:9px;padding:9px 6px;font-weight:600;font-size:14px;color:var(--muted);min-height:40px}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:0 1px 2px rgba(0,0,0,.08)}
.seg--scroll{overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.seg--scroll::-webkit-scrollbar{display:none}
.seg--scroll button{flex:1 0 auto;padding:9px 14px;white-space:nowrap}

.plan{width:100%;border-collapse:collapse}
.plan th{font-size:11.5px;color:var(--muted);font-weight:600;padding:6px 2px;text-align:center}
.plan th:first-child{text-align:left;padding-left:12px}
.plan td{padding:0;border-bottom:1px solid var(--line)}
.plan tr:last-child td{border-bottom:0}
.pnaam{display:flex;align-items:center;gap:8px;padding:6px 4px 6px 12px;min-width:0}
.pnaam .nm{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qcell{width:100%;height:44px;border:0;background:#f2f4f6;font-weight:700;font-size:13px;color:#b6bec6;
  border-left:1px solid var(--line);font-family:'Barlow Condensed'}
.qcell.on{background:var(--ok);color:#fff}
.qcell.on.k{background:var(--geel);color:#1a1a1a}
.qcell.on.half{background:#7cc7a3}
.qcell small{display:block;font-size:9.5px;font-weight:600;opacity:.9;letter-spacing:.02em;margin-top:1px}
/* Klein "positie wijzigen"-knopje bovenop een bezet vakje in de Quarters-
   tabel (build 2.54, n.a.v. Francis: "kan enkel de vaste positie ingedeeld
   worden, zorg ervoor dat je dit kan aanpassen in dit scherm") — bewust
   een APART, klein knopje in de hoek i.p.v. de qcell-knop zelf hergebruiken:
   die doet al drie dingen (toevoegen/verwijderen/helft wisselen, zie
   qToggle()) en dat gedrag mag niet wijzigen. */
.qwrap{position:relative}
.qpos{position:absolute;top:2px;right:2px;width:16px;height:16px;padding:0;border:1px solid rgba(0,0,0,.15);
  border-radius:4px;background:rgba(255,255,255,.85);color:#4a4f54;font-size:9px;line-height:1;
  display:flex;align-items:center;justify-content:center;z-index:1}
.pick--half{box-shadow:inset 0 0 0 2px var(--geel)}
.bar{height:9px;border-radius:5px;background:#eceff1;overflow:hidden;margin-top:4px}
.bar>i{display:block;height:100%;border-radius:5px}
.kaartkop{display:flex;gap:14px;align-items:center}
.kaartkop .jersey{width:64px;height:64px;font-size:22px}
.mv{display:grid;grid-template-columns:repeat(auto-fit,minmax(84px,1fr));gap:10px;margin-top:12px}
.mv div{background:#f5f7f8;border-radius:11px;padding:10px}
.mv b{display:block;font-family:'Barlow Condensed';font-size:24px;font-weight:700;line-height:1.1}
.mv span{font-size:11.5px;color:var(--muted)}
/* 3.02: welzijnstegels — waarde van de speler (of ploeg) met de gemiddelden eronder; tik = verloop */
.wztegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-top:12px}
.wztegel{display:flex;flex-direction:column;gap:2px;text-align:left;background:#f5f7f8;border:2px solid transparent;border-radius:11px;padding:9px 10px;font:inherit;color:inherit;cursor:pointer}
.wztegel[aria-pressed="true"]{border-color:#2f6db5;background:#fff}
.wztegel b{font-family:'Barlow Condensed';font-size:26px;font-weight:700;line-height:1.05}
.wztegel .wzl,.wztegel .wzr{font-size:12px;color:var(--muted);line-height:1.35}
.wztegel .wzd{font-size:12px;font-weight:600}
.drij>summary{list-style:none}
.drij>summary::-webkit-details-marker{display:none}
.drij[open]>summary{background:#f5f7f8}
.drij:last-child>summary{border-bottom:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.fchip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 12px;font:inherit;font-size:13px;cursor:pointer;color:var(--ink);white-space:nowrap}
.fchip[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
/* 2.89: rijen op de spelerskaart (wedstrijd per wedstrijd, Footbar) */
.lijst-rij{display:grid;grid-template-columns:44px 36px minmax(0,1fr) auto;gap:12px;align-items:center;width:100%;
  padding:11px 14px;border:0;border-bottom:1px solid var(--line);background:none;font:inherit;color:inherit;text-align:left}
.lijst-rij:last-child{border-bottom:0}
button.lijst-rij{cursor:pointer}
button.lijst-rij:active{background:#f4f6f7}
.mdate--sm{padding:4px 0 3px}
.tlogo--rij{width:36px;height:36px;border-radius:8px;padding:3px;font-size:12px}
.tlogowrap--rij .vlagje{width:14px;height:10px;right:-5px;bottom:-3px}
.thuisuit{flex:0 0 auto;font-size:10px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:5px;padding:1px 5px;color:var(--wit);box-shadow:inset 0 0 0 1px #d3d1ca}
.thuisuit--uit{color:#fff;background:var(--wit);box-shadow:none}
/* 3.21: recordbord op het Footbar-tabblad — drie grote tegels op rood, de rest in groepen */
.recbord__kop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:14px 14px 10px}
.recbord__hero{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--diep);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.recbord__groep{padding:10px 14px 4px}
.recbord__groep+.recbord__groep{border-top:1px solid var(--line)}
.recbord__titel{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.recbord__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin-bottom:8px}
.recbord__voet{margin:0;padding:8px 14px 12px;font-size:12px;border-top:1px solid var(--line)}
.rec{display:flex;flex-direction:column;gap:4px;text-align:left;border:0;border-radius:11px;padding:10px 11px;
  background:#f5f7f8;color:inherit;font:inherit;min-width:0;cursor:pointer}
.rec:active{background:#eceff1}
.rec__l{font-size:12px;color:var(--muted);line-height:1.2}
.rec__v{font-family:'Barlow Condensed';font-size:28px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.rec__v small{font-family:'Barlow',sans-serif;font-size:12px;font-weight:600;color:var(--muted);margin-left:3px}
.rec__wie{display:flex;align-items:center;gap:7px;margin-top:4px;min-width:0}
.rec__av{position:relative;overflow:hidden;width:26px;height:26px;border-radius:50%;flex:0 0 auto;
  display:flex;align-items:center;justify-content:center;color:#fff;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:11px}
.rec__nm{display:flex;flex-direction:column;min-width:0;font-size:13px;font-weight:600;line-height:1.2}
.rec__nm>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rec__nm em{font-style:normal;font-weight:500;font-size:11.5px;color:var(--muted);line-height:1.2;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.rec--hero{border-radius:0;background:var(--rood);color:#fff;padding:12px 10px 11px;
  background-image:repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 7px)}
.rec--hero:active{background-color:var(--diep)}
.rec--hero .rec__l,.rec--hero .rec__v small,.rec--hero .rec__nm em{color:#fbd5dc}
.rec--hero .rec__v{font-size:34px}
.rec--hero .rec__av{box-shadow:0 0 0 1.5px rgba(255,255,255,.6)}
@media (max-width:380px){.rec--hero .rec__v{font-size:28px}.recbord__grid{grid-template-columns:1fr 1fr}}
/* 3.22: tegenstanders-overzicht — balans, uitgelichte tegels, lijst met logo en vormstipjes */
.tegtegels{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.tegtegel{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;border:0;border-radius:12px;
  padding:10px 8px 11px;background:var(--card);color:inherit;font:inherit;min-width:0;cursor:pointer;
  border-top:3px solid var(--line);box-shadow:0 1px 2px rgba(0,0,0,.05)}
.tegtegel--rood{border-top-color:var(--rood)}.tegtegel--ok{border-top-color:var(--ok)}.tegtegel--grijs{border-top-color:#8a949c}
.tegtegel__l{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;
  min-height:2.6em;display:flex;align-items:flex-end;justify-content:center;line-height:1.2}
.tegtegel .tlogo--bord,.tegtegel .tlogowrap--bord{margin:0 auto 2px}
.tegtegel__n{font-weight:700;font-size:14px;line-height:1.2;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tegtegel__s{font-size:11.5px;color:var(--muted)}
.teglijst .tlogo--bord,.teglijst .tlogowrap--bord{margin:0;width:40px;height:40px;font-size:12px;border:1px solid var(--line)}
.teglijst .tlogowrap--bord .tlogo--bord{border:0}
.teglijst .tlogowrap--bord .vlagje{width:12px;height:8px;right:-4px;bottom:-3px}
.tegbalans .mv{grid-template-columns:1fr 1fr}
.tegvorm{display:inline-flex;gap:3px;margin-left:4px;vertical-align:middle}
.tegvorm i{width:8px;height:8px;border-radius:50%;display:inline-block;background:#cfd6da}
.tegvorm__W{background:#2e9e6b!important}.tegvorm__G{background:#c9a227!important}.tegvorm__V{background:#c8102e!important}
/* 3.23: spelers-cijfers — staafjes van de speeltijd en balkje in de kolom Delen */
.spreid{display:flex;flex-direction:column;gap:3px;margin-top:8px}
.spreid__rij{display:grid;grid-template-columns:88px 1fr 40px;align-items:center;gap:8px;border:0;background:none;
  padding:0;font:inherit;color:inherit;text-align:left;min-height:20px;cursor:pointer}
.spreid__nm{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.spreid__bar{height:12px;border-radius:6px;background:#eef1f3;overflow:hidden}
.spreid__bar i{display:block;height:100%;border-radius:6px;min-width:2px}
.spreid__v{font-family:'Barlow Condensed';font-weight:700;font-size:14px;text-align:right;font-variant-numeric:tabular-nums}
.spc{display:flex;flex-direction:column;gap:6px;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);
  background:none;padding:11px 14px;font:inherit;color:inherit;cursor:pointer}
.spc:last-of-type{border-bottom:0}
.spc__kop{display:flex;align-items:center;gap:8px;min-width:0}
.spc__naam{font-weight:700;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.spc__delen{margin-left:auto;font-family:'Barlow Condensed';font-weight:700;font-size:20px;line-height:1;white-space:nowrap}
.spc__delen small{font-family:'Barlow',sans-serif;font-size:11px;font-weight:600;color:var(--muted);margin-left:3px}
.spc__pct{font-family:'Barlow Condensed';font-weight:700;font-size:18px;min-width:44px;text-align:right;font-variant-numeric:tabular-nums}
.spc__feiten{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:12.5px;color:var(--muted)}
.spc__feiten b{color:var(--ink);font-variant-numeric:tabular-nums}
.spc__linies{display:flex;height:8px;border-radius:4px;overflow:hidden;background:#eef1f3;gap:1px}
.spc__linies i{display:block;height:100%}
.spc__legenda{display:flex;flex-wrap:wrap;gap:2px 12px;font-size:11.5px;color:var(--muted)}
.spc__legenda i{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:4px;vertical-align:-0.5px}
/* 3.23: clubcijfers (TVO) — kaart per groep met speeltijdband en minibalken */
.ccgroep{padding:11px 14px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:7px}
.ccgroep:last-of-type{border-bottom:0}
.ccgroep__kop{display:flex;align-items:baseline;gap:8px}
.ccgroep__naam{font-weight:700;font-size:15px}
.ccgroep__st{margin-left:auto;font-family:'Barlow Condensed';font-weight:700;font-size:22px;line-height:1}
.ccgroep__st small{font-family:'Barlow',sans-serif;font-size:11px;font-weight:600;color:var(--muted);margin-left:4px}
.ccband{position:relative;display:block;height:10px;border-radius:5px;background:#eef1f3}
.ccband__b{position:absolute;top:0;height:100%;border-radius:5px;background:rgba(47,109,181,.35)}
.ccband__m{position:absolute;top:-2px;width:2px;height:14px;margin-left:-1px;background:#2f6db5;border-radius:1px}
.ccgroep__minis{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ccmini{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;font-size:11.5px;color:var(--muted)}
.ccmini__t{height:6px;border-radius:3px;background:#eef1f3;overflow:hidden}
.ccmini__t i{display:block;height:100%;background:#8a949c;border-radius:3px}
.ccmini b{font-variant-numeric:tabular-nums;color:var(--ink)}
/* 3.23: TVO-spelerslijst — overzichtsstrook, kwartaalbalkjes, groepkoppen, speeltijd per rij */
.dskw{display:flex;align-items:flex-end;gap:10px;margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.dskw>.hint:first-child{align-self:center;margin-right:auto}
.dskw__k{display:flex;flex-direction:column;align-items:center;gap:2px;width:34px;height:52px;justify-content:flex-end}
.dskw__k i{display:block;width:18px;background:#8a949c;border-radius:3px 3px 0 0;min-height:2px}
.dskw__k b{font-size:12px;line-height:1}.dskw__k small{font-size:10px;color:var(--muted)}
.dsgroep{display:flex;justify-content:space-between;align-items:baseline;padding:9px 14px 5px;font-weight:700;font-size:13px;
  background:#f5f7f8;border-bottom:1px solid var(--line)}
.dsr__av{width:34px;height:34px;border-radius:50%;background:#eef1f3;color:var(--muted);display:flex;align-items:center;justify-content:center;
  font-family:'Barlow Condensed',sans-serif;font-weight:700;font-size:13px;flex:0 0 auto}
.dsr__cijfer{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto;min-width:64px}
.dsr__cijfer b{font-family:'Barlow Condensed';font-weight:700;font-size:19px;line-height:1}
.dsr__balk{display:block;width:56px;height:4px;border-radius:2px;background:#eef1f3;overflow:hidden}
.dsr__balk i{display:block;height:100%;border-radius:2px}
.dsr__cijfer small{font-size:10.5px;color:var(--muted);white-space:nowrap}
/* 2.93: vaste wedstrijdkop (scorebord + knoppen), compact zodra hij vastzit */
.wkop{position:sticky;top:var(--kop-top,0px);z-index:20;margin:0 -2px;padding:0 2px 8px;
  background:linear-gradient(var(--paper) 85%,rgba(242,242,239,0))}
.wkop-anker{height:1px;margin-bottom:-1px}
.wkop .qlabel{display:none}
.wkop.is-vast .board{padding:9px 12px 9px}
.wkop.is-vast .board .who,.wkop.is-vast .board .pushknop,.wkop.is-vast .board .pushhint,
.wkop.is-vast .board .afsluit,.wkop.is-vast .qbar,.wkop.is-vast .tlogo--bord,.wkop.is-vast .tlogowrap--bord,
.wkop.is-vast .tlogoknop{display:none}
.wkop.is-vast .score{gap:8px}
.wkop.is-vast .score b{font-size:34px}
.wkop.is-vast .score .side{font-size:12.5px;line-height:1.2;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.wkop.is-vast .clock{margin-top:6px}
.wkop.is-vast .clock .t{font-size:24px}
.wkop.is-vast .clock button{min-height:34px;padding:6px 12px}
.wkop.is-vast .qlabel{display:inline-block;font-family:'Barlow Condensed';font-weight:700;font-size:15px;
  background:rgba(255,255,255,.18);border-radius:7px;padding:3px 8px}
.wkop.is-vast .wknoppen{margin-top:6px!important}
.wkop.is-vast .wknoppen .btn--big{min-height:40px;padding:5px 6px;font-size:15px}
.wkop.is-vast .wknoppen .btn--big small{display:none}
@media (min-width:900px){
  .cols--wedstrijd{align-items:stretch}
}
/* op de gsm één doorlopende stroom, zodat de vaste kop niet loslaat aan het einde van de eerste kolom */
@media (max-width:899px){
  .cols--wedstrijd{display:block}
  .cols--wedstrijd>.col{display:contents}
}
/* 2.93: Footbar-blok in het wedstrijdscherm */
.fbkern{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 14px 4px}
.fbkern div{background:#f5f7f8;border-radius:11px;padding:10px 11px}
.fbkern b{font-family:'Barlow Condensed';font-size:26px;font-weight:700;line-height:1;display:block}
.fbkern b small{font-size:13px;font-weight:600;color:var(--muted);margin-left:2px}
.fbkern span{font-size:11.5px;color:var(--muted);display:block;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbpieken{display:flex;flex-wrap:wrap;gap:6px;padding:8px 14px 10px}
.fbpiek{display:inline-flex;align-items:baseline;gap:5px;font-size:12.5px;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.fbpiek b{color:var(--ink);font-family:'Barlow Condensed';font-size:15px}
.fbpiek i{font-style:normal;color:var(--ink);font-weight:600}
.lijst-rij--speler{grid-template-columns:38px minmax(0,1fr) auto}
.fbav{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;position:relative;
  font-family:'Barlow Condensed';font-weight:700;font-size:15px;color:#fff;background:var(--wit);border:2px solid rgba(0,0,0,.08)}
/* 2.91: wedstrijden van één tornooidag als één blok */
.tdag{border-bottom:1px solid var(--line);background:#faf9f6}
.tdag:last-child{border-bottom:0}
.tdag>.lijst-rij{border-bottom:0}
.tdag__kop{cursor:default}
.tdag__icoon{width:36px;height:36px;border-radius:8px;background:#fdf1d8;color:#8a5a00;display:flex;
  align-items:center;justify-content:center;font-size:18px}
.tdag__sub{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:3px;font-size:12.5px;color:var(--muted)}
.tdag__sub b{color:var(--ink)}
.tdag__rijen{margin:0 0 8px 34px;border-left:3px solid #e8c46b;background:var(--card);border-radius:0 10px 10px 0}
.tdag__rijen>.lijst-rij{padding-top:8px;padding-bottom:8px}
.tijdcel{text-align:center;font-family:'Barlow Condensed';font-weight:700;font-size:15px;line-height:1.1;color:var(--ink)}
@media (max-width:480px){
  .lijst-rij__kop{flex-wrap:wrap;row-gap:3px}
  .lijst-rij__teg{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;flex:1 1 100%}
  .tdag__rijen{margin-left:12px}
}
.tijdcel small{display:block;font-family:inherit;font-size:9.5px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mdate--sm .d{font-size:20px}
.mdate--grijs{background:var(--wit)}
.lijst-rij__kop{display:flex;align-items:center;gap:8px;min-width:0}
.lijst-rij__teg{font-weight:700;font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.uitslag{flex:0 0 auto;font-family:'Barlow Condensed';font-weight:700;font-size:14px;line-height:1.35;border-radius:6px;padding:0 7px;white-space:nowrap}
.uitslag--W{background:#e3f3ea;color:#1a6e3c}
.uitslag--G{background:#eef0f2;color:#5b6470}
.uitslag--V{background:#fbeaed;color:#a40d26}
.qstrip{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:6px}
.qtegel{width:34px;height:24px;border-radius:6px;font-size:10.5px;font-weight:700;letter-spacing:.03em;
  display:inline-flex;align-items:center;justify-content:center;color:#fff;position:relative}
.qtegel sup{font-size:9px;margin-left:1px;top:-.35em;font-weight:800}
.qtegel--leeg{background:transparent;border:1.5px dashed #d3d1ca;color:#b7b4ad;font-weight:600}
.qacties{font-size:12px;margin-left:4px;white-space:nowrap;color:var(--ink)}
.lijst-rij__waarde{text-align:right;min-width:46px}
.lijst-rij__waarde b{font-family:'Barlow Condensed';font-size:24px;font-weight:700;line-height:1;display:block}
.lijst-rij__waarde small{font-size:10.5px;color:var(--muted);font-weight:600;letter-spacing:.02em}
.fbwaarden{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:4px;font-size:12.5px;color:var(--muted)}
.fbwaarden b{color:var(--ink);font-weight:700}
.fbbalk{height:6px;border-radius:3px;background:#eef0f2;margin-top:8px;overflow:hidden}
.fbbalk>i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#7cc79f,var(--ok))}
.fbbalk--beste>i{background:linear-gradient(90deg,#f0b94a,#d9901a)}
.tag-beste{flex:0 0 auto;font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:#8a5a00;background:#fdf1d8;border-radius:5px;padding:1px 6px}
.dtabs{display:flex;gap:6px;overflow-x:auto;margin:14px -4px 0;padding:2px 4px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.dtabs::-webkit-scrollbar{display:none}
.dtabs button{flex:0 0 auto;border:1px solid var(--line);background:#fff;border-radius:999px;padding:8px 14px;font:inherit;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.dtabs button[aria-selected="true"]{background:var(--rood);border-color:var(--rood);color:#fff}
.trstat{display:inline-flex;gap:4px}
.trstat button{width:34px;height:34px;border-radius:8px;border:1px solid var(--line);background:#fff;font:inherit;font-weight:700;cursor:pointer;color:var(--ink)}
.linkknop{border:0;background:none;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
.linkknop:hover{text-decoration:underline}
.mtrij{padding:10px 0;border-top:1px solid var(--line)}
.mtrij:first-child{border-top:0;padding-top:0}
.minputs{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.mveld{display:flex;flex-direction:column;width:104px;font-size:12px;color:var(--muted)}
.mveld i{font-style:normal;opacity:.75}
.mveld input{padding:8px;margin:3px 0 2px}
.mveld small{font-size:10.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.halfsel{width:auto;min-height:38px;padding:6px 8px;font-size:13px}
.plan .cnt{font-family:'Barlow Condensed';font-weight:700;font-size:16px;text-align:center;padding:8px 2px;
  border-left:1px solid var(--line);font-variant-numeric:tabular-nums}
.cnt.bad{color:var(--rood)}
.cnt.good{color:var(--ok)}
.tot{width:44px;text-align:center;font-family:'Barlow Condensed';font-weight:700;font-size:16px;
  border-left:1px solid var(--line);font-variant-numeric:tabular-nums}
.tot.low{color:var(--rood)}

table.stats{width:100%;border-collapse:collapse;font-size:14.5px}
/* Op smartphone paste een tabel met veel kolommen (bv. "Per speler": 11 kolommen)
   niet binnen het schermbreedte — zonder deze wrapper duwde de tabel de hele
   pagina breder dan het scherm (horizontaal scrollende pagina, afgekapte tekst).
   .tablewrap laat enkel de tabel zelf opzij scrollen, de rest van de pagina blijft
   normaal; stats--wide dwingt een leesbare minimumbreedte af zodat kolommen niet
   tot onleesbaar smal ineengedrukt worden op een smal scherm. */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.stats--wide{min-width:640px}
table.stats th,table.stats td{padding:9px 5px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
table.stats th{font-size:12px;color:var(--muted);font-weight:600}
table.stats th:first-child,table.stats td:first-child{text-align:left}
table.stats td.pl{font-weight:600}
table.stats tbody tr:last-child td{border-bottom:0}

label.f{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:5px}
input.i,select.i,textarea.i{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;min-height:46px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}

.tabs{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  padding-bottom:env(safe-area-inset-bottom)}
.tabs button{border:0;background:none;padding:9px 4px 10px;display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:11px;font-weight:600;color:var(--muted);min-height:56px}
.tabs button[aria-current="page"]{color:var(--rood)}
.tabs .ti{font-size:19px;line-height:1;position:relative;display:inline-block}
/* Handleiding (3.11): een gewone link (geen data-act), opent handleiding.html
   in een nieuw tabblad op het hoofdstuk van de rol waarin je op dat moment
   werkt. Zelfde uiterlijk als de knoppen ernaast; onderaan het telefoonscherm
   met het korte label "Hulp", in de zijbalk onderaan apart gezet. */
.tabs a.hulp{display:flex;flex-direction:column;align-items:center;gap:2px;padding:9px 4px 10px;
  font-size:11px;font-weight:600;color:var(--muted);min-height:56px;text-decoration:none}
.tabs a.hulp .lang{display:none}
/* Rood bolletje op het Footbar-icoon zodra er een aanvraag wacht. Klein
   gehouden: het mag opvallen, niet schreeuwen. */
.tbadge{position:absolute;top:-5px;right:-9px;min-width:16px;height:16px;padding:0 4px;
  border-radius:9px;background:var(--rood);color:#fff;font-size:10.5px;font-weight:700;
  font-style:normal;line-height:16px;text-align:center;box-shadow:0 0 0 2px #fff}

/* twee kolommen tijdens de wedstrijd, alleen op een breed scherm */
.cols{display:grid;gap:0}
.col{min-width:0}

/* ---------- breed scherm ---------- */
@media (min-width:900px){
  body{padding-bottom:28px;padding-left:212px}
  .topbar{max-width:980px;margin:0;padding:20px 26px 10px}
  .wrap{max-width:980px;margin:0;padding:6px 26px 48px}
  .tabs{top:0;right:auto;bottom:0;width:212px;grid-auto-flow:row;grid-template-columns:1fr;align-content:start;
    border-top:0;border-right:1px solid var(--line);background:var(--card);padding:0 10px 10px;gap:2px}
  .tabs::before{display:none}
  .tabs{padding-top:104px}
  .brand{position:fixed;top:0;left:0;width:212px;height:96px;z-index:41;
    border-right:1px solid var(--line);flex-direction:column;align-items:flex-start;
    justify-content:center;gap:6px;padding:0 16px}
  .brand .woord{font-size:17px}
  .tabs button{flex-direction:row;justify-content:flex-start;gap:11px;padding:11px 12px;border-radius:10px;
    font-size:14.5px;min-height:46px}
  .tabs button[aria-current="page"]{background:#fdf0f1}
  .tabs .ti{font-size:17px}
  .tabs a.hulp{position:absolute;left:10px;right:10px;bottom:14px;flex-direction:row;justify-content:flex-start;
    gap:11px;padding:11px 12px;border-radius:10px;font-size:14.5px;min-height:46px;
    color:var(--rood);background:var(--zacht)}
  .tabs a.hulp:hover{background:#f8dde2}
  .tabs a.hulp .lang{display:inline}
  .tabs a.hulp .kort{display:none}
  .cols{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:24px;align-items:start}
  .chip{width:82px}
  .chip__name{max-width:82px;font-size:13px}
  .score b{font-size:60px}
}
@media (min-width:1200px){
  .topbar,.wrap{max-width:1180px}
  .cols{gap:28px}
}
@media (min-width:1500px){
  .topbar,.wrap{margin-left:40px}
}

.scrim{position:fixed;inset:0;background:rgba(15,20,25,.5);z-index:50;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--card);width:100%;max-width:640px;border-radius:18px 18px 0 0;max-height:88vh;overflow:auto;
  padding:16px 16px calc(20px + env(safe-area-inset-bottom));animation:up .18s ease-out}
@keyframes up{from{transform:translateY(14px)}to{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.sheet{animation:none}}
.grabber{width:38px;height:4px;background:var(--line);border-radius:2px;margin:0 auto 12px}

.pickgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.pick{display:flex;flex-direction:column;align-items:center;gap:5px;border:1px solid var(--line);background:#fff;
  border-radius:12px;padding:10px 4px;min-height:86px;justify-content:center}
.pick:active{background:#eef1f3}
.pick__n{width:34px;height:34px;border-radius:50%;background:#eef1f3;border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;font-family:'Barlow Condensed';font-weight:700;font-size:14px;letter-spacing:.02em}
.pick--k .pick__n{background:var(--geel);border-color:#c9a227}
.pick--on{background:#f1faf5;border-color:var(--ok);box-shadow:inset 0 0 0 1px var(--ok)}
.pick__kw{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.pick__kw.laag{color:var(--rood)}
.deelkop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:16px 0 8px}
.deelkop h2{margin:0}
.pick__nm{font-size:14.5px;font-weight:600;line-height:1.15;text-align:center;max-width:100%;overflow:hidden;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.fotos{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.foto{position:relative;aspect-ratio:1;border-radius:10px;overflow:hidden;border:1px solid var(--line);
  background:#eef1f3;display:block}
.foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto .val{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--muted);text-align:center;padding:6px}
.foto .wis{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.55);color:#fff;border:0;
  border-radius:7px;width:28px;height:28px;font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center}
.fotobalk{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.toast{position:fixed;left:12px;right:12px;bottom:calc(84px + env(safe-area-inset-bottom));z-index:45;
  max-width:616px;margin:0 auto;background:var(--ink);color:#fff;border-radius:12px;padding:10px 12px;
  display:flex;align-items:center;gap:10px;justify-content:space-between;font-size:14.5px;box-shadow:0 6px 20px rgba(0,0,0,.28)}
.toast span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.toast button{background:rgba(255,255,255,.18);border:0;color:#fff;border-radius:8px;padding:7px 11px;
  font-weight:600;font-size:13.5px;min-height:36px;flex:0 0 auto}
/* 2.88: desktopvariant van sheet/toast/pickgrid staat ná hun basisregels —
   vroeger stond ze in het @media-blok hierboven en won de basisregel. */
@media (min-width:900px){
  .scrim{align-items:center;padding:24px}
  .sheet{border-radius:16px;max-width:560px;max-height:80vh}
  .grabber{display:none}
  .pickgrid{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
  .toast{bottom:24px;left:236px;right:24px;max-width:520px;margin:0}
}

/* aanmeldscherm — #gate wordt ook hergebruikt door het "Kies waar je naartoe
   wilt"-scherm (ploeg-/omgevingswissel, zie wisselPloeg), dat gewoon de oude
   .gatebox-opmaak blijft gebruiken. .gate zelf blijft daarom een neutrale
   centreer-wrapper (enkel position:relative erbij, verder ongewijzigd); het
   veld-/kaart-uiterlijk hieronder zit in eigen klassen die enkel gate() zelf
   invult, zodat het andere scherm er niets van meekrijgt. */
/* position:fixed;inset:0 (i.p.v. gewoon in de document-flow staan) i.s.m.
   2.41: op een breed scherm (≥900px) reserveert body zelf een
   padding-left:212px voor de zijbalk van de ingelogde app (zie verderop in
   dit bestand) — een normale, in-flow #gate zat daardoor binnen dat
   restant-gedeelte, met een storende witte/lege strook links. Er is op het
   aanmeldscherm geen zijbalk om ruimte voor te maken (#app staat dan
   hidden), dus #gate negeert die padding nu gewoon door zelf de volledige
   viewport te bezetten. overflow:auto zodat een zeldzaam geval met heel veel
   inhoud (bv. een lange foutmelding) nog gewoon zelf kan scrollen. */
.gate{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:24px;
  overflow:auto;box-sizing:border-box;z-index:100}
.gatebox{max-width:420px;width:100%;text-align:center}
.gatebox .crest{width:64px;height:64px;margin:0 auto 16px}
.gatebox .crest svg{width:100%;height:100%;display:block}
.gatebox h1{margin-bottom:6px}
.gatebox p{color:var(--muted);font-size:14.5px;margin:0 0 20px}
.gerr{background:#fdf4f4;border:1px solid #f3c6c6;border-radius:10px;padding:10px 12px;font-size:13.5px;
  color:var(--rood);text-align:left;margin-bottom:14px}
/* Aanmeldscherm herbouwd (2.38, n.a.v. Francis: Google/Facebook-merkregels,
   een link naar het privacybeleid, en visueel aantrekkelijker) — eerst als
   mockup voorgelegd (twee richtingen), deze (met veldachtergrond) gekozen.
   Bewust generiek (geen clubnaam): dit scherm is platformbreed, voor elke
   club op Matchboard.
   Veldachtergrond (2.40): eerst een getekend veld (2.38), toen bijgesteld met
   preserveAspectRatio="xMidYMid slice" i.p.v. "none" om vervorming op een
   breed scherm te vermijden (2.39) — nu vervangen door een echte foto die
   Francis aanleverde (het veld van HVV Hoogstraten). Dezelfde "cover"-logica
   als daarvoor (`background-size:cover;background-position:center`), dus
   dezelfde niet-vervormende, centreer-en-bijsnijd-werking, nu op een foto in
   plaats van een tekening. Een donkere overlay (lineaire gradient) zorgt dat
   de foto niet te fel afsteekt tegen de rode/witte kaart erbovenop — puur
   esthetisch, geen inhoudelijke wijziging. `aanmeld-veld.jpg` moet als los
   bestand mee gedeployed worden, naast index.html (zelfde plek als
   favicon.svg/handleiding.html/privacy.html). */
.gate .veld{position:absolute;inset:0;width:100%;height:100%;z-index:0;
  background:
    linear-gradient(160deg,rgba(20,40,25,.55) 0%,rgba(15,30,20,.4) 55%,rgba(10,20,15,.6) 100%),
    url('/aanmeld-veld.jpg') center/cover no-repeat}
.gatecard{position:relative;z-index:1;max-width:380px;width:100%;border-radius:20px;
  overflow:hidden;box-shadow:0 20px 48px -14px rgba(0,0,0,.45);background:#fff;text-align:center}
.gatecard .kop{background:linear-gradient(160deg,var(--rood) 0%,var(--diep) 100%);padding:40px 28px 36px}
.gatecard .kop .crest{width:72px;height:72px;margin:0 auto 18px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.2))}
.gatecard .kop .crest svg{width:100%;height:100%;display:block}
.gatecard .kop .woord{font-family:'Barlow Condensed','Barlow',sans-serif;font-size:26px;font-weight:700;
  letter-spacing:.1em;color:#fff;line-height:1}
.gatecard .lijf{padding:28px 28px 26px}
.gatecard .lijf>p{color:var(--muted);font-size:14.5px;margin:0 0 22px}
.gatecard .privacy{color:var(--muted);font-size:12.5px;line-height:1.5;margin:20px 0 0}
.gatecard .privacy a{color:var(--rood)}
.gatecard .gerr{margin:0 0 16px}
.idp{border-radius:9px;padding:0 16px;min-height:46px;width:100%;
  display:flex;align-items:center;justify-content:center;gap:10px;font-weight:600;font-size:15px;cursor:pointer}
.idp--google{background:#fff;border:1px solid #747775;color:#1F1F1F}
.idp--facebook{background:#1877F2;border:none;color:#fff}

/* Externe tornooilink (Tournify e.d.): linkkaart in de tornooikleur (zelfde paars als .tag--beker) */
.tlink{position:relative;display:flex;align-items:center;gap:12px;width:100%;margin-top:12px;padding:10px 12px 10px 10px;
  border:1px solid #d9ccf2;border-radius:12px;background:linear-gradient(180deg,#faf7ff,#f4efff);
  color:var(--ink);text-decoration:none;min-height:56px;transition:border-color .15s,box-shadow .15s}
.tlink:hover{border-color:#9a7bd6;box-shadow:0 1px 0 rgba(84,54,143,.08),0 4px 14px -6px rgba(84,54,143,.35)}
.tlink:active{transform:translateY(1px)}
.tlink__ico{flex:0 0 auto;width:38px;height:38px;border-radius:10px;background:#54368f;color:#fff;
  display:flex;align-items:center;justify-content:center}
.tlink__ico svg{width:22px;height:22px}
.tlink__tekst{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;line-height:1.2}
.tlink__titel{font-weight:700;font-size:15px;color:#3b2470}
.tlink__sub{font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tlink__pijl{flex:0 0 auto;width:30px;height:30px;border-radius:999px;display:flex;align-items:center;justify-content:center;
  color:#54368f;background:#fff;border:1px solid #e3d9f6;font-size:15px;font-weight:700}
.tlink:hover .tlink__pijl{background:#54368f;color:#fff;border-color:#54368f}
.tlink .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}