/* Qlaim — licht, vriendelijk en speels-competitief.
   Teamkleuren (gevalideerd op lichte ondergrond, ook voor kleurenblinden):
   rood #E84258 · blauw #1899CC · okergeel #BD8020 */
:root{
  /* merk: warm tegelgrijs, inktzwart, merkrood en merkblauw uit het logo */
  --ground:#F2F1ED;
  --card:#FFFFFF;
  --line:#E3E0D8;
  --ink:#2C2C2A;
  --ink-2:#57544D;
  --muted:#8B8779;
  --merk-rood:#E8484B;
  --merk-blauw:#2D7DD2;
  --accent:var(--merk-rood);
  --accent-soft:#FBECEC;
  --goud:#F59E0B;          /* alleen voor kaart-annotaties (grens, klok) */
  --rood:#E84258;          /* teamkleuren blijven los van het merk */
  --blauw:#1899CC;
  --radius:12px;
  --shadow:4px 4px 0 rgba(44,44,42,.08);
  --schaduw-zwaar:6px 6px 0 rgba(44,44,42,.1);
  --sans:system-ui,"Segoe UI",-apple-system,sans-serif;
  /* emaille: crème binnenveld met een rustige inktrand; fel blauw en rood
     zijn er alleen voor vullingen (banderol, actieve knop, handeling) */
  --emaille:#FBF9F3;
  --emaille-rand:#3C4F60;  /* randen: rustige inkt met een blauwe zweem */
  --emaille-lijn:rgba(60,79,96,.16);
  --emaille-lijst:0 3px 10px rgba(44,44,42,.09);
  --bies:inset 0 0 0 1px rgba(255,255,255,.9);
  --glans:linear-gradient(180deg,rgba(255,255,255,.24),rgba(0,0,0,.07));
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;display:flex;flex-direction:column;background:var(--ground);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.5;overflow:hidden;
  -webkit-font-smoothing:antialiased;
}

