/* Lettertypes: op onze eigen server (public/fonts, licenties OFL), geen externe dienst die meekijkt.
   Chakra Petch = koppen en knoppen, JetBrains Mono = cijfers en tijden, IBM Plex Sans = lopende tekst. */
@font-face { font-family:"Chakra Petch"; font-weight:400; font-display:swap; src:url("/fonts/ChakraPetch-400.woff2") format("woff2"); }
@font-face { font-family:"Chakra Petch"; font-weight:600; font-display:swap; src:url("/fonts/ChakraPetch-600.woff2") format("woff2"); }
@font-face { font-family:"Chakra Petch"; font-weight:700; font-display:swap; src:url("/fonts/ChakraPetch-700.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:400 700; font-display:swap; src:url("/fonts/JetBrainsMono.woff2") format("woff2"); }
@font-face { font-family:"IBM Plex Sans"; font-weight:400 700; font-display:swap; src:url("/fonts/IBMPlexSans.woff2") format("woff2"); }

/* Elke kleur heeft één betekenis:
   --accent = jij of wat jij nu moet doen; --teal = goed/gewonnen; --gevaar = fout/verloren/verwijderen;
   rood (.live-badge) = alleen LIVE; --t en --ct = de kanten. Rondetypes en andere labels zijn neutraal. */
:root { color-scheme:dark; --bg:#0b0d11; --card:#12151b; --diep:#0f1218; --line:#262c37; --lijn-sterk:#4a5262; --text:#e8e8ea; --muted:#9aa0aa; --zacht:#c4c8cf;
        --accent:#f5a623; --accent-licht:#ffb94a; --eigen:#1d1809; --teal:#4fd1c5; --ok-vlak:#123330; --gevaar:#ff8a80; --mis-vlak:#241214; --mis-lijn:#7a2f2b;
        --t:#eed27a; --t-vlak:#3d2f12; --ct:#8cc4f5; --ct-vlak:#16314a;
        --kop:"Chakra Petch", system-ui, sans-serif; --cijfer:"JetBrains Mono", ui-monospace, monospace; --lees:"IBM Plex Sans", system-ui, sans-serif; }
* { box-sizing: border-box; }
body { margin:0; min-height:100vh; background:var(--bg); color:var(--text); font-family:var(--kop); font-size:15px; line-height:1.45; }
.card { width:100%; max-width:760px; min-width:0; margin:0 auto; padding:24px clamp(16px, 3vw, 40px) 40px; } /* losse tekstpagina's */
.center { text-align:center; }
.knoppen { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
h1 { margin:0; letter-spacing:.5px; font-size:26px; }
h1 span { color:var(--accent); }
h2 { margin:20px 0 12px; font-size:20px; overflow-wrap:anywhere; }
h3 { margin:24px 0 8px; font-size:13px; font-weight:400; color:var(--muted); text-transform:uppercase; letter-spacing:1px; }
p, .muted { color:var(--muted); }
.hidden { display:none !important; }

/* Bovenbalk */
.top { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding-bottom:14px; border-bottom:1px solid var(--line); }
body.met-menu .top { display:none; }

/* Knoppen en velden */
.btn { display:inline-flex; align-items:center; justify-content:center; background:transparent; color:var(--text); border:1px solid var(--lijn-sterk); white-space:nowrap; font-family:inherit;
       padding:10px 16px; text-decoration:none; font-weight:600; cursor:pointer; font-size:14px; }
.btn:hover { border-color:var(--accent); }
.btn:disabled { opacity:.5; cursor:default; }
.link { background:none; border:0; padding:0; color:var(--muted); cursor:pointer; font-size:14px; text-decoration:none; }
.link:hover { color:var(--text); text-decoration:underline; }
.gevaar, .gevaar:hover { color:var(--gevaar); }
input, select { background:var(--bg); color:var(--text); border:1px solid var(--lijn-sterk);
                padding:10px 12px; font-size:14px; min-width:0; }
input:focus, select:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.rij { display:flex; gap:8px; margin-top:12px; }
.rij input { flex:1; }

/* Lijsten (teams, leden, codes) */
.lijst { list-style:none; margin:0; padding:0; }
.lijst li { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); }
.lijst li:last-child { border-bottom:0; }
.lijst .groei { flex:1; min-width:0; overflow-wrap:anywhere; }
.lijst img, .lijst .geen-avatar { width:32px; height:32px; flex:none; background:var(--line); }
.team-link { display:flex; align-items:center; gap:10px; flex:1; color:var(--text); text-decoration:none; }
.team-link:hover strong { color:var(--accent); }
.rol { font-family:var(--cijfer); font-size:12px; color:var(--zacht); border:1px solid #333a47; padding:1px 7px; }
.code { font-family:var(--cijfer); font-size:16px; letter-spacing:1px; }
.lid-info { display:block; font-size:12px; }
.code-link { width:100%; margin-top:6px; font-size:12px; color:var(--muted); }

.melding { padding:10px 12px; margin:16px 0 0; }
.fout { background:var(--mis-vlak); border:1px solid var(--mis-lijn); color:var(--gevaar); }
.info { background:var(--diep); border:1px solid var(--line); color:var(--zacht); }
.vertrek { margin-top:28px; text-align:right; }

/* Demo */
.demo-banner { display:flex; align-items:center; gap:6px 14px; flex-wrap:wrap; margin:12px 0 0; padding:8px 12px;
               background:var(--eigen); border:1px solid var(--accent); font-size:14px; }
.demo-banner .demo-links { margin-left:auto; display:flex; gap:12px; }
.demo-spelers { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0; }
.demo-spelers li { list-style:none; border:0; padding:0; }
.demo-speler { width:100%; display:flex; flex-direction:column; gap:2px; align-items:flex-start; text-align:left; padding:12px 14px;
               background:var(--card); border:1px solid var(--line); color:var(--text); cursor:pointer; font-size:16px; text-decoration:none; }
.demo-uitleg { font-size:12px; }
.demo-speler:hover { border-color:var(--accent); }
@media (max-width: 480px) { .demo-spelers { grid-template-columns:1fr; } }
/* In de demo verborgen: wat daar niet mag (zie DEMO_ALLOWED in lib/app.js) */
body.demo .vertrek, body.demo .gevaarzone, body.demo #beheer, body.demo #eigenaar, body.demo #verlaten, body.demo #owner-vertrek, body.demo #join-form, body.demo #nieuw-form,
body.demo #account-weg, body.demo #data-download, body.demo #terug-teams, body.demo #admin-link,
body.demo .sf-foto-erbij, body.demo .sf-foto-hint { display:none !important; }

@media (max-width: 480px) {
  .rij { flex-direction:column; }
}

/* Logo is een link naar het overzicht */
.logo { color:inherit; text-decoration:none; }

/* Kop met knop ernaast (Strats + New strat) */
.kop { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.kop h3 { margin-bottom:8px; }
.btn.klein { padding:6px 12px; font-size:13px; }
/* Telefoon: alles wat je aantikt is minstens 44 pixels hoog */
@media (max-width: 800px) { .btn.klein { min-height:44px; } }

/* Strats: filters, lijst en labels */
.filters { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:4px; }
.filters select { flex:1; min-width:120px; }
.filters input[type=search] { flex:1 1 100%; }
.strat-link { display:flex; align-items:center; gap:10px; flex:1; flex-wrap:wrap; color:var(--text); text-decoration:none; }
.strat-link:hover strong { color:var(--accent); }
.labels { display:flex; gap:6px; flex-wrap:wrap; margin:0; }
.label { font-family:var(--cijfer); font-size:12px; padding:1px 7px; background:none; border:1px solid #333a47; color:var(--zacht); white-space:nowrap; }
.label.t  { background:var(--t-vlak); color:var(--t); }
.label.ct { background:var(--ct-vlak); color:var(--ct); }
.label.record { background:var(--ok-vlak); color:var(--teal); }
.label.nieuw { background:var(--ok-vlak); color:var(--teal); }
.label.bijgewerkt { background:var(--eigen); color:var(--accent); }
.label.draft { border:1px dashed #9a7b2e; color:var(--t); }

/* Recent games: datum, map, eindstand (groen = gewonnen, rood = verloren) */
#geschiedenis .datum { min-width:110px; font-size:13px; }
.uitslag { font-variant-numeric:tabular-nums; }
.uitslag.won { color:var(--teal); }
.uitslag.lost { color:var(--gevaar); }
.uitslag.gelijk { color:var(--muted); }
#geschiedenis-meer { margin-top:8px; }
#geschiedenis .groei { flex:1; }

/* Rondes met een notitie (live-scherm en afgelopen wedstrijd) */
.rondes-blok { margin-top:16px; border:1px solid var(--line); padding:4px 14px 12px; }
.rondes-blok summary { cursor:pointer; padding:8px 0; font-weight:600; }
.rondes-blok .muted { margin:0 0 10px; font-size:13px; }
.rondes { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.ronde { display:flex; flex-direction:column; gap:8px; background:var(--diep);
         padding:10px 12px; border-left:3px solid var(--line); }
.ronde.won { border-left-color:var(--teal); }
.ronde.lost { border-left-color:var(--mis-lijn); }
.ronde-kop { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.ronde-nr { font-weight:700; min-width:34px; }
.ronde-strat { flex:1; min-width:0; color:var(--muted); font-size:13px; overflow-wrap:anywhere; }
.ronde-status { font-size:12px; color:var(--muted); min-height:1em; margin-top:-4px; }
.ronde-notitie-tekst { white-space:pre-wrap; overflow-wrap:anywhere; margin:0; color:var(--text); }

/* Speler bij een rol, of "Unassigned" */
.speler { display:flex; align-items:center; gap:8px; }
.speler img, .speler .geen-avatar { width:24px; height:24px; }
.unassigned { color:var(--t); font-size:13px; }

/* Strat bekijken */
.uitleg { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); background:var(--diep); padding:12px 14px; margin:16px 0 0; }
.lijst li.taak { display:block; }
.taak-kop { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.taak-tekst { white-space:pre-wrap; overflow-wrap:anywhere; color:var(--text); margin:6px 0 0; }
.acties { display:flex; align-items:center; gap:16px; margin-top:24px; }

/* Formulier */
.formulier { display:flex; flex-direction:column; gap:14px; }
.formulier label { display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--muted); }
.formulier h3 { margin-bottom:0; }
.formulier .muted { margin:0; font-size:13px; }
textarea { background:var(--bg); color:var(--text); border:1px solid var(--lijn-sterk);
           padding:10px 12px; font:inherit; font-size:14px; resize:vertical; }
textarea:focus { outline:2px solid var(--accent); outline-offset:-1px; }
.drie { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
#sf-taak-erbij { align-self:flex-start; }
#sf-taak-erbij:disabled { opacity:.5; cursor:default; text-decoration:none; }

@media (max-width: 480px) {
  .drie { grid-template-columns:1fr; }
}

/* Strats die niet bij het filter passen: wel zichtbaar, maar lichter en onderaan */

/* Velden met het hidden-attribuut altijd verbergen (ook als er display op staat) */
[hidden] { display:none !important; }

/* Strat bekijken: buy-labels en stappen als tijdlijn */
.buy-labels { margin-top:8px; }
.label.buy { border:1px solid var(--lijn-sterk); background:transparent; color:var(--zacht); }
.stappen { list-style:none; margin:10px 0 0; padding:0 0 0 12px; border-left:2px solid var(--line); }
.stappen li { display:flex; flex-wrap:wrap; gap:10px; align-items:baseline; padding:4px 0; }
.moment { flex:none; min-width:52px; font-size:12px; font-weight:600; font-family:var(--cijfer); }
.moment.tijd { color:var(--accent); }
.moment.call { color:var(--ct); }
.moment q { font-family:system-ui, sans-serif; }
.stap-tekst { white-space:pre-wrap; overflow-wrap:anywhere; }

/* Formulier: één blok per rol */
.rol-blok { border:1px solid var(--line); padding:12px; margin:0 0 12px;
            display:flex; flex-direction:column; gap:10px; min-width:0; }
.rol-kop { display:flex; gap:10px; align-items:center; }
.rol-kop .sf-rol, .rol-kop .sf-rol-keuze { flex:1; min-width:0; font-weight:600; }
.rol-inhoud { display:flex; flex-direction:column; gap:10px; min-width:0; }
.rol-klap { flex:none; width:32px; height:32px; background:none; border:0; color:var(--muted); cursor:pointer; font-size:16px; padding:0; }
.rol-klap:hover { color:var(--text); background:var(--line); }
.rol-samenvatting { display:none; text-align:left; background:none; border:0; padding:0 0 0 42px; margin-top:-4px; color:var(--muted); font-size:13px; cursor:pointer; }
.rol-blok.ingeklapt .rol-inhoud { display:none; }
.rol-blok.ingeklapt .rol-samenvatting { display:block; }
.rol-blok .rol-samenvatting:empty { display:none; }
.rol-blok.ingeklapt { gap:6px; }
.rol-leeg-tekst { display:none; font-size:12px; white-space:nowrap; }
.rol-leeg { opacity:.7; }
.rol-leeg:focus-within, .rol-leeg:hover { opacity:1; }
.rol-leeg .rol-leeg-tekst { display:inline; }
.veldnaam { font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; margin-right:4px; }
.keuzes { display:flex; flex-wrap:wrap; align-items:center; gap:6px 14px; }
.vink { display:inline-flex !important; flex-direction:row !important; align-items:center; gap:6px;
        font-size:14px !important; color:var(--text) !important; cursor:pointer; }
.vink input { accent-color:var(--accent); margin:0; }
#beheer .vink { display:flex !important; margin:12px 0; }
.vink:has(input:disabled) { opacity:.5; cursor:default; }
.nade-teller { font-size:12px; }
.rij-velden { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.rij-velden .sf-wapen { flex:1; min-width:140px; }
.alleen-ct { display:none !important; }
.is-ct .alleen-ct { display:inline-flex !important; }

/* Stap:
   [Time/Call] [1:45 of call] [↑ ↓ Move Remove]
   [wat er gebeurt, groot tekstvak]
   [Move to… (alleen na klikken op Move)] */
.sf-stappen { display:flex; flex-direction:column; gap:8px; }
.stap-rij { display:grid; grid-template-columns:82px minmax(0, 1fr) auto; gap:6px 8px; align-items:center;
            padding:8px; background:var(--diep); border:1px solid var(--line); border-left:3px solid var(--accent); }
.stap-rij.is-call { border-left-color:var(--ct); }
.stap-rij .sf-moment, .stap-rij .sf-tijd { color:var(--accent); font-weight:600; }
.stap-rij.is-call .sf-moment { color:var(--ct); }
.stap-rij .sf-tijd { font-family:var(--cijfer); }
.stap-rij .sf-tijd, .stap-rij .sf-call { grid-column:2; }
.stap-rij .sf-tijd { width:70px; }
.stap-rij .sf-tekst { grid-column:1 / -1; resize:vertical; }
.stap-rij .sf-naar-rol { grid-column:1 / -1; justify-self:start; min-width:180px; max-width:100%; }
.stap-knoppen { grid-column:3; display:flex; gap:10px; }
.stap-knoppen button:disabled { opacity:.3; cursor:default; text-decoration:none; }
.sf-stap-erbij { align-self:flex-start; }

/* Smal scherm: knoppen onder het tekstvak, dan houdt de tijd/call de hele regel */
@media (max-width: 480px) {
  .stap-knoppen { grid-column:1 / -1; grid-row:3; justify-content:flex-end; }
  .stap-rij .sf-naar-rol { grid-row:4; }
}

/* Hoofdknop (oranje) */
.btn.primair { background:var(--accent); border-color:var(--accent); color:var(--bg); }
.btn.primair:hover { background:var(--accent-licht); border-color:var(--accent-licht); }

/* Save-knop blijft onderaan in beeld tijdens het scrollen */
.opslaan-balk { position:sticky; bottom:0; z-index:1; margin:8px 0 0; padding:12px 0;
                background:var(--bg); border-top:1px solid var(--line); }

/* Strat bekijken/bewerken: pagina groeit mee met het scherm, rollen naast elkaar als het past */
#sf-taken, #strat-taken, #strat-mijn { display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%, 420px), 1fr));
                          gap:12px; align-items:start; }
#sf-taken .rol-blok { margin:0; }
#strat-taken li.taak { border:1px solid var(--line); padding:12px; }
#strat-taken li.taak:last-child { border-bottom:1px solid var(--line); }

/* Wedstrijd: blok op de teampagina */
.match { margin:0 0 14px; }
.match-live { display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 12px;
              border:1px solid var(--mis-lijn); background:var(--mis-vlak); }
.live-badge { font-size:12px; font-weight:700; letter-spacing:1px; color:#fff; background:#d33; padding:2px 8px; animation:knipper 2s ease-in-out infinite; }
@keyframes knipper { 50% { opacity:.55; } }
@media (prefers-reduced-motion: reduce) { .live-badge { animation:none; } }

/* Live-scherm */
.ronde-uitslag { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
.btn.won { background:var(--ok-vlak); border-color:var(--teal); color:var(--teal); }
.btn.lost { background:var(--mis-vlak); border-color:var(--mis-lijn); color:var(--gevaar); }
.btn.won:hover { border-color:var(--teal); }
.btn.lost:hover { border-color:var(--gevaar); }
#live-undo:disabled { opacity:.4; cursor:default; text-decoration:none; }
@media (max-width: 480px) { .ronde-uitslag .veldnaam { width:100%; } }
.live-beheer { border:1px solid var(--line); padding:4px 14px 12px; margin-top:16px; }
.live-beheer h3 { margin-top:12px; }
.strat-knoppen { display:flex; flex-wrap:wrap; gap:8px; }
.strat-knop { display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left;
              background:var(--diep); color:var(--text); border:1px solid var(--lijn-sterk);
              padding:10px 12px; cursor:pointer; font:inherit; min-width:140px; }
.strat-knop:hover { border-color:var(--accent); }
.strat-knop.gekozen { border-color:var(--accent); background:var(--eigen); box-shadow:0 0 0 1px var(--accent) inset; }
.live-titel { font-size:24px; margin-top:24px; }
.live-rol { color:var(--text); font-size:16px; }
/* Jouw eigen deel valt op: gemarkeerd, de rest van de pagina is rustiger */
#live-mijn.eigen { border:2px solid var(--accent); padding:14px 16px 16px; background:var(--eigen); margin-top:10px; }
#live-mijn .live-rol { font-size:15px; color:var(--muted); margin:0 0 4px; }
#live-mijn .live-rol strong { display:block; font-size:28px; line-height:1.2; color:var(--text); margin-top:2px; }
.live-titel { margin-bottom:0; }
#live-mijn:empty { display:none; }

/* Stappen groot en goed leesbaar (naast de game, op een tweede scherm of telefoon) */
.live-stappen { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:8px; }
.live-stappen li { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; padding:12px 14px;
                   background:var(--diep); font-size:18px; line-height:1.35; }
.live-stappen .moment { font-size:16px; min-width:64px; }
.live-stappen .stap-tekst { flex:1; min-width:180px; }

/* Tekstpagina's (privacyverklaring) en de voettekst */
.tekst ul { color:var(--muted); padding-left:20px; }
.tekst li { margin:6px 0; line-height:1.5; }
.tekst p { line-height:1.5; }
.tekst strong, .tekst em { color:var(--text); }
.voet { margin-top:28px; text-align:center; font-size:13px; }
.voet + .voet { margin-top:12px; }
.support-manier { margin:18px 0; padding:14px 16px; background:var(--diep); }
.support-manier h3 { margin-top:0; }

/* Afbeeldingen bij stappen */
.stap-fotos { display:flex; flex-wrap:wrap; gap:8px; flex-basis:100%; margin-top:6px; }
.foto-knop { padding:0; border:1px solid var(--line); background:var(--diep); cursor:zoom-in; line-height:0; overflow:hidden; }
.foto-knop:hover { border-color:var(--accent); }
.foto-knop img { display:block; height:90px; max-width:160px; width:auto; object-fit:cover; }
.live-stappen .foto-knop img { height:130px; max-width:220px; }
.foto-groot { padding:0; border:0; background:transparent; max-width:96vw; max-height:96vh; cursor:zoom-out; }
.foto-groot::backdrop { background:rgba(0,0,0,.85); }
.foto-groot img { display:block; max-width:96vw; max-height:96vh; }

.stap-rij .sf-foto-rij { grid-column:1 / -1; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.sf-fotos { display:contents; }
.sf-foto { position:relative; line-height:0; border:1px solid var(--line); overflow:hidden; }
.sf-foto img { display:block; height:64px; max-width:110px; width:auto; object-fit:cover; }
.sf-foto .foto-weg { position:absolute; top:2px; right:2px; width:22px; height:22px; padding:0; line-height:20px; text-align:center;
                     border-radius:50%; border:0; background:rgba(0,0,0,.7); color:#fff; cursor:pointer; font-size:15px; }
.sf-foto .foto-weg:hover { background:var(--mis-lijn); }
.sf-foto-hint { font-size:12px; }


/* Favorieten: de ster */
.ster { background:none; border:0; padding:0 4px; font-size:20px; line-height:1; cursor:pointer; color:var(--muted); flex:none; }
.ster:hover { color:var(--accent); }
.ster[aria-pressed="true"] { color:var(--accent); }
.ster:disabled { opacity:.5; cursor:default; }
.ster.groot { font-size:26px; }
.strat-kop { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.strat-kop h2 { margin:0; }

/* Actief team ("Playing for") en meldingen over live wedstrijden van andere teams */
.actief-blok { display:flex; align-items:center; gap:6px; font-size:13px; }
.actief-blok select { padding:4px 8px; font-size:13px; max-width:160px; }
.live-melding { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.live-melding span { flex:1; min-width:180px; }

/* Owner (captain) */
.rol.owner { background:var(--accent); border-color:var(--accent); color:var(--bg); font-weight:700; }

/* Utility-bibliotheek en afspraken per map */
.kop-knoppen { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.bib-item { display:block !important; }
/* Strat maken of bewerken op een PC (vanaf 1100 px): rechts naast het formulier een voorvertoning die meebeweegt bij het scrollen */
.sf-voorbeeld { display:none; }
@media (min-width: 1100px) {
  .sf-kolommen { display:grid; grid-template-columns:minmax(0, 1fr) 380px; gap:28px; align-items:start; }
  .sf-voorbeeld { display:block; position:sticky; top:16px; max-height:calc(100vh - 32px); overflow-y:auto; padding:14px 16px; border:1px solid var(--line); background:var(--diep); }
  .sf-voorbeeld h3 { margin-top:0; }
  .sf-voorbeeld h2 { margin-top:8px; }
}

/* Utility voor IGL en coach op een PC (vanaf 1100 px): de kaart is breder en de items staan als kaarten naast elkaar met grotere plaatjes */
@media (min-width: 1100px) {
  #bibliotheek.bib-beheer #bib-lijst { display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); gap:14px; align-items:start; }
  #bibliotheek.bib-beheer #bib-lijst > li { margin:0; padding:14px; border:1px solid var(--line); background:var(--diep); min-width:0; }
  #bibliotheek.bib-beheer #bib-lijst .foto-knop img, #bibliotheek.bib-beheer .bib-details .foto-knop img { height:150px; max-width:100%; }
}
.bieb-filters { margin:8px 0; }
.bieb-filters input[type=search] { width:100%; margin-bottom:8px; }
.bieb-filters .rij { display:flex; gap:8px; flex-wrap:wrap; }
.bieb-filters .rij select { flex:1; min-width:120px; }
.lineup { margin:6px 0 0; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.lineup code { overflow-wrap:anywhere; font-size:13px; }
.admin-open { margin-left:4px; }
.bieb-pack { display:flex; align-items:center; justify-content:space-between; gap:10px; margin:14px 0 4px; }
.bieb-pack h4 { margin:0; }
.bieb-regel { padding:6px 0; border-top:1px solid var(--line); }
.bieb-regel.toegevoegd { opacity:.65; }
.bib-voorstel { margin-top:6px; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.bib-voorstel label { display:flex; gap:6px; align-items:center; }
.bib-voorstel input[type=checkbox] { width:auto; margin:0; }
.bib-kiesbalk { display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 10px; }
.bib-kiesbalk label, .bib-kies { display:flex; gap:8px; align-items:center; }
.bib-kiesbalk input[type=checkbox], .bib-kies input[type=checkbox] { width:auto; margin:0; }
.bib-kop { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.bib-tekst { margin:6px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45; }
.bib-item .stap-fotos { margin-top:8px; }
.bib-item > .link { margin-top:6px; }
/* Een bibliotheek-item als één regel (admin en Teamstrats library): de rest staat achter "Details" */
.bib-rij { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.bib-rij .stap-fotos { flex:0 0 56px; height:36px; margin:0; display:block; overflow:hidden; }
.bib-rij .foto-knop { display:block; width:56px; height:36px; padding:0; border:0; }
.bib-rij .foto-knop img { display:block; width:56px; height:36px; max-width:none; object-fit:cover; }
.bib-rij .geen-foto { background:var(--diep); }
.bib-hoofd { flex:1 1 220px; min-width:0; display:flex; flex-direction:column; }
.bib-hoofd strong { font-size:15px; font-weight:600; line-height:1.25; overflow-wrap:anywhere; }
.bib-hoofd .muted { font-size:12px; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bib-knoppen { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.bib-details { padding:8px 0 6px; font-size:14px; }
.bib-details p { margin:6px 0 0; }
.bib-details .bib-tekst { color:#d6d8dc; }
.keuzebalk input[type=checkbox], .bib-rij input[type=checkbox] { width:18px; height:18px; margin:0; padding:0; flex:0 0 auto; accent-color:var(--accent); cursor:pointer; }
.keuzebalk { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
.keuzebalk label { display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer; }
.keuzebalk .acties-rechts { margin-left:auto; }
.bieb-keuze { margin:10px 0 4px; }
.bieb-keuze .btn { padding:8px 14px; }
.bieb-regel .bib-knoppen .link { font-size:13px; }
@media (max-width: 480px) { .bib-hoofd { flex-basis:calc(100% - 110px); } }
.bib-form { background:var(--diep); border:1px solid var(--line); padding:14px 16px; margin:0 0 16px; }
.bib-form h3 { margin-top:0; }
.bib-form input, .bib-form textarea { width:100%; margin-top:8px; }
.bib-form .rij { display:flex; gap:8px; }
.bib-form .rij select { flex:1; }
#live-afspraken { background:var(--diep); border:1px solid var(--line); padding:10px 14px; margin:12px 0; }
#live-afspraken summary { cursor:pointer; color:var(--muted); font-size:14px; }
#live-afspraken .bib-item { padding:10px 0; border-top:1px solid var(--line); margin-top:8px; }

/* In de stap-editor: utility invoegen of opslaan */
.stap-rij .sf-utility-balk { grid-column:1 / -1; display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.stap-rij .sf-utility { min-width:200px; max-width:100%; }

/* Ronde-logica: opties bij het starten van een wedstrijd */
.match-opties { flex-basis:100%; font-size:14px; color:var(--muted); }
.match-opties summary { cursor:pointer; }
.match-opties label { display:flex; align-items:center; gap:8px; margin-top:8px; }
.match-opties label.vink { color:var(--text); }

/* Rondetype: tikken voor de volgende ronde, en het type bij elke ronde */
.type-rij { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:12px; }
.type-knoppen { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.type-knop.gekozen { border-color:var(--accent); background:var(--eigen); color:var(--accent); }
.strat-knop.gedimd { opacity:.5; }
.strat-knop.gedimd:hover { opacity:1; }
.ronde-type.label { font-size:11px; }
@media (max-width: 480px) { .type-rij .veldnaam { width:100%; } }

/* Wedstrijdstand: per helft, match point en "Game finished" */
.label.matchpoint { font-weight:700; }
.label.matchpoint.wij { background:var(--eigen); color:var(--accent); border:1px solid var(--accent); }
.label.matchpoint.zij { background:var(--mis-vlak); color:var(--gevaar); border:1px solid var(--mis-lijn); }
.live-bericht { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:12px 0 4px; padding:14px 16px;
                background:var(--eigen); border:2px solid var(--accent); }
.live-bericht-tekst { flex:1; min-width:200px; font-size:22px; line-height:1.3; color:var(--accent); overflow-wrap:anywhere; }
.live-bericht-knoppen { display:flex; align-items:center; gap:10px; }
.bericht-rij { flex-wrap:wrap; align-items:center; margin-top:12px; }
.bericht-rij .veldnaam { width:100%; margin:0; }
.bericht-rij input { flex:1 1 220px; min-width:0; }
.live-klaar { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:16px; margin-bottom:10px; }
.live-klaar span { flex:1; min-width:200px; }

/* Teampagina: tabbladen (Play, Library, Team) */

/* Blokken op het tabblad Play: wat nieuw is voor jou, en wat aandacht vraagt */
.blok { border:1px solid var(--line); padding:2px 14px 8px; margin-top:16px; }
.blok h3 { margin-top:12px; }
.blok.blok-nieuw { border-color:var(--teal); background:var(--ok-vlak); }
.blok.blok-nieuw h3 { color:var(--teal); }
.blok .rol { white-space:nowrap; }

/* Op Play: de weg naar de strats in Library */
.play-kaart { display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; margin-top:16px; padding:14px 16px; border:1px solid var(--line); background:none; color:var(--text); font:inherit; text-align:left; cursor:pointer; }
.play-kaart:hover { border-color:var(--accent); }
.play-kaart .muted { font-size:13px; }
.play-alle { display:block; width:100%; margin-top:16px; }

/* Library-tab: bovenaan de keuze Strats, Utility of Agreements met de bijbehorende knoppen */
.lib-kop { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; }
.lib-delen { flex:1 1 300px; max-width:640px; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; padding:4px;
             background:var(--diep); border:1px solid var(--line); }
.lib-delen button { min-height:44px; padding:8px 2px; border:0; background:none; color:var(--muted); font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.lib-delen button:hover { color:var(--text); }
.lib-delen button.aan { background:var(--line); color:var(--text); }
.lib-delen button:focus-visible { outline:2px solid var(--accent); outline-offset:-2px; }
.lib-delen .aantal { font-size:12px; font-weight:400; color:var(--muted); }
@media (max-width: 480px) { .lib-delen { flex-basis:100%; grid-template-columns:repeat(2, minmax(0, 1fr)); } .lib-delen button { font-size:13px; white-space:nowrap; } .lib-delen .aantal { font-size:11px; } }
#lib-favorieten:empty, #lib-concepten:empty { display:none; }
#bibliotheek { margin-top:14px; }

/* Onderaan het tabblad Team: alles wat onomkeerbaar is */
.gevaarzone { border:1px solid var(--mis-lijn); padding:2px 14px 14px; margin-top:32px; }
.gevaarzone h3 { color:var(--gevaar); }
.gevaarzone .vertrek { margin-top:12px; }

/* Live-scherm: kolommen, vaste Won/Lost-balk en het menu met de zeldzame knoppen */
.live-kolommen { display:block; }
.live-balk { position:sticky; bottom:0; z-index:2; display:flex; gap:10px; align-items:stretch; margin:20px -28px -28px;
             padding:12px 28px calc(12px + env(safe-area-inset-bottom, 0px)); background:var(--diep); border-top:1px solid var(--line); }
.live-balk .btn { padding:16px 12px; font-size:18px; }
.live-balk .btn.won, .live-balk .btn.lost { flex:1; }
.live-menu { position:relative; display:flex; }
.live-menu summary { list-style:none; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.live-menu summary::-webkit-details-marker { display:none; }
.live-menu-lijst { position:absolute; right:0; bottom:calc(100% + 8px); min-width:180px; display:flex; flex-direction:column; gap:2px;
                   background:var(--card); border:1px solid var(--lijn-sterk); padding:6px; box-shadow:0 8px 24px #0009; }
.live-menu-lijst .link { text-align:left; padding:10px 12px; font-size:15px; }
.live-menu-lijst .link:hover { background:var(--diep); }
.live-menu-lijst .link:disabled { opacity:.4; cursor:default; }
@media (max-width: 480px) { .live-balk { margin:20px -16px -20px; padding-left:16px; padding-right:16px; } }

/* Team-scherm voor IGL en coach op een breed scherm: de kaart wordt breder, links de wedstrijd en het gameplan, rechts de strats.
   Spelers en smalle schermen (telefoon) houden de ene smalle kolom. */
@media (min-width: 1100px) {
  #team.team-beheer .play-kolommen, .play-kolommen:has(.play-rechts > :not(.hidden)) { display:grid; grid-template-columns:minmax(0, 420px) minmax(0, 1fr); gap:32px; align-items:start; }
  .play-rechts { display:flex; flex-direction:column; gap:14px; }
  .play-rechts > * { margin:0; }
  #team:has(#tab-play:not(.hidden)) { max-width:1280px; } /* ook spelers krijgen op Play de breedte */
  /* Library: de lijst links, favorieten en concepten in een smalle kolom rechts */
  #team.team-beheer .lib-kolommen { display:grid; grid-template-columns:minmax(0, 1fr) 320px; grid-template-rows:auto 1fr; column-gap:32px; align-items:start; }
  #team.team-beheer .lib-kolommen:has(#lib-favorieten:empty):has(#lib-concepten:empty) { grid-template-columns:minmax(0, 1fr); }
  #team.team-beheer .lib-lijst { grid-column:1; grid-row:1 / span 2; }
  #team.team-beheer #lib-favorieten, #team.team-beheer #lib-concepten { grid-column:2; }
  #team.team-beheer #lib-favorieten .blok { margin-top:10px; }
  #team.team-beheer #lib-concepten details.concepten { margin-top:10px; }
}

/* IGL: de knoppen voor de volgende ronde (strat kiezen) staan bovenaan, de eigen rol eronder, ook op een telefoon */
#live.live-igl .live-links { display:flex; flex-direction:column; }
#live.live-igl .live-beheer { order:-1; margin-top:12px; }

/* Berichtregel: ook op een telefoon (waar .rij een kolom wordt) een gewone regel, geen hoog veld */
@media (max-width: 480px) { .bericht-rij { flex-direction:row; } .bericht-rij .veldnaam { flex-basis:100%; } }
/* Coach: de knoppen voor de volgende ronde staan bovenaan, de rollen eronder */
#live.live-coach .live-links { display:flex; flex-direction:column; }
#live.live-coach .live-beheer { order:-1; margin-top:12px; }

/* Stratpagina: Edit naast de titel, en jouw eigen rol gemarkeerd */
.strat-acties { display:flex; align-items:center; gap:8px; margin-left:auto; }
.live-menu.neer .live-menu-lijst { bottom:auto; top:calc(100% + 8px); z-index:3; }
.live-menu-lijst a.link { display:block; }
.strat-mijn { border:2px solid var(--accent); padding:2px 14px 10px; margin-top:16px; background:var(--eigen); }
.strat-mijn h3 { color:var(--accent); }

/* Strat-overzicht: tabbladen per map, groepen per kant en rondetype, regels met taak of winst */
#strat-filters input[type=search] { flex:1 1 180px; }
#strat-filters select { flex:0 1 auto; }
.strat-maps { position:relative; display:flex; gap:6px; max-width:100%; overflow-x:auto; margin-top:12px; padding-bottom:2px; }
.strat-maps button { flex:none; display:flex; align-items:center; gap:6px; background:none; color:var(--muted); border:1px solid var(--line); padding:7px 14px; font-size:14px; font-weight:600; cursor:pointer; }
.strat-maps button:hover { color:var(--text); }
.strat-maps button.aan { color:var(--text); border-color:var(--accent); background:var(--eigen); }
.strat-maps .aantal { font-size:12px; font-weight:400; color:var(--muted); }
.livestip { width:8px; height:8px; border-radius:50%; background:#d33; }
#strats .blok { margin-top:16px; }
.groep { margin-top:22px; }
.groepkop { display:flex; align-items:center; gap:8px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.groepkop strong { font-size:15px; }
.rondetype { margin:12px 0 2px; font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); }
.srij { display:flex; flex-wrap:wrap; align-items:center; gap:2px 10px; padding:9px 0; border-bottom:1px solid var(--line); }
.srij:last-child { border-bottom:0; }
.srij-main { flex:1 1 150px; min-width:0; }
.srij-kop { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 8px; }
.srij-titel { color:var(--text); font-weight:600; text-decoration:none; overflow-wrap:anywhere; }
.srij-titel:hover { color:var(--accent); }
.srij-sub { font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.srij-sub strong { color:var(--text); font-weight:600; }
.srij-rechts { display:flex; align-items:center; justify-content:flex-end; gap:10px; margin-left:auto; }
.srij-rechts:empty { display:none; }
.rol.eigen { color:var(--accent); border-color:var(--accent); background:var(--eigen); }
.rec { font-variant-numeric:tabular-nums; font-size:13px; color:var(--muted); white-space:nowrap; }
.winbalk { display:flex; align-items:center; gap:8px; }
.winbalk .balk { width:84px; height:8px; background:var(--line); overflow:hidden; }
.winbalk .balk i { display:block; height:100%; }
.winbalk .pct { width:46px; margin-right:2px; text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
details.concepten { margin-top:22px; border:1px dashed #9a7b2e; padding:2px 14px; }
details.concepten summary { cursor:pointer; padding:10px 0; color:var(--t); font-weight:600; }
.leeg { color:var(--muted); padding:16px 0; }
@media (max-width: 480px) {
  .winbalk .balk { width:56px; }
}

/* Rondetype als label in elke regel van het strat-overzicht */
.label.rondetype-label { font-weight:600; }

/* Herhalen: de strat van de vorige ronde met één tik opnieuw kiezen */
.btn.herhaal { display:block; width:100%; margin:4px 0 8px; text-align:left; border-color:var(--accent); color:var(--accent);
               overflow:hidden; text-overflow:ellipsis; }

/* Game starten: een opvallende kaart bovenaan het tabblad Play (alleen IGL/coach, als er geen game loopt) */
.start-kaart { display:flex; flex-direction:column; gap:8px; padding:6px 18px 18px; border:2px solid var(--accent); background:var(--eigen); }
.start-kaart h3 { margin:14px 0 0; font-size:18px; color:var(--accent); text-transform:none; letter-spacing:0; }
.start-kaart > .muted { margin:0 0 6px; font-size:13px; }
.start-kaart select { width:100%; font-size:16px; padding:12px; }
.start-kaart input[type=text], .start-kaart input:not([type]) { width:100%; font-size:16px; padding:12px; }
.start-kaart .veldnaam { margin:6px 0 0; }
.start-knoppen { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:6px; }
.start-knoppen .btn { margin-top:0; }
.start-knoppen .start-t { background:var(--t); border-color:var(--t); }
.start-knoppen .start-ct { background:var(--ct); border-color:var(--ct); }
.start-plan { margin:0; font-size:14px; }
.start-kaart .match-opties { margin-top:4px; }
.match-live .btn.primair { margin-top:0; }

/* Het stuk "Strats": de to-do in één regel, ruimere regels en tabbladen */
.aandacht { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; margin-top:12px; padding:8px 12px; border:1px solid var(--accent); background:var(--eigen); font-size:13px; color:var(--accent); }
.aandacht-lijst { display:flex; flex-wrap:wrap; gap:6px 14px; }
.aandacht-lijst .link { color:var(--text); text-decoration:underline; text-underline-offset:3px; font-size:13px; }
#strat-filters { margin-top:14px; }
#strat-filters input[type=search] { padding:12px; font-size:15px; }
#strat-filters select { padding:12px; }
.strat-maps button { padding:9px 16px; font-size:15px; }
.groepkop strong { font-size:17px; }
.srij { padding:12px 0; }
.srij-titel { font-size:16px; }
.leeg-kaart { margin-top:18px; padding:22px 18px; border:2px dashed var(--lijn-sterk); text-align:center; display:flex; flex-direction:column; align-items:center; gap:6px; }
.leeg-kaart strong { font-size:18px; }
.leeg-kaart p { margin:0 0 8px; max-width:34ch; }

/* Recent games: "in progress" mag niet afbreken; liever springt de stand naar de volgende regel */
#geschiedenis .groei { flex:1 0 auto; white-space:nowrap; }

/* Rustiger overzicht: kant-keuze, één regel per strat, compacte werkbalk */
.kant-wissel { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.kant-knop { display:flex; justify-content:center; align-items:baseline; gap:8px; padding:11px; border:2px solid var(--lijn-sterk); background:var(--diep);
             color:var(--muted); font-size:17px; font-weight:700; cursor:pointer; }
.kant-knop .aantal { font-size:12px; font-weight:400; }
.kant-knop.aan.t { border-color:var(--t); background:var(--t-vlak); color:var(--t); }
.kant-knop.aan.ct { border-color:var(--ct); background:var(--ct-vlak); color:var(--ct); }
.rondetype span { margin-left:6px; }
.srij-main { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 8px; }
.srij-ctx { font-size:13px; color:var(--muted); }
.srij-taak { flex-basis:100%; padding-left:34px; font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.srij-taak strong { color:var(--text); font-weight:600; }
.kijk { background:none; border:0; color:var(--muted); cursor:pointer; font-size:14px; padding:2px 6px; }
.kijk:hover { color:var(--text); background:var(--diep); }
.streep { color:var(--lijn-sterk); font-size:15px; padding-right:6px; }
#strat-filters { flex-wrap:nowrap; align-items:stretch; }
#strat-filters input[type=search] { flex:1 1 auto; }
#strat-filters .live-menu summary { margin:0; width:46px; padding:0; font-size:18px; }
.menu-kop { font-size:11px; letter-spacing:.8px; text-transform:uppercase; color:var(--muted); padding:4px 8px; }
.live-menu-lijst label { display:flex; gap:8px; align-items:center; padding:8px; cursor:pointer; font-size:14px; color:var(--text); }
.live-menu-lijst label:hover { background:var(--diep); }

/* Startpagina (niet ingelogd): links de belofte, rechts een voorbeeld van het live-scherm */
#uitgelogd { max-width:1200px; margin-inline:auto; padding-top:32px; }
.hero-boven { display:grid; grid-template-columns:minmax(0, 1.15fr) minmax(0, 1fr); gap:40px; align-items:center; }
.hero-tekst { display:flex; flex-direction:column; gap:14px; }
.hero-tekst p { margin:0; }
.hero-kop { margin:0; font-size:clamp(32px, 3.6vw, 48px); line-height:1.05; letter-spacing:.5px; text-wrap:balance; }
.hero-sub { max-width:50ch; font-size:18px; line-height:1.55; color:var(--zacht); }
.hero-knoppen { justify-content:flex-start; }
.hero .groot-knop { padding:14px 22px; font-size:16px; }
.hero-demo { font-size:13px; }
.hero-product { background:var(--card); border:1px solid var(--line); min-width:0; }
.hero-bord .bord-stand { font-size:32px; }
.hero-kolommen { display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:12px; padding:12px; }
.hero-kiezen { display:flex; flex-direction:column; gap:6px; }
.hero-kiezen h3 { margin:0 0 4px; }
.hero-kiezen .strat-knop { cursor:default; min-width:0; }
.hero-taak { position:relative; padding:12px; background:var(--eigen); border:1px solid var(--accent); }
.hero-taak p { margin:0; }
.hero-taak-tekst { margin:6px 0 !important; font-family:var(--lees); font-size:18px; font-weight:600; line-height:1.25; color:var(--text); }
.hero-punten { list-style:none; margin:32px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:12px; }
.hero-punten li { display:flex; flex-direction:column; gap:4px; padding:16px; background:var(--card); border:1px solid var(--line); }
.hero-punten strong { font-size:13px; font-weight:400; letter-spacing:1px; text-transform:uppercase; color:var(--muted); }
.hero-punten span { font-family:var(--lees); color:var(--zacht); font-size:14px; line-height:1.5; }
.hero-voet { margin:24px 0 0; font-size:13px; }
@media (max-width: 800px) {
  .hero-boven, .hero-punten { grid-template-columns:minmax(0, 1fr); }
  .hero-kop br { display:none; }
  .hero .groot-knop { width:100%; text-align:center; }
}

/* Feedbackpagina */
.fb-kop { margin-top:24px; }
.fb-intro { margin:0; }
.fb-form { margin-top:24px; }
.fb-form .veldnaam { display:block; margin:16px 0 8px; }
.fb-soorten { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.fb-soort { cursor:pointer; }
.fb-soort input { position:absolute; opacity:0; pointer-events:none; }
.fb-soort > span { display:flex; flex-direction:column; gap:3px; padding:14px; border:1px solid var(--lijn-sterk); background:var(--bg); }
.fb-soort small { color:var(--muted); font-size:13px; }
.fb-soort:hover > span { border-color:var(--accent); }
.fb-soort input:checked + span { border-color:var(--accent); background:var(--eigen); }
.fb-soort input:focus-visible + span { outline:2px solid var(--accent); outline-offset:2px; }
.fb-form textarea { width:100%; resize:vertical; line-height:1.5; }
.fb-voet { display:flex; justify-content:space-between; gap:12px; margin:8px 0 0; font-size:13px; }
.fb-teller { white-space:nowrap; }
.fb-inloggen { margin-top:24px; padding:16px; border:1px solid var(--line); text-align:center; }
@media (max-width: 480px) { .fb-soorten { grid-template-columns:1fr; } }

/* Mijn teams */
.ov-kop { margin-top:24px; }
.ov-teams { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.ov-team { display:flex; align-items:center; gap:14px; padding:14px 16px; border:1px solid var(--line);
           background:var(--diep); color:var(--text); text-decoration:none; }
.ov-team:hover { border-color:var(--accent); background:var(--eigen); }
.ov-letter { flex:none; object-fit:cover; width:44px; height:44px; display:grid; place-items:center;
             background:var(--eigen); color:var(--accent); font-weight:700; font-size:20px; }
.ov-naam { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; overflow-wrap:anywhere; }
.ov-naam strong { font-size:17px; }
.ov-naam .muted { font-size:13px; }
.ov-pijl { color:var(--muted); font-size:24px; line-height:1; }
.ov-team:hover .ov-pijl { color:var(--accent); }
/* Favoriete team (ster): staat rechtsboven in de kaart, buiten de link */
.ov-teams li { position:relative; }
.ov-teams li .ov-team { padding-right:64px; }
.ov-ster { position:absolute; top:50%; right:14px; transform:translateY(-50%); }
.ov-actief { font-size:12px; color:var(--accent); }
.ov-leeg { display:flex; flex-direction:column; gap:4px; padding:20px; border:1px dashed var(--lijn-sterk); text-align:center; }
.ov-leeg span { color:var(--muted); font-size:14px; }
.ov-acties { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px; }
.ov-kaart { display:flex; flex-direction:column; gap:10px; padding:16px; border:1px solid var(--line); background:var(--diep); }
.ov-kaart h3 { margin:0; color:var(--text); text-transform:none; font-size:16px; letter-spacing:0; }
.ov-kaart p { margin:0; font-size:13px; flex:1; }
.ov-kaart input { width:100%; }
@media (max-width: 560px) { .ov-acties { grid-template-columns:1fr; } }

/* Teamlogo */
.team-logo { flex:none; width:40px; height:40px; object-fit:cover; display:grid; place-items:center;
             background:var(--eigen); color:var(--accent); font-weight:700; font-size:18px; }
.logo-rij { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.logo-groot { width:64px; height:64px; object-fit:cover; display:grid; place-items:center;
              background:var(--eigen); color:var(--accent); font-weight:700; font-size:28px; }
body.demo #logo-beheer { display:none !important; }

.opstelling-rol .link { font-size:13px; }
body.demo .opstelling-rol .link { display:none !important; }

.opslaan-tip { font-size:13px; }
@media (max-width: 560px) { .opslaan-tip { display:none; } }
#sf-concept { margin:12px 0 16px; }
#sf-concept .link { color:var(--text); text-decoration:underline; }

/* Buy per rol: volgt de ronde, of "Specific buy" */
.sf-buy { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; }
.sf-buy-regel { font-size:13px; }
.sf-buy-details { display:flex; flex-direction:column; gap:10px; padding:10px; border:1px solid var(--line); }
.sf-buy-details[hidden] { display:none; }

/* Tegenstander: "vs Team Vitality" naast de map */
.tegenstander { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:14em; }

/* Notitie over een tegenstander */
.tegenstander-notitie { margin:0; padding:8px 10px; border-left:3px solid var(--accent); background:var(--eigen); font-size:14px; white-space:pre-wrap; overflow-wrap:anywhere; }
.tegenstander-tekst { margin:8px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.tegenstanders li { display:block; }
.tegenstander-rij { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.opp-maps { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.opp-maps .btn.aan { border-color:var(--accent); color:var(--accent); }
.opp-kanten { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:12px; }
.opp-blok { display:flex; flex-direction:column; gap:6px; align-items:flex-start; min-width:0; margin-top:12px; }
.opp-blok h4 { margin:0; font-size:14px; }
.opp-blok textarea, .opp-blok ul, .opp-blok > .rij { width:100%; }
.opp-blok p { margin:0; }
.opp-plan-keuze { margin-top:6px; flex-wrap:wrap; }
.opp-plan-keuze select { flex:1; min-width:0; }
.opp-samenvoegen { margin-top:24px; }

/* Wedstrijddag */
.wd-blok { margin:0 0 14px; padding:12px 14px; border:1px solid var(--line); }
.wd-blok h3 { margin:0 0 4px; }
.wd-blok .lijst:empty { display:none; }
#tab-play[data-fase="live"] #wd-blok, #tab-play[data-fase="live"] #play-kaart { display:none; } /* tijdens een game alleen de game en het plan */
.wd-rij { display:flex; align-items:center; gap:10px; flex-wrap:wrap; flex:1; min-width:0; }
.wd-rij-naam { flex-basis:100%; min-width:0; overflow-wrap:anywhere; }
.wd-naam { color:inherit; text-decoration:none; }
.wd-naam:hover { color:var(--accent); }
.wd-map { flex-wrap:wrap; }
.wd-map a.label { text-decoration:none; }
.wd-map.gebanned strong { color:var(--muted); font-weight:400; text-decoration:line-through; }
.label.let-op { color:var(--gevaar); text-decoration:none; }
.wd-veto { display:grid; grid-template-columns:repeat(auto-fit, minmax(92px, 1fr)); gap:6px; }
.wd-stap { display:grid; gap:2px; padding:7px 9px; background:var(--bg); font-size:13px; min-width:0; overflow-wrap:anywhere; }
.wd-stap small { color:var(--muted); font-size:11px; }
.wd-stap.speelt { outline:1px solid var(--accent); outline-offset:-1px; }
.wd-lezen { align-items:center; flex-wrap:wrap; }
.wd-beheer { margin-top:24px; flex-wrap:wrap; }
.wd-form { display:flex; flex-direction:column; gap:6px; }
.wd-form input, .wd-form select, .wd-form textarea { width:100%; }
.wd-form h3 { margin-bottom:0; }
.wd-form .muted { margin:0 0 4px; font-size:13px; }
.wd-veto-velden { display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:8px; margin-bottom:6px; }
.wd-veto-velden label { display:grid; gap:4px; min-width:0; }
#match-opponent:read-only { color:var(--muted); }
.tegenstander-notitie-veld textarea, .tegenstander-nieuw textarea, .tegenstander-nieuw input { width:100%; }
.tegenstander-nieuw { display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.tegenstander-nieuw .btn { align-self:flex-start; }
.tegenstander-strats { list-style:none; margin:4px 0 0; padding:0; display:flex; flex-direction:column; gap:4px; font-size:14px; }
.tegenstander-strats li { display:flex; align-items:center; gap:10px; }
.live-tegenstander { margin:8px 0; padding:8px 12px; border:1px solid var(--line); }
.live-tegenstander > summary { cursor:pointer; }
.live-tegenstander .tegenstander-tekst { padding:8px 10px; border-left:3px solid var(--accent); background:var(--eigen); }

/* Gameplan */
.plan-blok { margin:14px 0; padding:12px 14px; border:1px solid var(--line); }
.plan-blok h3 { margin:0 0 4px; }
.plan-blok > .muted { font-size:13px; margin:0 0 8px; }
.plan-blok select { width:100%; margin-top:8px; }
.plan-kop { display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:4px; }
.plan-kop h3 { margin:0; }
.plan-kaart-kop { display:flex; align-items:center; gap:10px; cursor:pointer; flex-wrap:wrap; }
.plan-kaart-kop .groei { flex:1; min-width:0; overflow-wrap:anywhere; }
details.plan-blok[open] > .plan-kaart-kop { margin-bottom:8px; }
.plan-kaart-acties { margin-top:10px; }
#planmaken #pm-naam-blok { margin:10px 0; }
.plan-nr { min-width:1.6em; }
.plan-blok .lijst li.plan-kant { display:block; padding:12px 0 0; border:0; font-weight:600; }
.plan-blok .lijst li.plan-kant:first-child { padding-top:0; }
.plan-blok .lijst li.plan-vak { display:block; padding:6px 0 0; border:0; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.6px; color:var(--muted); }
.plan-regel { flex-wrap:wrap; }
.plan-taak { flex-basis:100%; margin:0; font-size:14px; overflow-wrap:anywhere; white-space:pre-wrap; }
.plan-maps { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 10px; }
.plan-maps .btn[aria-pressed="true"] { border-color:var(--accent); color:var(--accent); }
.plan-b-knop { font-weight:700; padding:0 4px; }
.plan-b-knop.aan, .plan-b-knop.aan:hover { background:var(--accent); color:var(--bg); text-decoration:none; }
.plan-reden { flex-basis:100%; margin:0; font-size:13px; color:var(--muted); overflow-wrap:anywhere; }
.strat-knop .plan-reden { display:block; }
.plan-reden-veld { flex-basis:100%; min-width:0; padding:6px 10px; font-size:13px; }
.plan-blok .lijst li { padding:6px 0; }
.label.plan { background:var(--accent); color:var(--bg); font-weight:600; }
.strat-knop.in-plan { border-color:var(--accent); }

/* Pop-up: je actieve team heeft een game gestart */
.popup-achtergrond { position:fixed; inset:0; z-index:50; display:grid; place-items:center; padding:16px; background:rgba(0,0,0,.65); }
.popup-achtergrond.hidden { display:none; }
.popup { width:100%; max-width:420px; padding:22px; border:2px solid var(--accent); background:var(--eigen); box-shadow:0 10px 40px rgba(0,0,0,.6); }
.popup h2 { margin:6px 0 4px; font-size:24px; overflow-wrap:anywhere; }
.popup p { margin:0; }
.popup-label { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:13px; }
.popup-knoppen { display:flex; flex-direction:column; align-items:stretch; gap:10px; margin-top:18px; text-align:center; }

/* Rustige notice op de startpagina: site is nog in ontwikkeling */
.dev-notice { margin:0 0 16px; padding:10px 12px; border:1px solid var(--line); border-left:3px solid var(--accent); background:var(--card); font-size:14px; color:var(--muted); }
.dev-notice strong { color:var(--text); }

/* Changelog: maanden en punten klappen open; grote wijzigingen hebben een gekleurde rand */
.cl-knoppen { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:12px 0 4px; }
.cl-filter { color:var(--muted); font-size:14px; cursor:pointer; }
.cl-maand > summary { cursor:pointer; list-style:none; }
.cl-maand > summary h3 { display:inline-block; margin:18px 0 4px; }
.cl-bijgewerkt { color:var(--muted); font-size:13px; margin-left:8px; }
.cl-punt { border:1px solid var(--line); margin:6px 0; padding:0 12px; }
.cl-punt[hidden] { display:none; }
.cl-punt.cl-major { border-left:4px solid var(--accent); }
.cl-punt > summary, .cl-kaal { cursor:pointer; padding:10px 0; line-height:1.4; }
.cl-punt > summary { list-style:none; position:relative; padding-left:18px; }
.cl-punt > summary::-webkit-details-marker { display:none; }
.cl-punt > summary::before { content:"▸"; position:absolute; left:0; top:10px; color:var(--muted); }
.cl-punt[open] > summary::before { content:"▾"; }
.cl-kaal { cursor:default; }
.cl-titel { display:block; color:var(--text); font-weight:600; }
.cl-major .cl-titel { font-size:16px; }
.cl-kort { display:block; color:var(--muted); font-size:14px; margin-top:2px; }
.cl-voor { display:inline-block; margin-left:8px; font-size:11px; font-weight:600; padding:1px 7px;
           background:var(--line); color:var(--muted); vertical-align:1px; }
.cl-uitleg { margin:0 0 12px; }
.cl-uitleg ul { margin:4px 0 0; }
a.nieuw::after { content:""; display:inline-block; width:8px; height:8px; margin-left:5px; border-radius:50%; background:var(--accent); vertical-align:1px; }

/* Live-scherm compact: logo, menu en voetlinks weg (de pijl naar het team staat in de LIVE-regel), kleinere marges */
body.scherm-live .console-main { padding:12px 14px 0; }
body.scherm-live .top, body.scherm-live .voet { display:none; }
#live-terug { white-space:nowrap; margin-right:4px; }
.live-beheer { padding-top:10px; margin-top:12px; }
.live-beheer > h3:first-child { display:none; } /* "Next round" */
.live-beheer h3 { margin:10px 0 6px; font-size:12px; }
.live-beheer .type-rij { margin-top:0; }
.live-beheer .strat-knop { padding:8px 12px; min-width:120px; }
.bericht-rij { margin-top:8px; }
.bericht-rij .veldnaam { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; } /* alleen nog voor schermlezers; het voorbeeld in het veld legt het uit */
body.scherm-live .live-balk { margin:12px -14px 0; padding:8px 14px calc(8px + env(safe-area-inset-bottom, 0px)); }
body.scherm-live .live-balk .btn { padding:12px; }

/* Velden, cijfers en lopende tekst (Command Deck) */
input, select, textarea, button { font-family:inherit; }
input, select, textarea { min-height:44px; }
input[type=checkbox], input[type=radio] { min-height:0; }
textarea, .uitleg, .taak-tekst, .stap-tekst, .bib-tekst, .ronde-notitie-tekst, .tegenstander-tekst, .tegenstander-notitie, .fb-tekst, .plan-reden, .tekst p, .tekst li, .hero-sub, .srij-taak, .cl-uitleg, .live-tegenstander { font-family:var(--lees); }
.uitslag, .rec, .winbalk .pct, .ronde-nr, .plan-nr, .wd-stap small { font-family:var(--cijfer); font-variant-numeric:tabular-nums; }

/* Het haakje linksboven betekent: dit is voor jou, of dit telt nu */
#live-mijn.eigen, .strat-mijn, .start-kaart, .popup { position:relative; border-width:1px; }
#live-mijn.eigen::before, .strat-mijn::before, .start-kaart::before, .popup::before { content:""; position:absolute; top:-1px; left:-1px; width:14px; height:14px;
  border-top:3px solid var(--accent); border-left:3px solid var(--accent); }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }

/* Indeling (Command Deck): links het menu, rechts het scherm. Zonder menu (uitgelogd, live) één kolom. */
.console { display:grid; grid-template-columns:256px minmax(0, 1fr); min-height:100vh; }
body:not(.met-menu):not(.admin-pagina) .console { display:block; }
body:not(.met-menu):not(.admin-pagina) .console-nav { display:none; }
.console-nav { position:sticky; top:0; height:100vh; overflow-y:auto; display:flex; flex-direction:column; gap:20px; padding:24px 16px;
               background:var(--diep); border-right:1px solid var(--line); }
.console-merk { padding:0 8px; display:flex; flex-direction:column; gap:4px; }
.console-merk .logo { font-size:24px; font-weight:700; letter-spacing:.5px; color:var(--text); }
.console-merk .logo span { color:var(--accent); }
.console-sub, .kruimel, .schijf-info, .console-acties { font-family:var(--cijfer); }
.console-sub { font-size:11px; letter-spacing:2px; color:var(--muted); }
.console-menu { display:flex; flex-direction:column; gap:4px; }
body:not(.in-team):not(.admin-pagina) .console-menu { display:none; }
.console-menu a, .console-menu button { min-height:44px; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:0 12px; color:var(--zacht);
  font-size:15px; font-weight:600; letter-spacing:.3px; text-decoration:none; text-align:left; cursor:pointer; background:none; border:0; border-left:2px solid transparent; }
.console-menu a:hover, .console-menu button:hover { background:#161a22; color:var(--text); }
.console-menu a[aria-current="page"], .console-menu button.actief { background:#1b1f28; color:var(--accent); border-left-color:var(--accent); }
.nav-teller { font-family:var(--cijfer); font-size:12px; font-weight:700; padding:1px 7px; background:var(--accent); color:var(--bg); }
.nav-teller.stil { background:var(--line); color:var(--text); }
.nav-teller.alarm { background:var(--gevaar); }
.status { margin-top:auto; padding:12px; border:1px solid var(--line); font-family:var(--cijfer); font-size:12px; color:var(--muted); text-decoration:none; display:flex; flex-direction:column; gap:4px; }
.status strong { color:var(--teal); letter-spacing:1px; }
.status.fout-stand strong { color:var(--gevaar); }
.status.live { background:var(--mis-vlak); border-color:var(--mis-lijn); color:var(--text); }
.status.live strong { color:#ff6b61; }
.console-terug { padding:0 8px; }
.console-main { min-width:0; padding:24px clamp(16px, 3vw, 40px) 40px; }
.console-kop { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.kruimel { font-size:11px; letter-spacing:2px; color:var(--accent); min-height:16px; }
.console-kop h1, .console-kop h2 { margin:2px 0 0; font-size:30px; letter-spacing:.5px; }
.console-acties { display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px; margin:0; font-size:12px; color:var(--muted); }
.console-acties strong { color:var(--text); }

/* Onderaan het zijmenu: wie ben je */
.zij-team { display:flex; align-items:center; gap:10px; padding:0 8px; min-width:0; }
.zij-team strong { font-size:17px; overflow-wrap:anywhere; }
.zij-team .team-logo { width:36px; height:36px; font-size:16px; }
.ik { margin-top:auto; display:flex; flex-direction:column; gap:10px; padding:0 8px; font-size:14px; }
#zij-status:not(.hidden) ~ .ik { margin-top:0; }
.ik-regel { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; }
.ik-regel img { width:28px; height:28px; }
.ik form { margin:0; }
.actief-blok { display:flex; flex-direction:column; align-items:stretch; gap:4px; font-size:12px; }
.actief-blok select { max-width:none; width:100%; min-height:36px; font-size:13px; }

/* Breedte per scherm */
#team, #strat, #strat-form { max-width:1280px; }
#live { max-width:1280px; margin-inline:auto; }
#team:not(.team-beheer) { max-width:760px; }
#overzicht, #wedstrijd, #tegenstander, #planmaken, #wedstrijddag { max-width:900px; }
#demo-keuze { max-width:900px; margin-inline:auto; padding-top:24px; }
main > section > h2:first-of-type { margin-top:2px; font-size:30px; letter-spacing:.5px; }
/* De teruglink bovenaan een scherm is het broodkruimelpad */
main > section > a.link:first-child { font-family:var(--cijfer); font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--accent); }
.console-main > .melding:not(.hidden) { margin:0 0 16px; }
#demo-banner { margin:0 0 16px; }

/* Telefoon: balk bovenaan, de teamknoppen als vast menu onderaan */
@media (max-width: 800px) {
  .console { grid-template-columns:minmax(0, 1fr); }
  .console-nav { position:static; height:auto; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px 12px; padding:10px 16px; border-right:0; border-bottom:1px solid var(--line); }
  .console-merk { flex-direction:row; align-items:baseline; gap:10px; padding:0; }
  .console-merk .logo { font-size:20px; }
  .zij-team { padding:0; margin-left:auto; }
  .zij-team .team-logo { display:none; }
  .zij-team strong { font-size:14px; }
  body.in-team { padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px)); }
  .tabs.console-menu { position:fixed; left:0; right:0; bottom:0; z-index:5; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:0;
                       padding-bottom:env(safe-area-inset-bottom, 0px); background:var(--diep); border-top:1px solid var(--line); }
  body:not(.in-team) .tabs.console-menu { display:none; }
  .tabs.console-menu button { min-height:57px; justify-content:center; border-left:0; border-top:2px solid transparent; }
  .tabs.console-menu button.actief { border-top-color:var(--accent); }
  .status, .status.live { order:5; flex:1 1 100%; margin:0; flex-direction:row; flex-wrap:wrap; gap:2px 12px; padding:8px 10px; }
  .ik { order:6; flex:1 1 100%; flex-direction:row; flex-wrap:wrap; align-items:center; justify-content:space-between; margin:0; padding:0; }
  .actief-blok { flex-direction:row; align-items:center; }
  .actief-blok select { width:auto; max-width:150px; }
  #terug-teams { order:-1; }
  body.in-team .opslaan-balk { bottom:calc(57px + env(safe-area-inset-bottom, 0px)); }
}

#tab-play, #tab-lib, #tab-team, #tab-hist { margin-top:16px; }
.console-acties { display:block; }
.strat-maps { scrollbar-width:none; }
body:not(.in-team) #terug-teams { display:none; }
.console-kop .console-acties { align-self:flex-end; }
@media (max-width: 800px) {
  body.in-team .actief-blok { display:none; }
  .console-kop h2 { font-size:26px; }
}

/* Live: scorebord */
.bord { position:sticky; top:0; z-index:3; display:grid; grid-template-columns:minmax(0, 1fr) auto minmax(0, 1fr); align-items:center; gap:8px 16px;
        margin:-12px -14px 12px; padding:10px 14px; background:var(--diep); border-bottom:1px solid var(--line); }
.bord-links { display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; min-width:0; }
.bord-midden { display:flex; flex-direction:column; align-items:center; gap:6px; }
.bord-stand { font-family:var(--cijfer); font-size:40px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bord-stand .wij { color:var(--teal); }
.bord-tikken { display:flex; gap:2px; width:clamp(190px, 26vw, 320px); }
.bord-tikken i { flex:1; height:6px; background:var(--line); }
.bord-tikken i.w { background:var(--teal); }
.bord-tikken i.l { background:var(--gevaar); }
.bord-tikken i.nu { background:var(--accent); }
.bord-tikken i.rust { margin-right:5px; }
.bord-rechts { display:flex; flex-direction:column; align-items:flex-end; gap:2px; min-width:0; font-family:var(--cijfer); font-size:12px; color:var(--muted); text-align:right; }
#live:not(.live-igl):not(.live-coach) { max-width:760px; }
.live-rechts { display:flex; flex-direction:column; gap:12px; margin-top:12px; }
.live-rechts > * { margin:0; }
.live-rechts .rondes-blok, #live-afspraken { margin:0; }
#live .live-titel { font-size:30px; line-height:1.1; margin:8px 0 0; letter-spacing:.5px; }

/* IGL en coach op een PC: drie kolommen naast elkaar */
@media (min-width: 1100px) {
  #live.live-igl .live-kolommen, #live.live-coach .live-kolommen { display:grid; grid-template-columns:320px minmax(0, 1fr) 320px; gap:0 20px; align-items:start; }
  #live.live-igl .live-links, #live.live-coach .live-links { display:contents; }
  #live .live-beheer { grid-column:1; grid-row:1 / span 8; order:0; margin-top:0; }
  #live .live-links > :not(.live-beheer) { grid-column:2; }
  #live .live-rechts { grid-column:3; grid-row:1 / span 8; margin-top:0; }
  #live .live-beheer .strat-knop { width:100%; }
}
@media (max-width: 800px) {
  .bord { grid-template-columns:minmax(0, 1fr) auto; }
  .bord-links { grid-column:1; grid-row:1; }
  .bord-midden { grid-column:2; grid-row:1 / span 2; align-items:flex-end; }
  .bord-rechts { grid-column:1; grid-row:2; flex-direction:row; flex-wrap:wrap; align-items:center; gap:2px 10px; text-align:left; }
  .bord-stand { font-size:32px; }
  .bord-tikken { width:132px; }
}

/* Strat als tijdlijn: per rol een kolom, per moment in de ronde een regel */
.strat-weergave { display:flex; gap:6px; margin-top:16px; }
.strat-weergave .gekozen { background:#1b1f28; color:var(--accent); border-color:var(--accent); }
.tijdlijn-scroll { overflow-x:auto; margin-top:12px; }
.tijdlijn { display:grid; grid-template-columns:96px repeat(var(--rollen), minmax(150px, 1fr)); gap:1px; background:var(--line); border:1px solid var(--line); min-width:min-content; }
.tijdlijn > div { min-width:0; padding:10px 12px; background:var(--card); font-size:14px; }
.tijdlijn .tl-kop { background:var(--diep); color:var(--muted); display:flex; flex-direction:column; gap:4px; }
.tijdlijn .tl-kop strong { color:var(--text); font-size:15px; }
.tijdlijn .tl-kop.eigen strong { color:var(--accent); }
.tijdlijn .tl-moment { background:var(--diep); }
.tijdlijn .tl-kop .geen-avatar { display:none; }
.strat-kop h2 { font-size:30px; letter-spacing:.5px; }
.tijdlijn .tl-moment .moment { display:block; min-width:0; font-size:13px; overflow-wrap:anywhere; }
.tijdlijn .tl-iedereen { grid-column:2 / -1; }
.tijdlijn .tl-leeg { background:var(--bg); }
.tijdlijn .eigen { background:var(--eigen); }
.tijdlijn .stap-tekst { display:block; margin:0; color:var(--text); }
.tijdlijn .stap-tekst + .stap-tekst { margin-top:8px; }

/* Match readiness: de controlelijst voor de volgende wedstrijd */
.klaar-kop { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.klaar-kop h3 { margin:0; }
.mono-klein { font-family:var(--cijfer); font-size:12px; color:var(--muted); white-space:nowrap; }
.klaar-kop .mono-klein { color:var(--accent); }
.klaar-lijst { list-style:none; margin:0; padding:0; }
.klaar-lijst li { border-top:1px solid var(--line); }
.klaar-rij { display:flex; align-items:center; gap:10px; min-height:40px; color:inherit; text-decoration:none; }
.klaar-rij:hover .groei { color:var(--accent); }
button.klaar-rij { width:100%; padding:0; border:0; background:none; font:inherit; text-align:left; cursor:pointer; }
#tab-play.eerste-keer :is(#match-start, #wd-blok, #play-kaart, #plan-blok) { display:none; }
.klaar-teken { flex:none; width:20px; font-family:var(--cijfer); font-weight:700; text-align:center; }
.klaar-teken.ok { color:var(--teal); }
.klaar-teken.open { color:var(--accent); }

.hero-product .bord { position:static; margin:0; }
#wd-titel, #wd-form-titel { margin-top:2px; font-size:30px; letter-spacing:.5px; }
.btn.herhaal, .play-alle { display:block; }

/* Team stats (History) */
.stats-rol { overflow-x:auto; margin-top:8px; }
.stats-tabel { width:100%; border-collapse:collapse; font-size:14px; }
.stats-tabel th, .stats-tabel td { padding:6px 10px 6px 0; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
.stats-tabel th { font-size:12px; font-weight:600; color:var(--muted); }
.stats-tabel td { font-family:var(--cijfer); font-variant-numeric:tabular-nums; }
.stats-tabel td.tekst { font-family:inherit; }
.stats-tabel td.leeg { color:var(--muted); }
.stats-klap { margin-top:12px; }
.stats-klap summary { cursor:pointer; font-weight:600; }

/* Strats importeren en exporteren */
#strat-bestand .live-menu-lijst { min-width:210px; }
.sb-import-blok { display:flex; flex-direction:column; gap:2px; }
.strat-import { width:min(640px, calc(100vw - 32px)); max-height:calc(100vh - 32px); padding:20px; color:var(--text); background:var(--card); border:1px solid var(--line); }
.strat-import::backdrop { background:rgba(0,0,0,.7); }
.strat-import h3 { margin:0 0 8px; }
.strat-import input[type="file"] { width:100%; margin:8px 0; }
.si-uitleg { margin:8px 0; font-size:14px; }
.si-uitleg summary { cursor:pointer; color:var(--zacht); }
.si-uitleg ul { margin:8px 0 0; padding-left:18px; color:var(--muted); }
.si-uitleg li { margin-bottom:6px; overflow-wrap:anywhere; }
.si-uitleg strong { color:var(--text); }
#si-uitslag { overflow-wrap:anywhere; }
#si-uitslag p { margin:10px 0 0; color:var(--text); }
.si-fouten { color:var(--gevaar); }
ul.si-fouten { margin:6px 0 0; padding-left:18px; font-size:14px; }
.si-knoppen { display:flex; justify-content:flex-end; gap:8px; margin-top:16px; }