/* ── topbar ── */
.topbar{
  display:flex;align-items:center;gap:14px;padding:12px 20px;
  background:var(--card);border-bottom:1px solid var(--line);flex:none;
}
.logo-icon{width:38px;height:38px;flex:none;display:block}
.topbar-title{display:flex;flex-direction:column;line-height:1.25}
.topbar-title strong{font-size:1.05rem;font-weight:800}
.topbar-title strong em{font-style:normal;color:#E8484B}
.topbar-title span{font-size:.78rem;color:var(--muted)}
.battle-progress{
  margin-left:auto;display:flex;align-items:center;gap:10px;
  font-size:.8rem;color:var(--ink-2);font-weight:600;
}
.battle-progress .track{
  width:130px;height:8px;border-radius:99px;background:var(--line);overflow:hidden;
}
.battle-progress .fill{height:100%;border-radius:99px;background:var(--goud)}
.battle-switch{
  font-family:var(--sans);font-size:.82rem;font-weight:700;cursor:pointer;
  border:1.5px solid var(--line);background:var(--card);border-radius:8px;
  padding:8px 16px;color:var(--ink);margin-left:6px;
  transition:transform .12s, background .12s, border-color .12s;
}
.battle-switch:hover{transform:rotate(-1deg)}
.battle-switch:hover{border-color:var(--muted)}
.topnav{display:flex;gap:0}
.battle-switch.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.battle-switch.on:hover{border-color:var(--ink)}
.profile-chip{
  display:flex;align-items:center;gap:8px;cursor:pointer;
  border:1.5px solid var(--line);background:var(--card);border-radius:8px;
  padding:5px 14px 5px 6px;font-family:var(--sans);font-size:.84rem;font-weight:600;color:var(--ink);
}
.profile-chip:hover{border-color:var(--muted)}
.profile-chip.leeg{padding:8px 14px;font-weight:700;background:var(--merk-blauw);color:#fff;border-color:var(--merk-blauw)}
.profile-chip .avatar{
  width:26px;height:26px;border-radius:99px;color:#fff;font-size:.72rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}

/* ── live-ticker ── */
.ticker{
  display:flex;align-items:center;gap:0;flex:none;
  background:var(--ink);color:#fff;height:38px;overflow:hidden;
}
.ticker-label{
  flex:none;display:flex;align-items:center;height:100%;padding:0 14px;
  background:var(--rood);color:#fff;font-size:.68rem;font-weight:800;
  letter-spacing:.12em;
}
.ticker-viewport{flex:1;overflow:hidden;height:100%;position:relative}
.ticker-track{
  display:flex;align-items:center;gap:36px;height:100%;width:max-content;
  padding-left:20px;
  animation:ticker-loop var(--ticker-duur,45s) linear infinite;
}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes ticker-loop{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-item{
  display:flex;align-items:center;gap:8px;white-space:nowrap;
  font-size:.8rem;font-weight:600;color:rgba(255,255,255,.92);
}
.ticker-item .dot{width:8px;height:8px;border-radius:3px;flex:none;background:var(--muted)}
.ticker-item.winst{color:var(--gold-tekst,#FFD98A)}
.ticker-item.eigen{
  background:var(--goud);color:#2C2C2A;border-radius:6px;padding:4px 14px;
  font-weight:800;
}
.ticker-item.eigen .dot{background:#2C2C2A}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none;overflow-x:auto}
}

/* ── layout ── */
.layout{flex:1;display:flex;min-height:0}
.sidebar{
  width:340px;flex:none;display:flex;flex-direction:column;gap:14px;
  padding:16px;overflow-y:auto;
}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:16px;
}
.card.grow{flex:1;min-height:150px;display:flex;flex-direction:column}
.card h2{
  margin:0 0 12px;font-size:.86rem;font-weight:800;letter-spacing:0;
  text-transform:none;color:var(--ink);display:flex;align-items:center;gap:9px;
}
.card h2::before{
  content:"";width:5px;height:16px;background:var(--merk-rood);
  border-radius:2px;transform:skewY(-14deg);flex:none;
}

/* ── pontificale battle-banner op de kaart ── */
.kaart-banner{
  position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:5;
  text-align:center;pointer-events:none;max-width:min(92%,720px);
}
.kb-naam{
  font-size:clamp(1.5rem,3.4vw,2.4rem);font-weight:900;letter-spacing:-.02em;
  color:var(--ink);line-height:1.1;
  text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 18px rgba(255,255,255,.9),0 2px 10px rgba(255,255,255,.7);
}
.kb-status{
  display:inline-block;margin-top:8px;font-size:.86rem;font-weight:700;color:var(--ink-2);
  background:rgba(255,255,255,.94);border:1.5px solid var(--line);border-radius:8px;
  padding:6px 16px;box-shadow:var(--shadow);
}
.kb-team{color:var(--team-kleur,var(--ink));font-weight:800}

/* ── scorebord ── */
.leider-label{
  font-size:.64rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--team-kleur);
}
.leider-naam{font-size:1.15rem;font-weight:900;letter-spacing:-.01em}
.leider-tegels{font-size:.8rem;color:var(--ink-2);font-weight:600;font-variant-numeric:tabular-nums}

/* uitslagen */
.uitslag{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin-bottom:12px}
.u-kop b{font-size:.98rem;display:block}
.u-kop span{font-size:.74rem;color:var(--muted);display:block;margin:2px 0 10px}
.u-winnaar{
  display:flex;flex-direction:column;gap:2px;width:100%;cursor:pointer;text-align:left;
  font-family:var(--sans);color:var(--ink);
  background:color-mix(in srgb,var(--team-kleur) 12%,white);
  border:2px solid var(--team-kleur);border-radius:12px;padding:10px 14px;
}
.u-stand{display:flex;flex-direction:column;gap:5px;margin-top:10px;font-size:.8rem;color:var(--ink-2)}
.u-stand .sw{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:7px}

/* ── zoomknoppen + tegel-tooltip ── */
.kaart-zoom{
  position:absolute;right:14px;bottom:64px;z-index:6;
  display:flex;flex-direction:column;gap:6px;
}
.kaart-zoom button{
  width:40px;height:40px;border-radius:8px;border:1.5px solid var(--line);
  background:var(--card);color:var(--ink);font-family:var(--sans);
  font-size:1.25rem;font-weight:700;cursor:pointer;box-shadow:var(--shadow);
  line-height:1;
}
.kaart-zoom button:hover{border-color:var(--muted)}
.kaart-zoom button.reset{font-size:.62rem;font-weight:700;letter-spacing:.04em;color:var(--ink-2)}
.tegel-tip{
  position:absolute;z-index:7;pointer-events:none;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  box-shadow:0 8px 24px rgba(24,34,52,.18);padding:10px 13px;
  font-size:.78rem;min-width:180px;max-width:250px;
}
.tegel-tip .tt-kop{font-weight:800;margin-bottom:6px}
.tegel-tip .tt-rij{
  display:flex;align-items:center;gap:7px;padding:2px 0;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.tegel-tip .tt-rij .sw{width:9px;height:9px;border-radius:3px;flex:none}
.tegel-tip .tt-rij b{color:var(--ink);font-weight:700;margin-left:auto}
.tegel-tip .tt-voorsprong{
  margin-top:6px;padding-top:6px;border-top:1px solid var(--line);
  font-weight:700;color:var(--ink-2);
}

/* ── design C: de battle kleurt drie vaste vakken ── */
.duo-rand{height:5px;flex:none}
.megaduel{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.megaduel .kant{
  flex:1;border:none;background:transparent;cursor:pointer;text-align:left;
  font-family:var(--sans);padding:0;
}
.megaduel .kant b{
  display:block;font-size:1.9rem;font-weight:900;line-height:1;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.megaduel .kant span{font-size:.7rem;font-weight:700;color:var(--ink-2)}
.megaduel .kant.rechts{text-align:right}
.megaduel .kant:hover span{text-decoration:underline}
.megaduel .vs{font-weight:900;color:var(--muted);font-size:.78rem;flex:none}
.duo-balk{display:flex;height:10px;border-radius:5px;overflow:hidden;margin-bottom:14px}

/* ── de stand: klassieke tabel ── */
.stand-kop,.stand-rij{
  display:grid;grid-template-columns:22px 1fr 52px 44px;gap:8px;align-items:center;
}
.stand-kop{
  font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  color:var(--muted);padding:0 6px 6px;border-bottom:1.5px solid var(--line);
}
.stand-kop span:nth-child(3),.stand-kop span:nth-child(4){text-align:right}
.stand-rij{
  width:100%;border:none;background:transparent;cursor:pointer;
  font-family:var(--sans);color:var(--ink);text-align:left;
  padding:8px 6px;border-bottom:1px solid var(--line);font-size:.86rem;
}
.stand-rij:last-child{border-bottom:none}
.stand-rij:hover{background:var(--ground)}
.stand-rij .pos{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums}
.stand-rij .team{display:flex;align-items:center;gap:8px;font-weight:600;min-width:0}
.stand-rij .team .sw{width:10px;height:10px;border-radius:3px;flex:none}
.stand-rij .team em{font-style:normal;font-size:.68rem;color:var(--muted);font-weight:500;margin-left:4px}
.stand-rij .cijfer{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.stand-rij .cijfer.licht{color:var(--muted);font-weight:500}
.stand-rij.top{font-weight:700}
.stand-rij.top .team{font-weight:800}
.stand-voet{
  padding:9px 6px 0;font-size:.74rem;color:var(--muted);
  border-top:1.5px solid var(--line);margin-top:2px;
  font-variant-numeric:tabular-nums;
}

/* ── kaartlagen-keuze ── */
.kaart-lagen{
  position:absolute;top:14px;right:14px;z-index:6;display:flex;gap:0;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  overflow:hidden;box-shadow:var(--shadow);
}
.kaart-lagen button{
  border:none;background:transparent;cursor:pointer;font-family:var(--sans);
  font-size:.74rem;font-weight:600;color:var(--ink-2);padding:7px 12px;
  border-right:1px solid var(--line);
}
.kaart-lagen button:last-child{border-right:none}
.kaart-lagen button:hover{background:var(--ground)}
.kaart-lagen button.on{background:var(--ink);color:#fff}

/* ── teams-pagina ── */
.teams-lijst{
  max-width:760px;margin:0 auto;display:flex;flex-direction:column;
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;
}
.team-rij{
  display:flex;align-items:center;gap:14px;padding:13px 18px;cursor:pointer;
  border:none;border-bottom:1px solid var(--line);background:transparent;
  font-family:var(--sans);color:var(--ink);text-align:left;
}
.team-rij:last-child{border-bottom:none}
.team-rij:hover{background:var(--ground)}
.team-rij .avatar{
  width:38px;height:38px;border-radius:12px;color:#fff;font-weight:800;font-size:.8rem;
  display:flex;align-items:center;justify-content:center;flex:none;
}
.team-rij .tr-info{flex:1;min-width:0}
.team-rij .tr-info b{font-size:.92rem;display:block}
.team-rij .tr-info b em{font-style:normal;font-size:.68rem;color:var(--muted);font-weight:500;margin-left:6px}
.team-rij .tr-info>span{font-size:.74rem;color:var(--muted)}
.team-rij .tr-stat{width:86px;text-align:right;flex:none}
.team-rij .tr-stat b{display:block;font-variant-numeric:tabular-nums}
.team-rij .tr-stat span{font-size:.62rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}

/* ── losse pagina's: profiel, hoe werkt het, uitslagen ── */
.pagina-smal{
  max-width:600px;margin:0 auto;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:30px 34px;text-align:left;
}
.pagina-smal label{
  display:block;font-size:.78rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin:20px 0 8px;
}
.hoe-inhoud h1{margin:0 0 6px;font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
.hoe-inhoud h2{margin:22px 0 6px;font-size:1.02rem;font-weight:800}
.hoe-inhoud p{margin:0;color:var(--ink-2);line-height:1.65}
.uitslagen-kolom{max-width:600px;margin:0 auto;display:flex;flex-direction:column}
.uitslagen-kolom .uitslag{background:var(--card);box-shadow:var(--shadow)}
.kaart-bron{
  position:absolute;right:10px;bottom:10px;z-index:5;
  font-size:.62rem;color:var(--muted);background:rgba(255,255,255,.88);
  padding:3px 9px;border-radius:6px;
}
button.me-head{
  border:none;background:transparent;cursor:pointer;width:100%;
  font-family:var(--sans);color:var(--ink);text-align:left;padding:0;
}
button.me-head:hover .naam{text-decoration:underline}
.me-stats.twee{grid-template-columns:repeat(2,1fr)}

/* meedoen-callout */
.card.callout{border:2px solid var(--merk-rood);background:var(--accent-soft)}
.card.callout .hint{margin:0 0 12px;font-size:.82rem;color:var(--ink-2)}
.team-pick.compact .team-opt{padding:9px 12px;font-size:.85rem}

/* jouw bijdrage */
.me-head{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.me-teams{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.me-teams .chip{
  display:inline-flex;align-items:center;gap:6px;font-size:.72rem;font-weight:600;
  color:var(--ink-2);background:var(--ground);border-radius:6px;padding:4px 11px;
}
.me-teams .chip .sw{width:8px;height:8px;border-radius:3px}
.me-teams .chip.telling{background:transparent;border:1.5px solid var(--line);color:var(--muted)}
.chip-x{
  border:none;background:transparent;cursor:pointer;color:var(--muted);
  font-size:.68rem;padding:0 0 0 2px;line-height:1;
}
.chip-x:hover{color:var(--rood)}
.me-head .avatar{
  width:38px;height:38px;border-radius:99px;color:#fff;font-weight:800;
  display:flex;align-items:center;justify-content:center;
}
.me-head .naam{font-weight:700}
.me-head .team{font-size:.78rem;color:var(--muted)}
.me-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}
.me-stats .st{
  background:var(--ground);border-radius:12px;padding:9px 6px;text-align:center;
}
.me-stats .st b{display:block;font-size:1.05rem;font-variant-numeric:tabular-nums}
.me-stats .st span{font-size:.66rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.strava-link{
  display:block;margin-top:10px;font-size:.78rem;color:var(--ink-2);text-decoration:none;
}
.strava-link:hover{color:var(--ink);text-decoration:underline}

/* knoppen */
.btn{
  font-family:var(--sans);font-size:.9rem;font-weight:700;cursor:pointer;
  padding:11px 18px;border:none;border-radius:8px;width:100%;
  background:var(--ink);color:#fff;box-shadow:var(--shadow);
  transition:transform .12s, box-shadow .12s, filter .15s;
}
.btn:hover{filter:brightness(1.08);transform:translate(-1px,-1px) rotate(-.5deg);box-shadow:var(--schaduw-zwaar)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(44,44,42,.1)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn small{font-weight:500;opacity:.75;font-size:.72rem;margin-left:4px}
.btn.primary{background:var(--team-kleur,var(--merk-blauw))}
.btn.big{font-size:1rem;padding:14px 22px}
.btn.ghost{
  background:var(--card);color:var(--ink-2);border:1.5px solid var(--line);
  font-weight:600;font-size:.8rem;padding:8px 14px;box-shadow:none;
}
.btn.ghost:hover{color:var(--ink);border-color:var(--muted);filter:none;box-shadow:var(--shadow)}

/* communitypagina */
.cp-kop{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.cp-avatar{width:52px;height:52px;border-radius:16px;font-size:1.1rem;font-weight:900;color:#fff;display:flex;align-items:center;justify-content:center;flex:none}
.cp-kop h1{margin:0;font-size:1.3rem}
.cp-meta{margin:2px 0 0;font-size:.78rem;color:var(--muted)}
.cp-kreet{margin:0 0 16px;font-size:.95rem;color:var(--ink-2);font-style:italic}
.cp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:18px}
.cp-stats .st{background:var(--ground);border-radius:12px;padding:10px 8px;text-align:center}
.cp-stats .st b{display:block;font-size:1.05rem;font-variant-numeric:tabular-nums}
.cp-stats .st span{font-size:.64rem;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.cp-stats .st.groen b{color:#2E9E62}
.cp-stats .st.rood b{color:var(--rood)}
.cp-top{display:flex;flex-direction:column;margin-bottom:6px}
.cp-top-rij{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line)}
.cp-top-rij:last-child{border-bottom:none}
.cp-top-rij .pos{width:20px;text-align:center;font-weight:700;color:var(--muted);font-size:.8rem}
.cp-top-rij .nm{flex:1;font-weight:600;font-size:.88rem}
.cp-top-rij .val{font-size:.78rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.cp-actie{margin-top:16px}
.cp-mini{font-style:normal;font-size:.64rem;color:var(--muted);font-weight:600;margin-left:6px}
button.board-row{
  width:100%;border:none;background:transparent;cursor:pointer;
  font-family:var(--sans);color:var(--ink);text-align:left;
}
button.board-row:hover{background:var(--ground);border-radius:10px}

/* ranglijst-tabs */
.rank-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.rank-tab{
  font-family:var(--sans);font-size:.72rem;font-weight:700;cursor:pointer;
  padding:5px 11px;border:1.5px solid var(--line);border-radius:99px;
  background:var(--card);color:var(--muted);
}
.rank-tab:hover{border-color:var(--muted)}
.rank-tab.on{border-color:var(--accent);color:var(--ink);background:var(--accent-soft)}
.board-row .val small{color:var(--muted);font-weight:500}

/* ranglijst */
.board-row{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.board-row:last-child{border-bottom:none}
.board-row .pos{font-size:.9rem;width:22px;text-align:center}
.board-row .sw{width:12px;height:12px;border-radius:4px;flex:none}
.board-row .nm{flex:1;font-size:.88rem;font-weight:600;line-height:1.3}
.board-row .nm .sub{font-size:.72rem;color:var(--muted);font-weight:500;display:block}
.board-row .val{font-size:.82rem;font-weight:700;font-variant-numeric:tabular-nums}

/* feed */
.feed{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:8px}
.feed .f{
  font-size:.82rem;color:var(--ink-2);padding:9px 12px;background:var(--ground);
  border-radius:12px;line-height:1.45;
}
.feed .f.flip{background:var(--accent-soft)}
.feed .f time{font-size:.68rem;color:var(--muted);display:block;margin-top:2px}

/* demo-tools */
.demo-tools{
  border:1.5px solid var(--line);border-radius:var(--radius);padding:10px 14px;
  font-size:.8rem;color:var(--muted);background:var(--card);
}
.demo-tools summary{cursor:pointer;font-weight:600}
.demo-tools[open]{background:var(--card)}
.sim-btns{display:flex;flex-direction:column;gap:8px;margin:12px 0 8px}
.sim-btns .btn{
  background:var(--card);color:var(--ink);border:1.5px solid var(--line);
  font-size:.8rem;font-weight:600;text-align:left;border-radius:12px;padding:9px 12px;
}
.sim-btns .btn:hover{border-color:var(--muted);filter:none}
.sim-btns .btn .x10{float:right;color:var(--muted);font-weight:700}

footer{
  display:flex;flex-direction:column;gap:4px;padding:0 4px;
  font-size:.7rem;color:var(--muted);
}
.strava-merk{
  font-size:.68rem;font-weight:700;color:#FC5200;letter-spacing:.02em;
  margin:8px 0 0;
}

/* ── kaart ── */
.map-wrap{flex:1;position:relative;background:#E9EEF5;border-radius:var(--radius) 0 0 0;overflow:hidden}
#map,#fallback{position:absolute;inset:0;width:100%;height:100%}
.legend{
  position:absolute;bottom:14px;left:14px;z-index:5;display:flex;gap:14px;
  background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:99px;
  padding:8px 16px;font-size:.78rem;color:var(--ink-2);font-weight:600;
  box-shadow:var(--shadow);
}
.legend em{font-style:normal;display:flex;gap:6px;align-items:center}
.legend .gebied-l{color:#B47A0D}
.legend .sw{width:10px;height:10px;border-radius:3px;display:inline-block}
.toast{
  position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;
  background:var(--ink);color:#fff;border-radius:8px;
  font-size:.84rem;font-weight:600;padding:10px 20px;
  box-shadow:var(--schaduw-zwaar);transition:opacity .3s;
  max-width:min(90%,560px);text-align:center;
}

/* ── welkomst-wizard ── */
.wizard::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:url(tegelslag-icon.svg) center/66vmin no-repeat;
  opacity:.12;transform:rotate(-8deg);
}
.wiz-logo{width:min(300px,72%);display:block;margin:2px auto 20px}
.wiz-card{max-width:560px;text-align:center}
.wiz-card h1{margin:0 0 10px;font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
.wiz-lead{font-weight:700;color:var(--ink);margin:0 0 6px}
.wiz-stap>p{color:var(--ink-2);margin:0 0 18px;line-height:1.6}
.wiz-stap .btn.big{margin-top:14px}
.hoe-lijst{display:flex;flex-direction:column;gap:14px;text-align:left;margin:18px 0 6px}
.hoe-item{display:flex;gap:14px;align-items:flex-start}
.hoe-nr{
  flex:none;width:30px;height:30px;border-radius:6px;
  background:var(--merk-blauw);color:#fff;transform:rotate(8deg);
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.9rem;
}
.hoe-tekst{flex:1}
.hoe-tekst b{font-size:.95rem}
.info-i{
  width:20px;height:20px;border-radius:99px;border:1.5px solid var(--line);
  background:var(--card);color:var(--muted);font-size:.68rem;font-weight:800;
  cursor:pointer;font-style:italic;font-family:Georgia,serif;vertical-align:2px;margin-left:4px;
}
.info-i:hover{border-color:var(--accent);color:var(--accent)}
.uitleg{
  margin:8px 0 0;font-size:.82rem;color:var(--ink-2);background:var(--ground);
  border-radius:10px;padding:9px 12px;line-height:1.5;
}
.wiz-card label{text-align:left}
.wiz-battles{display:flex;flex-direction:column;gap:12px;margin:4px 0 12px;max-height:330px;overflow-y:auto;padding-right:2px}
.wiz-battle{
  border:1.5px solid var(--line);border-radius:14px;overflow:hidden;text-align:left;
}
.wiz-battle .kop{display:flex;align-items:center;gap:10px;padding:10px 12px}
.wiz-battle canvas{width:64px;height:44px;border-radius:8px;background:#E9EEF5;flex:none}
.wiz-battle .kop b{font-size:.88rem;display:block;line-height:1.3}
.wiz-battle .kop .sub{font-size:.7rem;color:var(--muted)}
.wiz-teams{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 12px}
.wiz-team{
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;
  border:1.5px solid var(--line);border-radius:6px;padding:5px 12px;
  background:var(--card);font-family:var(--sans);font-size:.76rem;font-weight:600;color:var(--ink);
  transition:transform .12s, border-color .12s, background .12s;
}
.wiz-team:hover{transform:rotate(-1.2deg)}
.wiz-team .sw{width:8px;height:8px;border-radius:3px}
.wiz-team:hover{border-color:var(--muted)}
.wiz-team.gekozen{border-color:var(--team-kleur);background:color-mix(in srgb,var(--team-kleur) 10%,white)}

/* ── battle-verkenner (startscherm) ── */
.paginas{position:relative;flex:1;display:flex;min-height:0}
.verkenner{
  position:absolute;inset:0;z-index:20;overflow-y:auto;
  background:var(--ground);padding:32px 28px 90px;
}
.verkenner::before{
  content:"";position:fixed;inset:0;pointer-events:none;
  background:url(tegelslag-icon.svg) right -120px top -90px/460px no-repeat;
  opacity:.06;
}
.vk-zoek{max-width:560px;margin:0 auto 6px}
.vk-zoek input{
  padding:13px 18px;border:1.5px solid var(--line);border-radius:14px;
  font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--card);
}
.vk-zoek input:focus{outline:none;border-color:var(--blauw)}
.vk-zoek select{
  border:1.5px solid var(--line);border-radius:14px;background:var(--card);
  font-family:var(--sans);font-size:.9rem;color:var(--ink);padding:0 14px;
}
.vk-teams{padding:0 16px 16px}
.wiz-team.gekozen::before{content:"✓ ";font-weight:800}
.verkenner-kop{max-width:1100px;margin:0 auto 26px;text-align:center}
.verkenner-kop h1{margin:0 0 8px;font-size:clamp(1.6rem,4vw,2.2rem);font-weight:800;letter-spacing:-.02em}
.verkenner-kop p{margin:0 auto 14px;color:var(--ink-2);max-width:52ch}
.verkenner-kop .btn.ghost{width:auto;padding:8px 18px}
.verkenner-grid{
  max-width:1100px;margin:0 auto;display:grid;gap:20px;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.vk-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);overflow:hidden;cursor:pointer;padding:0;
  font-family:var(--sans);text-align:left;color:var(--ink);
  transition:transform .15s, box-shadow .15s;
  display:flex;flex-direction:column;
}
.vk-card:hover{transform:translateY(-3px) rotate(-.6deg);box-shadow:var(--schaduw-zwaar)}
.vk-card:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.vk-card canvas{width:100%;aspect-ratio:16/9;display:block;background:#E9EEF5}
.vk-info{padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}
.vk-titel{display:flex;align-items:center;gap:8px;font-weight:800;font-size:.98rem;flex-wrap:wrap}
.vk-titel .badge{
  font-size:.58rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  background:var(--accent);color:#fff;border-radius:99px;padding:2px 8px;
}
.vk-titel .badge.ugc{background:var(--muted)}
.vk-titel .vuur{
  font-size:.64rem;font-weight:800;color:#C2410C;background:#FFEDD5;
  border-radius:99px;padding:2px 9px;
}
.vk-stand{display:flex;flex-direction:column;gap:5px}
.vk-balk{display:flex;height:9px;border-radius:99px;overflow:hidden;gap:2px}
.vk-namen{display:flex;justify-content:space-between;font-size:.72rem;font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.vk-sub{font-size:.72rem;color:var(--muted)}

/* ── onboarding ── */
.onboard{
  position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(24,34,52,.35);backdrop-filter:blur(3px);padding:20px;
}
[hidden]{display:none!important} /* wint van display-regels op .onboard/.profile-chip */
.onboard-card{
  background:var(--card);border-radius:22px;box-shadow:0 20px 60px rgba(24,34,52,.25);
  padding:32px;max-width:440px;width:100%;max-height:90vh;overflow-y:auto;
}
.onboard-card h1{margin:0 0 8px;font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
.onboard-card>p{margin:0 0 20px;color:var(--ink-2)}
.onboard-card label{
  display:block;font-size:.78rem;font-weight:700;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin:16px 0 8px;
}
.onboard-card input,.onboard-card select{
  width:100%;padding:12px 16px;border:1.5px solid var(--line);border-radius:12px;
  font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--ground);
}
.onboard-card input:focus,.onboard-card select:focus{outline:none;border-color:var(--blauw)}
.zoek-rij{display:flex;gap:8px;margin-bottom:12px}
.zoek-rij input{flex:1;min-width:0}
.zoek-rij select{width:auto;max-width:46%}
.team-pick{display:flex;flex-direction:column;gap:8px;margin-bottom:20px;max-height:280px;overflow-y:auto;padding-right:2px}
.zoek-leeg{font-size:.82rem;color:var(--muted);padding:10px 2px}
.team-opt{
  display:flex;align-items:center;gap:12px;padding:12px 14px;cursor:pointer;
  border:2px solid var(--line);border-radius:14px;background:var(--card);
  font-family:var(--sans);font-size:.92rem;font-weight:600;color:var(--ink);text-align:left;
  transition:border-color .15s, background .15s;
}
.team-opt:hover{border-color:var(--muted)}
.team-opt.gekozen{border-color:var(--team-kleur);background:color-mix(in srgb, var(--team-kleur) 7%, white)}
.team-opt .sw{width:16px;height:16px;border-radius:6px;flex:none}
.team-opt .cat{margin-left:auto;font-size:.72rem;color:var(--muted);font-weight:500}
.team-opt.besloten{opacity:.6}
.wiz-team.besloten{opacity:.6}

/* meldingen (uitnodigingen) en beheer */
.melding-stip{
  display:inline-block;width:9px;height:9px;border-radius:99px;
  background:var(--merk-rood);margin-left:7px;vertical-align:middle;
}
.melding-rij{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--card);font-size:.84rem;margin-bottom:8px;
}
.melding-acties{display:flex;gap:6px;flex:none}
.mini-knop{
  font-family:var(--sans);font-size:.72rem;font-weight:700;cursor:pointer;
  padding:5px 12px;border:none;border-radius:6px;
  background:var(--merk-blauw);color:#fff;box-shadow:var(--shadow);
}
.mini-knop.grijs{background:var(--card);color:var(--ink-2);border:1.5px solid var(--line);box-shadow:none}
.mini-knop:hover{filter:brightness(1.08)}
.cp-beheer-rij{display:flex;gap:8px;align-items:stretch;padding:10px 12px}
.cp-beheer-rij select{
  flex:1;min-width:0;padding:8px 12px;border:1.5px solid var(--line);border-radius:8px;
  font-family:var(--sans);font-size:.86rem;color:var(--ink);background:var(--ground);
}
.cp-beheer-rij .btn{width:auto;flex:none;margin:0!important;padding:8px 16px}

/* uitnodigingslink op de teampagina */
.invite-rij{display:flex;gap:8px;align-items:stretch}
.invite-rij input{flex:1;min-width:0;font-size:.8rem;color:var(--ink-2)}
.onboard-card .invite-rij .btn{margin-top:0;width:auto;flex:none;padding:10px 16px}
.cp-besloten{margin:10px 0 0;font-size:.8rem;color:var(--muted);line-height:1.5}

/* modals: sluiten, kleurkeuze, battle-lijst */
.onboard-card{position:relative}
.modal-close{
  position:absolute;top:14px;right:14px;width:32px;height:32px;border-radius:99px;
  border:none;background:var(--ground);color:var(--muted);cursor:pointer;
  font-size:.9rem;font-weight:700;
}
.modal-close:hover{background:var(--line);color:var(--ink)}
/* rustige verticale maat in modals: knoppen nooit tegen het veld erboven */
.onboard-card .btn{margin-top:18px}
.onboard-card .btn+.btn{margin-top:10px}
.onboard-card .team-pick{margin-bottom:4px}
.veld-hint{margin:10px 0 0;font-size:.78rem;color:var(--muted);line-height:1.5}
.swatches{display:flex;gap:8px;flex-wrap:wrap;padding:2px 0 4px}
.swatch-opt{
  width:34px;height:34px;border-radius:12px;cursor:pointer;border:3px solid transparent;
  transition:transform .1s, border-color .15s;
}
.swatch-opt:hover{transform:scale(1.1)}
.swatch-opt.gekozen{border-color:var(--ink)}
.check-row{
  display:flex!important;align-items:center;gap:10px;cursor:pointer;
  text-transform:none!important;letter-spacing:0!important;
  font-size:.86rem!important;font-weight:600!important;color:var(--ink-2)!important;
  margin:18px 0 2px!important;
}
.check-row input{width:auto!important;accent-color:var(--accent)}
input:disabled{opacity:.45}

/* ══ EMAILLE ══════════════════════════════════════════════════════════
   Elk paneel is een bordje: crème binnenveld, blauwe lijst met een wit
   biesje, donkere buitenlijn en boutjes in de hoeken. Blauw is altijd
   omlijsting, rood is altijd handeling. De kaart en alle overlays daarin
   blijven onaangeroerd: die waren al goed.
   Dikke lijst (5 px) voor hoofdpanelen, dunne (2 tot 3 px) voor kleine
   elementen, zodat er hiërarchie in de omlijsting zit.                    */

/* ── 1. hoofdpanelen ── */
.card,.teams-lijst,.pagina-smal,.uitslagen-kolom .uitslag,.vk-card{
  background:var(--emaille);
  border:2px solid var(--emaille-rand);
  border-radius:12px;
  box-shadow:var(--emaille-lijst);
  position:relative;
  overflow:hidden;
}
/* Let op: overflow op een flex-item betekent dat het wél kleiner mag worden
   dan zijn inhoud. Zonder flex:none knippen de zijbalkkaarten hun onderste
   rijen af in plaats van de zijbalk te laten scrollen. */
.card{flex:none}
/* geen scrollgebied binnen een scrollgebied: in de zijbalk mag de teamlijst
   gewoon uitgroeien, de zijbalk zelf scrollt al */
.card .team-pick{max-height:none;overflow:visible}
/* de boutjes: twee puntjes onderin, volstrekt overbodig en juist daarom goed */
.card::after,.vk-card::after,.teams-lijst::after,.pagina-smal::after{
  content:"";position:absolute;left:6px;bottom:6px;width:5px;height:5px;
  border-radius:50%;background:var(--emaille-rand);opacity:.3;
  pointer-events:none;z-index:2;
}
.card::before,.teams-lijst::before,.pagina-smal::before{
  content:"";position:absolute;right:6px;bottom:6px;width:5px;height:5px;
  border-radius:50%;background:var(--emaille-rand);opacity:.3;
  pointer-events:none;z-index:2;
}

/* de kop is een banderol over de volle breedte, niet een regel tekst */
.card h2{
  margin:-16px -16px 14px;padding:10px 16px;
  background-color:var(--merk-blauw);background-image:var(--glans);color:#fff;
  box-shadow:var(--bies);
  text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;font-weight:800;
}
.card h2::before{background:#fff;opacity:.9}
.card.callout{border-color:var(--merk-rood);background:#FDF7F4}
.card.callout h2{background-color:var(--merk-rood);background-image:var(--glans)}
.card.callout::before,.card.callout::after{background:#B33033}

/* ── 2. handelingen: rode plaquette met wit biesje ── */
.btn{border-radius:10px}
.btn.primary{
  background-color:var(--team-kleur,var(--merk-rood));background-image:var(--glans);
  box-shadow:var(--bies),0 0 0 1.5px rgba(0,0,0,.22);
  text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;
}
.btn.primary.big{font-size:.9rem;letter-spacing:.1em}
.btn.primary:hover,.btn.primary:focus-visible{
  transform:translateY(-1px) rotate(0deg);filter:brightness(1.06);
  box-shadow:var(--bies),0 0 0 1.5px rgba(0,0,0,.22),0 5px 12px rgba(44,44,42,.2);
}
.btn.primary:active{transform:translateY(1px);filter:brightness(.97)}
.btn.ghost{
  background:var(--emaille);color:var(--emaille-rand);
  border:1.5px solid var(--emaille-rand);border-radius:10px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);font-weight:700;
}
.btn.ghost:hover,.btn.ghost:focus-visible{
  transform:none;filter:none;color:var(--ink);
  border-color:var(--ink);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);
}
.mini-knop{
  background-color:var(--merk-blauw);background-image:var(--glans);border-radius:7px;
  box-shadow:var(--bies),0 0 0 1px rgba(0,0,0,.18);
  text-transform:uppercase;letter-spacing:.06em;font-size:.66rem;
}
.mini-knop.grijs{
  background:var(--emaille);color:var(--emaille-rand);
  border:1.5px solid var(--emaille-rand);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);
}
.profile-chip{border:1.5px solid var(--emaille-rand);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
.profile-chip:hover{border-color:var(--ink)}
.profile-chip.leeg{
  background-color:var(--merk-rood);background-image:var(--glans);border-color:#B33033;color:#fff;
  box-shadow:var(--bies);text-transform:uppercase;letter-spacing:.06em;font-size:.74rem;
}

/* ── 3. navigatie als rij bordjes ── */
.topbar{border-bottom:2px solid var(--emaille-rand)}
.battle-switch{
  border:1.5px solid var(--emaille-rand);border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);color:var(--emaille-rand);
}
.battle-switch:hover{transform:none;border-color:var(--ink)}
.battle-switch.on{
  background-color:var(--merk-blauw);background-image:var(--glans);color:#fff;border-color:var(--emaille-rand);
  box-shadow:var(--bies);
}
.battle-switch.on:hover{border-color:var(--emaille-rand)}

/* ── 4. velden krijgen dezelfde lijst, dus ze horen bij de panelen ── */
.onboard-card input,.onboard-card select,
.vk-zoek input,.vk-zoek select,#vkNaamVeld input,
.cp-beheer-rij select,.invite-rij input{
  background:var(--emaille);border:2px solid var(--emaille-rand);border-radius:10px;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.9);
}
.onboard-card input:focus,.onboard-card select:focus,
.vk-zoek input:focus,.vk-zoek select:focus,#vkNaamVeld input:focus,
.cp-beheer-rij select:focus,.invite-rij input:focus{
  outline:2px solid var(--merk-rood);outline-offset:1px;border-color:var(--ink);
}

/* ── 5. de stand: blauwgetinte scheidingen in plaats van grijze ── */
.stand-kop{border-bottom:1.5px solid var(--emaille-lijn);color:var(--muted)}
.stand-rij{border-bottom:1px solid var(--emaille-lijn)}
.stand-rij:hover{background:rgba(45,125,210,.06)}
.stand-voet{border-top:2px solid var(--emaille-lijn)}
.team-rij{border-bottom:1px solid var(--emaille-lijn)}
.team-rij:hover{background:rgba(45,125,210,.06)}
.me-stats .st,.cp-stats .st{
  background:var(--emaille);box-shadow:inset 0 0 0 1.5px var(--emaille-lijn);
}
.pagina-smal label,.onboard-card label{color:var(--emaille-rand)}

/* ── 6. kleine bordjes: chips, teamkeuzes, meldingen ── */
.team-opt,.wiz-team,.melding-rij,.me-teams .chip{
  background:var(--emaille);border:1.5px solid var(--emaille-rand);border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);
}
.me-teams .chip{color:var(--emaille-rand)}
.me-teams .chip.telling{border-color:var(--emaille-lijn);color:var(--muted)}
.team-opt:hover,.wiz-team:hover{border-color:var(--ink)}
.wiz-team:hover{transform:none}
.team-opt.gekozen,.wiz-team.gekozen{
  border-color:var(--team-kleur);background:color-mix(in srgb,var(--team-kleur) 10%,var(--emaille));
}
.demo-tools{
  background:var(--emaille);border:2.5px solid var(--emaille-lijn);border-radius:12px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);
}
.demo-tools[open]{background:var(--emaille)}
.sim-btns .btn{
  background:var(--emaille);border:2px solid var(--emaille-lijn);border-radius:9px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);text-transform:none;letter-spacing:0;
}
.sim-btns .btn:hover{border-color:var(--emaille-rand);transform:none}

/* ── 7. battlekaartjes: de minikaart hangt verzonken in de lijst ── */
.vk-card{cursor:pointer}
.vk-card::before{
  /* dekt precies het canvas, zodat het plaatje achter het emaille lijkt te zitten */
  content:"";position:absolute;left:0;top:0;width:100%;aspect-ratio:16/9;
  box-shadow:inset 0 3px 9px rgba(60,79,96,.2);
  pointer-events:none;z-index:1;
}
.vk-card canvas{border-bottom:1.5px solid var(--emaille-rand)}
.vk-card:hover{
  transform:translateY(-3px) rotate(0deg);
  box-shadow:0 8px 18px rgba(44,44,42,.16);
}
.vk-info{background:var(--emaille)}
.vk-titel .badge{
  border-radius:5px;box-shadow:var(--bies),0 0 0 1px rgba(0,0,0,.2);padding:2px 8px;
}
.vk-titel .badge.ugc{background:var(--emaille-rand)}
.vk-titel .vuur{
  border-radius:5px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85),0 0 0 1px rgba(194,65,12,.4);
}
.verkenner-kop h1{color:var(--ink)}

/* ── 8. modals krijgen dezelfde lijst, zonder banderol ── */
.onboard-card{
  background:var(--emaille);border:2px solid var(--emaille-rand);border-radius:16px;
  box-shadow:0 20px 50px rgba(24,34,52,.3);
}
.modal-close{
  background:var(--emaille);border:1.5px solid var(--emaille-rand);color:var(--emaille-rand);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);
}
.modal-close:hover{background:var(--emaille-rand);color:#fff}

/* ── 9. de laatste hoeken: alles wat nog een grijze rand had ── */
.u-winnaar{box-shadow:var(--bies),0 0 0 1px rgba(0,0,0,.12)}
.cp-top{
  background:var(--emaille);border-radius:10px;padding:2px 11px;
  box-shadow:inset 0 0 0 1.5px var(--emaille-lijn);
}
.cp-top-rij{border-bottom-color:var(--emaille-lijn)}
.toast{border-radius:9px;box-shadow:var(--bies),0 6px 16px rgba(44,44,42,.3)}
.info-i{
  background:var(--emaille);border:1.5px solid var(--emaille-rand);color:var(--emaille-rand);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);
}
.info-i:hover{border-color:var(--ink);color:var(--ink)}
.uitleg{
  background:var(--emaille);border-radius:10px;
  box-shadow:inset 0 0 0 1.5px var(--emaille-lijn);
}
.hoe-nr{box-shadow:var(--bies)}
.strava-link{
  display:inline-block;background:var(--emaille);color:var(--emaille-rand);
  border:1.5px solid var(--emaille-rand);border-radius:10px;padding:8px 14px;
  font-weight:700;box-shadow:inset 0 0 0 1px rgba(255,255,255,.9);
}
.strava-link:hover{
  color:var(--ink);border-color:var(--ink);text-decoration:none;
}
.swatch-opt.gekozen{
  border-color:var(--emaille-rand);box-shadow:inset 0 0 0 2px rgba(255,255,255,.9);
}
.check-row input{accent-color:var(--merk-rood)}
/* inloggen naast "Maak een account": rustig, want registreren is de uitnodiging */
.inlog-knop{
  font-family:var(--sans);font-size:.82rem;font-weight:700;cursor:pointer;
  background:none;border:0;padding:6px 4px;color:var(--emaille-rand);
  text-decoration:underline;flex:none;
}
.inlog-knop:hover{color:var(--ink)}

/* tekstlink in lopende tekst (privacyverklaring) */
.tekstlink{
  border:0;background:none;padding:0;cursor:pointer;font-family:var(--sans);
  font-size:inherit;color:var(--merk-blauw);text-decoration:underline;font-weight:600;
}
.tekstlink:hover{color:var(--emaille-rand)}
/* een knop die iets onomkeerbaars doet, blijft rustig maar wel rood */
.btn.ghost.gevaar{color:var(--merk-rood);border-color:var(--merk-rood)}
.btn.ghost.gevaar:hover{color:#fff;background:var(--merk-rood);border-color:#B33033}

/* ── mobiel eerst: telefoon is het hoofdtoneel ── */
@media (max-width:960px){
  .topbar{flex-wrap:wrap;row-gap:8px}
  .battle-progress{display:none}
}
@media (max-width:760px){
  /* topbar: één regel merk + profiel, daaronder de navigatie als veegbalk */
  .topbar{padding:10px 12px;gap:10px;row-gap:8px}
  .topbar-title span{display:none} /* battlenaam staat al groot op de kaart */
  .logo-icon{width:32px;height:32px}
  .profile-chip{margin-left:auto}
  .topnav{
    order:3;width:100%;display:flex;gap:6px;
    overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .topnav::-webkit-scrollbar{display:none}
  .battle-switch{margin-left:0;flex:none;padding:8px 13px;font-size:.78rem}
  /* inloggen en registreren moeten samen op één regel passen naast het merk */
  .inlog-knop{font-size:.76rem;padding:6px 2px}
  .profile-chip.leeg{padding:7px 11px;font-size:.76rem}
  .profile-chip.leeg::after{content:""}

  /* Kaart boven, stand en de rest eronder. Het contentgebied scrollt zelf,
     zodat topbalk en ticker altijd blijven staan. Bewust met order en niet
     met column-reverse: bij reverse loopt overflow omhoog en verdwijnt de
     kaart boven de bovenrand. */
  .layout{flex-direction:column;overflow-y:auto;-webkit-overflow-scrolling:touch}
  .map-wrap{order:-1;flex:none;height:52vh;min-height:260px;border-radius:0}
  .sidebar{width:100%;padding:12px;overflow:visible}

  /* kaart-overlays op één rij per hoek, zodat niets elkaar raakt:
     laagkeuze linksonder boven de bronregel, legenda vervalt (de stand
     eronder toont de teamkleuren al) */
  .legend{display:none}
  .kaart-lagen{top:auto;bottom:42px;left:14px;right:auto}
  .kaart-banner{top:10px}
  .kb-status{font-size:.78rem;padding:5px 12px}
  .kaart-bron{font-size:.58rem}

  /* pagina's en modals: minder lucht, volle breedte */
  .verkenner{padding:20px 14px 70px}
  .verkenner-kop{margin-bottom:16px}
  .onboard{padding:12px}
  .onboard-card{padding:22px 18px;border-radius:18px}

  /* teamlijsten: naam krijgt de ruimte, cijfers compact */
  .team-rij{gap:10px;padding:12px 6px}
  .team-rij .avatar{width:34px;height:34px}
  .team-rij .tr-stat{width:56px}
  .team-rij .tr-stat span{font-size:.56rem;letter-spacing:0}

  /* het wedstrijdaffiche iets bescheidener */
  .megaduel .kant b{font-size:1.5rem}

  /* meldingen en beheer: knoppen onder de tekst als het krap wordt */
  .melding-rij{flex-wrap:wrap}

  /* iOS zoomt in op velden kleiner dan 16px; dat willen we nooit */
  .onboard-card input,.onboard-card select,
  .vk-zoek input,.vk-zoek select,
  .cp-beheer-rij select,.invite-rij input{font-size:16px}
}