/* app/ui-laag-biedspellen.css — REV-377 "Bied spellen" (bèta) in Oefenen.
   Vormgeving: Claude Design-canvas "Biedtrainer · Bied spellen compact" (28-10-2026). Mobile first (390),
   desktop-inhoud max. 960 px. Kleuren uit ui-laag.css (--ul-*); de kwetsbaarheidstinten zijn de voorgestelde
   tokens --ul-kw-* / --ul-nkw-* / --ul-verschil-tint, hier lokaal gedefinieerd (met donkere variant). */

/* ── ingang in Oefenen (oefenbalk + kaart) ─────────────────────────────────────────── */
.bs-beta{display:inline-block;margin-left:6px;padding:0 7px;border-radius:999px;border:1px solid var(--ul-oranje-rand);background:var(--ul-oranje-tint);
  color:var(--ul-oranje-tekst);font:700 12px/18px var(--ul-font,inherit);letter-spacing:.04em;vertical-align:middle;text-transform:none}
.bs-tab{white-space:nowrap}
.bs-ingang-kaart .n-primary{align-self:flex-start}

/* ── basis ──────────────────────────────────────────────────────────────────────────── */
.bs-wrap{--ul-kw-tint:#fbe3e1;--ul-kw-tekst:#8e231b;--ul-kw-rand:#e7a29b;--ul-nkw-tint:#e3f3e9;--ul-nkw-tekst:#155c39;--ul-nkw-rand:#a7d7b9;
  --ul-verschil-tint:#fdf1ef;--bs-tafelmidden:var(--ul-rand2);
  max-width:960px;margin:0 auto;display:flex;flex-direction:column;gap:10px;color:var(--ul-tekst);min-width:0}
.dark .bs-wrap,:root.dark .bs-wrap{--ul-kw-tint:#3a1b18;--ul-kw-tekst:#ffb3ab;--ul-kw-rand:#7a3a33;--ul-nkw-tint:#16281b;--ul-nkw-tekst:#9be3b5;--ul-nkw-rand:#2f6b45;--ul-verschil-tint:#3a1b18}
.bs-wrap *,.bs-wrap *::before,.bs-wrap *::after{box-sizing:border-box}
.bs-wrap button,.bs-wrap select{font-family:inherit}
.bs-scherm{display:flex;flex-direction:column;gap:10px;min-width:0}
.bs-vlak{background:var(--ul-kaart);border:1px solid var(--ul-rand);border-radius:12px;padding:10px;min-width:0}
.bs-kop{font-family:var(--ul-kopfont);font-weight:700;margin:0;font-variant-numeric:lining-nums}
.bs-lbl{font-size:12px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;color:var(--ul-gedempt)}
.bs-noot{margin:0;font-size:12px;line-height:1.4;color:var(--ul-gedempt)}
.bs-midden{text-align:center}
.bs-fout{margin:0;padding:10px 12px;border-radius:10px;background:var(--ul-oranje-tint);border:1px solid var(--ul-oranje-rand);color:var(--ul-oranje-tekst);display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.bs-wacht{margin:0;color:var(--ul-gedempt);font-style:italic}
.bs-plus{color:var(--ul-nkw-tekst)}
.bs-min{color:var(--ul-kw-tekst)}
.bs-leider{font-size:.75em;font-weight:600;color:var(--ul-gedempt)}

/* knoppen */
.bs-knop{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--ul-rand-knop);background:var(--ul-kaart);color:var(--ul-navy);
  font-size:15px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}
.dark .bs-knop{color:var(--ul-tekst)}
.bs-knop:disabled{opacity:.45;cursor:default}
.bs-knop-p{min-height:48px;width:100%;border:0;border-radius:12px;background:var(--ul-oranje-knop);color:#fff;font-size:17px;font-weight:700;cursor:pointer;padding:0 28px}
.bs-pijl{width:44px;height:44px;flex:none;border-radius:10px;border:1px solid var(--ul-rand-knop);background:var(--ul-kaart);color:var(--ul-navy);font-size:20px;font-weight:700;cursor:pointer}
.bs-pijl:disabled{opacity:.4;cursor:default}
.bs-seg{display:flex;background:var(--ul-creme);border-radius:10px;padding:3px;gap:2px}
.bs-seg-b{flex:1;min-height:44px;border:0;border-radius:8px;background:transparent;color:var(--ul-navy);font-size:16px;font-weight:700;cursor:pointer;white-space:nowrap;padding:0 14px}
.dark .bs-seg-b{color:var(--ul-tekst)}
.bs-seg-b.on{background:var(--ul-navy);color:#fff}

/* ── balk ─────────────────────────────────────────────────────────────────────────── */
.bs-balk{background:var(--ul-navy);color:#fff;display:flex;align-items:center;gap:6px;padding:6px;border-radius:12px;min-height:56px}
.bs-balk-tekst{flex:1;min-width:0;padding-left:8px;display:flex;flex-direction:column;gap:1px}
.bs-balk-titel{font-family:var(--ul-kopfont);font-weight:700;font-variant-numeric:lining-nums;font-size:17px;line-height:1.2;display:flex;align-items:center;gap:8px;white-space:nowrap}
.bs-balk .bs-beta{margin:0;color:#f3b27a;border-color:#f3b27a;background:transparent}
.bs-balk-sub{font-size:12px;color:var(--ul-licht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bs-stand{min-height:44px;display:flex;align-items:center;gap:6px;padding:3px 10px 3px 3px;border-radius:10px;background:var(--ul-navy2);border:1px solid #3d4b70;color:#fff;cursor:pointer;text-align:left}
.bs-stand b{display:block;font-size:14px;line-height:1.15;font-variant-numeric:tabular-nums}
.bs-stand small{display:block;font-size:12px;color:var(--ul-licht);line-height:1.15}
.bs-breed{display:none}
.bs-sluit{width:44px;height:44px;flex:none;border-radius:10px;border:1px solid #3d4b70;background:transparent;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer}

/* kaart-avatar (sprite 4 × 2) */
.bs-avatar{display:block;width:36px;height:36px;flex:none;border-radius:8px;background-color:var(--ul-oranje-tint);background-image:url('./biedspellen-avatar.webp');background-size:400% 200%;background-repeat:no-repeat}
.bs-avatar-groot{width:56px;height:56px}
.bs-avatar[data-band="0"]{background-position:0 0}       .bs-avatar[data-band="1"]{background-position:33.333% 0}
.bs-avatar[data-band="2"]{background-position:66.667% 0}  .bs-avatar[data-band="3"]{background-position:100% 0}
.bs-avatar[data-band="4"]{background-position:0 100%}     .bs-avatar[data-band="5"]{background-position:33.333% 100%}
.bs-avatar[data-band="6"]{background-position:66.667% 100%} .bs-avatar[data-band="7"]{background-position:100% 100%}

/* ── kiezen ───────────────────────────────────────────────────────────────────────── */
.bs-kies{padding:14px;display:flex;flex-direction:column;gap:14px}
.bs-kies-kop{display:flex;flex-direction:column;gap:8px}
.bs-kies-kop .bs-kop{font-size:20px;line-height:1.2}
.bs-kies-kop p{margin:0;font-size:15px;line-height:1.45}
.bs-kies-kop p.bs-noot{font-size:13px}
.bs-veld{display:flex;flex-direction:column;gap:6px}
.bs-sel{width:100%;min-height:44px;border:1px solid var(--ul-rand-knop);border-radius:10px;background:var(--ul-kaart);color:var(--ul-tekst);font-size:16px;padding:0 12px}
.bs-hervat{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px}
.bs-hervat p{margin:0}

/* ── bieden ───────────────────────────────────────────────────────────────────────── */
.bs-bieden{display:flex;flex-direction:column;gap:8px}
.bs-tafelvlak{display:flex;flex-direction:column;gap:8px}
.bs-tafelrij{display:flex;gap:10px;align-items:flex-start}
.bs-tf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:"n n n" "w m o" "s s s";gap:6px;width:128px;flex:none}
.bs-st{position:relative;border:1.5px solid;border-radius:8px;height:34px;display:flex;align-items:center;justify-content:center;gap:4px;font-size:14px;font-weight:700;white-space:nowrap}
.bs-st small{font-size:12px;font-weight:600}
.bs-st-N{grid-area:n}.bs-st-W{grid-area:w}.bs-st-E{grid-area:o}.bs-st-S{grid-area:s}
.bs-kw{background:var(--ul-kw-tint);color:var(--ul-kw-tekst);border-color:var(--ul-kw-rand)}
.bs-nkw{background:var(--ul-nkw-tint);color:var(--ul-nkw-tekst);border-color:var(--ul-nkw-rand)}
.bs-jij{box-shadow:0 0 0 2px var(--ul-kaart),0 0 0 4px var(--ul-navy)}
.bs-denkt{box-shadow:0 0 0 2px var(--ul-kaart),0 0 0 4px var(--ul-oranje)}
.bs-gv{position:absolute;top:-8px;right:-6px;width:20px;height:20px;border-radius:50%;background:var(--ul-navy);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid var(--ul-kaart)}
.bs-tf-m{grid-area:m;display:none}
.bs-tafel-rechts{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
.bs-legenda{margin:0;font-size:12px;line-height:16px;color:var(--ul-gedempt)}

/* biedraster */
.bs-rst{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--ul-rand);border:1px solid var(--ul-rand);border-radius:10px;overflow:hidden}
.bs-rk{background:var(--ul-creme);height:24px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--ul-gedempt)}
.bs-c{background:var(--ul-kaart);height:34px;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;color:var(--ul-tekst);white-space:nowrap;border:0;padding:0;min-width:0}
.bs-c-tp{color:var(--ul-gedempt);font-weight:500}
.bs-c-pas{color:var(--ul-gedempt);font-weight:500}
.bs-c-laatst{background:var(--ul-oranje-tint);box-shadow:inset 0 0 0 2px var(--ul-oranje)}
.bs-c-beurt{background:var(--ul-oranje);color:#fff;font-size:17px}
.bs-c-denkt{background:var(--ul-oranje-tint);box-shadow:inset 0 0 0 2px var(--ul-oranje);color:var(--ul-oranje-tekst);letter-spacing:.15em}
.bs-c-verschil{box-shadow:inset 0 0 0 2px var(--ul-rood);background:var(--ul-verschil-tint)}
.bs-c-gekozen{background:var(--ul-navy);color:#fff;box-shadow:inset 0 0 0 3px var(--ul-rood)}
.bs-c-gekozen .ul-su,.bs-c-gekozen span{color:#fff}
.bs-rst-klik .bs-c{height:44px;cursor:pointer}
.bs-rst-klik .bs-c-leeg{cursor:default}
.bs-rst-klik button.bs-c:hover{background:var(--ul-creme)}
.bs-rst-klik button.bs-c-gekozen:hover{background:var(--ul-navy)}

/* status */
.bs-status{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:40px;padding:0 2px 0 4px;font-size:15px}
.bs-laatste b{font-size:17px}
.bs-pil{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;border-radius:999px;padding:6px 12px;white-space:nowrap}
.bs-pil-beurt{color:var(--ul-oranje-tekst);background:var(--ul-oranje-tint);border:1px solid var(--ul-oranje-rand)}
.bs-pil-denkt{color:var(--ul-navy);background:var(--ul-chip)}
.dark .bs-pil-denkt{color:var(--ul-tekst)}
.bs-pil-denkt i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--ul-oranje);animation:bs-puls 1s infinite ease-in-out}
.bs-pil-denkt i:nth-child(2){animation-delay:.15s}.bs-pil-denkt i:nth-child(3){animation-delay:.3s}
@keyframes bs-puls{0%,100%{opacity:.25}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.bs-pil-denkt i{animation:none}}

/* hand + biedkast */
.bs-ikvlak{display:flex;flex-direction:column;gap:10px;padding:10px 10px 12px}
.bs-hand{display:flex;flex-direction:column;gap:2px;padding:0 4px}
.bs-hr{display:flex;flex-direction:column}
.bs-hr>span{display:flex;align-items:baseline;gap:10px;font-size:21px;font-weight:700;letter-spacing:.05em;line-height:29px}
.bs-sym{width:22px;text-align:center;flex:none}
.bs-kast{display:flex;flex-direction:column;gap:6px}
.bs-kast-wacht{opacity:.4}
.bs-r7{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.bs-r5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.bs-r3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:6px}
.bs-k{min-height:44px;border-radius:10px;border:1px solid var(--ul-rand-knop);background:var(--ul-kaart);color:var(--ul-tekst);font-size:17px;font-weight:700;cursor:pointer;padding:0 2px;white-space:nowrap;min-width:0}
.bs-k:hover:not(:disabled){border-color:var(--ul-navy)}
.bs-k-spec{font-size:15px;color:#fff;overflow:hidden;text-overflow:ellipsis}
.bs-k-pas{background:var(--ul-groen);border-color:var(--ul-groen)}
.bs-k-dbl{background:var(--ul-rood);border-color:var(--ul-rood)}
.bs-k-rdbl{background:var(--ul-blauw);border-color:var(--ul-blauw)}
.bs-k-sel{border:2px solid var(--ul-navy);background:var(--ul-chip)}
.bs-k-spec.bs-k-sel{box-shadow:inset 0 0 0 2px #fff;border:2px solid var(--ul-navy)}
.bs-k-pas.bs-k-sel{background:var(--ul-groen)}.bs-k-dbl.bs-k-sel{background:var(--ul-rood)}.bs-k-rdbl.bs-k-sel{background:var(--ul-blauw)}
.bs-k-gone{opacity:.38;background:var(--ul-creme);cursor:default}
.bs-k-spec.bs-k-gone{opacity:.3}
.bs-k-pas.bs-k-gone{background:var(--ul-groen)}.bs-k-dbl.bs-k-gone{background:var(--ul-rood)}.bs-k-rdbl.bs-k-gone{background:var(--ul-blauw)}
.bs-bev{min-height:48px;width:100%;border:0;border-radius:12px;background:var(--ul-oranje-knop);color:#fff;font-size:17px;font-weight:700;cursor:pointer;margin-top:4px}
.bs-bev:disabled{opacity:.5;cursor:default}

/* ── na het bieden: uitslag op één strook ───────────────────────────────────────────── */
.bs-uitslag{padding:10px 12px 2px;display:flex;flex-direction:column;gap:4px}
.bs-u-rij{display:flex;flex-wrap:wrap;align-items:center;column-gap:12px;row-gap:4px;font-size:15px}
.bs-u-contract{font-size:22px;white-space:nowrap}
.bs-u-item{display:flex;flex-direction:column;gap:1px;white-space:nowrap}
.bs-u-item small{font-size:12px;color:var(--ul-gedempt)}
.bs-u-vul{flex:1}
.bs-imp{font-size:16px;font-weight:700;border-radius:8px;padding:6px 10px;white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--ul-chip)}
.bs-imp.bs-min{background:var(--ul-kw-tint);color:var(--ul-kw-tekst)}
.bs-imp.bs-plus{background:var(--ul-nkw-tint);color:var(--ul-nkw-tekst)}
.bs-uitklap summary{min-height:44px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--ul-rand2);color:var(--ul-oranje-tekst);font-size:14px;font-weight:700;cursor:pointer;list-style:none;padding:0 2px}
.bs-uitklap summary::-webkit-details-marker{display:none}
.bs-uitklap summary::after{content:'▾'}
.bs-uitklap[open] summary::after{content:'▴'}
.bs-vt{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));font-size:14px;font-variant-numeric:tabular-nums;margin-bottom:8px}
.bs-vt>span{height:30px;display:flex;align-items:center;border-top:1px solid var(--ul-rand2);padding-left:4px;white-space:nowrap;overflow:hidden}
.bs-vt .bs-vk{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ul-gedempt);border-top:0;height:24px}
.bs-vt .r{justify-content:flex-end;padding-right:6px}
.bs-vt .bs-jul{background:var(--ul-oranje-tint);font-weight:700;border-top:1.5px solid var(--ul-oranje);border-bottom:1.5px solid var(--ul-oranje)}

/* ── analyse ──────────────────────────────────────────────────────────────────────── */
.bs-analyse{display:flex;flex-direction:column;gap:10px;padding:12px}
.bs-an-kop{display:flex;flex-direction:column;gap:8px}
.bs-an-kop .bs-kop{font-size:19px}
.bs-verschil{margin:2px 0 0;font-size:14px;font-weight:700;color:var(--ul-rood)}
.bs-seg-klein .bs-seg-b{font-size:15px}
.bs-stapper{display:flex;align-items:center;gap:8px}
.bs-stapper>span{flex:1;text-align:center;font-size:15px;font-weight:700}
.bs-stapper small{font-weight:500;color:var(--ul-gedempt);font-size:15px}
.bs-an-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 6px}
.bs-kolom{display:flex;flex-direction:column;gap:4px;min-width:0}
.bs-onder{font-size:12px;color:var(--ul-gedempt);padding-left:2px}
.bs-sel{grid-column:1 / -1;background:var(--ul-kaart);border:1.5px solid var(--ul-navy);border-radius:12px;padding:10px 12px;display:flex;flex-direction:column;gap:6px}
.bs-sel-leeg{border:1px dashed var(--ul-rand-knop)}
.bs-sel-kop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:16px}
.bs-sel-kop small{font-size:12px;color:var(--ul-gedempt);white-space:nowrap}
.bs-hl{font-size:17px;font-weight:700;letter-spacing:.03em;line-height:1.5;display:flex;flex-wrap:wrap;column-gap:12px}
.bs-sel-uitleg{margin:0;font-size:14px;line-height:1.45}
.bs-sel-nav{display:flex;justify-content:space-between;gap:8px;margin-top:2px}

/* ── volledig spel ────────────────────────────────────────────────────────────────── */
.bs-handen{display:flex;flex-direction:column;gap:8px;padding:12px}
.bs-hd-kop{display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.bs-hd-kop .bs-kop{font-size:19px}
.bs-hd-meta{display:flex;align-items:center;gap:12px;font-size:12px;color:var(--ul-gedempt);text-align:right}
.bs-mini{display:none}
.bs-kp{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"n n" "w o" "s s";gap:8px}
.bs-hd{background:var(--ul-creme);border-radius:10px;padding:8px 10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.bs-hd-N{grid-area:n}.bs-hd-W{grid-area:w}.bs-hd-E{grid-area:o}.bs-hd-S{grid-area:s}
.bs-hd-k{font-size:12px;font-weight:700;color:var(--ul-gedempt)}
.bs-hv{display:flex;flex-direction:column;font-size:17px;font-weight:700;letter-spacing:.03em;line-height:26px}
.bs-hv .bs-sym{display:inline-block;width:20px;text-align:left}
.bs-alleen-breed{display:none}
.bs-verder{display:flex;flex-direction:column-reverse;gap:8px}
.bs-verder .bs-knop{width:100%;min-height:48px}

/* ── eindstand ────────────────────────────────────────────────────────────────────── */
.bs-eind{padding:0;overflow:hidden}
.bs-eind-kop{display:flex;align-items:center;gap:12px;padding:12px}
.bs-eind-kop>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.bs-eind-waarde{font-size:28px;line-height:1.1}
.bs-eindrij{display:grid;grid-template-columns:28px minmax(0,1fr) auto 18px;align-items:center;gap:8px;min-height:48px;padding:0 12px;border:0;border-top:1px solid var(--ul-rand2);
  background:transparent;width:100%;text-align:left;font-size:16px;color:var(--ul-tekst);cursor:pointer}
.bs-eindrij:hover{background:var(--ul-creme)}
.bs-e-nr{font-weight:700;color:var(--ul-gedempt);font-variant-numeric:tabular-nums}
.bs-e-ct{font-weight:700}
.bs-e-res{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.bs-e-chev{color:var(--ul-gedempt)}

/* ── desktop / tablet ─────────────────────────────────────────────────────────────── */
@media (min-width: 760px){
  .bs-wrap{gap:12px}
  .bs-scherm{gap:12px}
  .bs-vlak{padding:16px}
  .bs-breed{display:inline}
  .bs-stand{gap:8px;padding:3px 12px 3px 3px}
  .bs-balk-sub{font-size:13px}
  /* bieden: tafel + verloop links (400), hand + biedkast rechts */
  .bs-bieden{display:grid;grid-template-columns:400px minmax(0,1fr);gap:12px;align-items:start}
  .bs-tafelvlak{gap:14px}
  .bs-tafelrij{flex-direction:column;gap:14px}
  .bs-tf{width:100%;grid-template-areas:". n ." "w m o" ". s .";gap:6px}
  .bs-st{height:44px;font-size:15px;gap:5px}
  .bs-tf-m{display:flex;flex-direction:column;align-items:center;justify-content:center;border-radius:8px;background:var(--bs-tafelmidden);font-size:12px;line-height:1.25;color:var(--ul-gedempt);text-align:center}
  .bs-tafel-rechts{width:100%}
  .bs-c{height:40px;font-size:17px}
  .bs-c-beurt{font-size:19px}
  .bs-status{font-size:16px}
  .bs-laatste b{font-size:18px}
  .bs-pil{font-size:15px;padding:7px 14px}
  .bs-ikvlak{gap:14px;padding:16px}
  .bs-hr>span{font-size:23px;line-height:32px;gap:12px}
  .bs-sym{width:24px}
  .bs-kast{gap:8px}
  .bs-r7,.bs-r5,.bs-r3{gap:8px}
  .bs-k{min-height:52px;font-size:19px}
  .bs-k-spec{font-size:16px}
  .bs-bev{min-height:52px;font-size:18px}
  /* uitslag op één regel */
  .bs-uitslag{padding:10px 12px 10px 16px}
  .bs-u-rij{flex-wrap:nowrap;column-gap:16px}
  .bs-u-contract{font-size:24px}
  .bs-u-item{padding-left:16px;border-left:1px solid var(--ul-rand2)}
  .bs-vt{grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr));max-width:620px}
  .bs-vt .r{padding-right:12px}
  /* analyse: twee rasters van 236 + uitleg ernaast */
  .bs-analyse{padding:16px;gap:12px}
  .bs-an-kop{flex-direction:row;align-items:center;justify-content:space-between;gap:16px}
  .bs-an-kop .bs-kop{font-size:21px}
  .bs-seg-klein .bs-seg-b{flex:none;padding:0 16px}
  .bs-stapper{justify-content:flex-end}
  .bs-stapper>span{flex:none;min-width:200px}
  .bs-an-grid{grid-template-columns:236px 236px minmax(0,1fr);gap:14px;align-items:start}
  .bs-c{font-size:16px}
  .bs-sel{grid-column:auto;margin-top:20px;padding:12px 14px;gap:8px}
  .bs-sel-kop{font-size:17px}
  .bs-hl{font-size:18px;column-gap:14px}
  .bs-sel-uitleg{font-size:15px}
  /* volledig spel: kompas 3 × 210 */
  .bs-handen{padding:16px;gap:10px}
  .bs-hd-kop{align-items:center}
  .bs-hd-kop .bs-kop{font-size:21px}
  .bs-hd-meta{font-size:13px}
  .bs-mini{display:grid;grid-template-columns:repeat(3,22px);grid-template-areas:". n ." "w . o" ". s .";gap:2px}
  .bs-ms{position:relative;height:22px;border:1.5px solid;border-radius:5px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center}
  .bs-ms .bs-gv{width:14px;height:14px;font-size:9px;top:-6px;right:-6px;border-width:1px}
  .bs-ms-N{grid-area:n}.bs-ms-W{grid-area:w}.bs-ms-E{grid-area:o}.bs-ms-S{grid-area:s}
  .bs-kp{grid-template-columns:repeat(3,210px);grid-template-areas:"w n o" "w s o";gap:8px 16px;justify-content:center;align-items:center}
  .bs-hv{line-height:25px;white-space:nowrap}
  .bs-alleen-smal{display:none}
  .bs-alleen-breed{display:block}
  .bs-verder{flex-direction:row;justify-content:flex-end;gap:10px}
  .bs-verder .bs-knop{width:auto}
  .bs-verder .bs-knop-p{width:auto}
  .bs-eind-kop{padding:16px}
  .bs-scherm>.bs-knop-p{align-self:flex-end;width:auto}
}
@media (max-width: 360px){ .bs-k-spec{font-size:13px} .bs-balk-sub{display:none} }
/* Uitleg bij botbiedingen (tik op een bod in het raster) */
.bs-rst button.bs-c{cursor:pointer;font:inherit;border:0}
.bs-rst button.bs-c:hover{background:var(--ul-creme)}
.bs-rst .bs-c-uitleg{box-shadow:inset 0 0 0 2px var(--ul-navy)}
.bs-alert{margin:8px 0 0;padding:8px 10px;border:1px solid var(--ul-rand);border-left:3px solid var(--ul-oranje-rand);border-radius:8px;background:var(--ul-oranje-tint);font-size:13px;line-height:1.35}
.bs-alert b{font-weight:700;margin-right:6px}
.bs-alert-wie{font-size:11px;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
.bs-alert p{margin:4px 0 2px}
.bs-alert small{display:block;font-size:11px;opacity:.65}
/* Partnermodus (29-10-2026) */
.bs-p-nav{display:flex;flex-wrap:wrap;gap:6px;justify-content:space-between;margin-top:8px}
.bs-p-nav .bs-knop{flex:1 1 auto;min-width:0}
.bs-p-paren{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.bs-p-code{display:flex;align-items:center;gap:10px;margin:4px 0}
.bs-p-code b{font:700 22px/1.2 var(--ul-font,inherit);letter-spacing:.18em;color:var(--ul-navy)}
.bs-p-koppel{display:flex;gap:8px}
.bs-p-koppel input{flex:1 1 auto;min-width:0;text-transform:uppercase;letter-spacing:.12em}
/* Startquiz (Oefenen, 29-10-2026) — zelfde laag als Bid boards */
.sq-filters{display:flex;flex-direction:column;gap:6px}
.sq-seg{overflow-x:auto;scrollbar-width:none}
.sq-seg .bs-seg-b{white-space:nowrap;flex:1 0 auto}
.sq-kop{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.sq-ct{font-size:16px}
.sq-ct b{font-weight:800}
.sq-meta{font-size:13px;color:var(--ul-muted,#5b6472)}
.sq-rk-jij,.sq-c-jij{font-weight:800}
.sq-rk-jij{color:var(--ul-oranje-tekst)}
.sq-hand{display:flex;flex-direction:column;gap:6px;margin:6px 0 10px}
.sq-rij{display:flex;align-items:center;flex-wrap:wrap;gap:5px}
.sq-rij .bs-sym{width:20px;font-size:18px}
.sq-kaart{min-width:38px;height:42px;padding:0 6px;border:1px solid var(--ul-rand);border-radius:8px;background:#fff;font:700 17px/40px var(--ul-font,inherit);text-align:center;cursor:pointer}
.sq-kaart:hover{background:var(--ul-creme)}
.sq-kaart.on{background:var(--ul-navy);color:#fff;border-color:var(--ul-navy)}
.sq-kaart-vast{cursor:default}
.sq-leeg{color:var(--ul-muted,#5b6472)}
.sq-oordeel{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.sq-balken{display:flex;flex-direction:column;gap:5px;margin:4px 0 12px}
.sq-balk{display:grid;grid-template-columns:44px minmax(0,1fr) 78px auto;align-items:center;gap:8px;font-size:14px}
.sq-b-naam{font-weight:800;font-size:16px}
.sq-b-spoor{height:12px;border-radius:6px;background:var(--ul-creme);overflow:hidden}
.sq-b-vul{display:block;height:100%;background:var(--ul-rand-sterk,#9aa3b2);border-radius:6px}
.sq-veld .sq-b-vul{background:var(--ul-groen,#2e7d4f)}
.sq-eigen .sq-b-vul{box-shadow:inset 0 0 0 2px var(--ul-navy)}
.sq-b-getal{text-align:right;font-variant-numeric:tabular-nums}
.sq-b-getal small{color:var(--ul-muted,#5b6472)}
.sq-tag{font-size:11px;font-weight:700;text-transform:uppercase;padding:1px 6px;border-radius:999px;background:var(--ul-navy);color:#fff}
.sq-stand small{display:block}
/* Startquiz: uitleg bij het biedverloop (29-10-2026) */
.sq-uitleg{margin-top:10px;border-top:1px solid var(--ul-rand);padding-top:8px}
.sq-uitleg summary{cursor:pointer;font-weight:700;font-size:14px}
.sq-uitleg-lijst{list-style:none;margin:6px 0;padding:0;display:flex;flex-direction:column;gap:4px;font-size:14px;line-height:1.35}
.sq-uitleg-lijst b{display:inline-block;min-width:54px}
.sq-uitleg-lijst small{color:var(--ul-muted,#5b6472)}
.sq-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sq-chip{display:inline-flex;align-items:baseline;gap:4px;padding:3px 8px;border-radius:999px;border:1px solid var(--ul-line,#d6dbe3);font-size:13px;background:var(--ul-surface,#fff)}
.sq-chip small{color:var(--ul-muted,#5b6472)}
.sq-chip.sq-kw{border-color:#c62828;background:rgba(198,40,40,.08)}
.sq-chip.sq-kw b{color:#b71c1c}
.sq-niveaukeuze{display:flex;flex-direction:column;gap:12px}
.sq-niveaus{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.sq-niveau-k{display:flex;flex-direction:column;align-items:flex-start;gap:4px;text-align:left;padding:14px 16px;border-radius:12px;border:1px solid var(--ul-line,#d6dbe3);background:var(--ul-surface,#fff);color:inherit;font:inherit;cursor:pointer;min-height:44px}
.sq-niveau-k:hover,.sq-niveau-k:focus-visible{border-color:var(--ul-ink,#1f2a44);outline:none}
.sq-niveau-k b{font-size:17px}
.sq-niveau-k small{color:var(--ul-muted,#5b6472);font-size:13px}

/* Startquiz · na de start: het hele spel en de double-dummy-score van de start (30-10-2026) */
.sq-dd{margin-top:14px;padding-top:12px;border-top:1px solid var(--ul-rand,#E6E0D6)}
.sq-dd-tafel{display:grid;grid-template-columns:1fr minmax(70px,auto) 1fr;grid-template-areas:". n ." "w m e" ". s .";gap:8px;align-items:center;margin:8px 0 12px}
.sq-dd-N{grid-area:n}.sq-dd-S{grid-area:s}.sq-dd-W{grid-area:w}.sq-dd-E{grid-area:e}
.sq-dd-mid{grid-area:m;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--v59-navy,#1E2A44);color:#fff;border-radius:10px;padding:10px 6px;min-height:64px}
.sq-dd-mid small{opacity:.8;font-size:11px}
.sq-dd-hand{display:flex;flex-direction:column;gap:2px;font-size:13px;padding:6px 8px;border-radius:8px;background:var(--ul-vlak,#F8F5EF)}
.sq-dd-jij{outline:2px solid var(--v59-oranje,#C2410C)}
.sq-dd-naam{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--ul-grijs,#6B6B6B)}
.sq-dd-rij{display:flex;gap:3px;align-items:center;flex-wrap:wrap}
.sq-dd-k{font-weight:600;min-width:12px}
.sq-dd-k.on{background:var(--v59-navy,#1E2A44);color:#fff;border-radius:4px;padding:0 4px}
.sq-dd-score p{margin:4px 0}
.sq-dd-lijst{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.sq-dd-chip{font-size:12px;padding:2px 8px;border-radius:999px;border:1px solid var(--ul-rand,#E6E0D6)}
.sq-dd-chip.best{background:#E3F2E8;border-color:#9BD3AE}
.sq-dd-chip.jij{outline:2px solid var(--v59-navy,#1E2A44)}
.sq-dd-alle summary{cursor:pointer;min-height:32px;padding:6px 0;font-weight:600}
@media (max-width:520px){.sq-dd-tafel{grid-template-columns:1fr 1fr;grid-template-areas:"n n" "w e" "m m" "s s"}}
.dark .sq-dd-hand{background:#1A2130}.dark .sq-dd-chip.best{background:#1F3A2A;border-color:#2E6B45}
/* Startquiz 31-10-2026: wedstrijdvorm-keuze, tabs Vraag/Analyse, wat de start oplevert */
.sq-filters{display:flex;flex-direction:row;gap:8px;align-items:stretch}
.sq-filters .sq-seg{flex:1 1 auto;min-width:0;overflow:visible}
.sq-filters .sq-seg .bs-seg-b{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis}
.sq-vorm-k{position:relative;display:inline-flex;align-items:center;gap:6px;flex:none;padding:0 10px;min-height:44px;border:1px solid var(--ul-rand,#E6E0D6);border-radius:10px;background:var(--ul-kaart,#fff);color:var(--ul-tekst,#1f2a44);cursor:pointer}
.sq-vorm-k select{appearance:none;-webkit-appearance:none;border:0;background:none;color:inherit;font:inherit;font-weight:600;font-size:14px;cursor:pointer;max-width:170px}
@media (max-width:820px){
  .sq-vorm-k{padding:0 12px}
  .sq-vorm-k select{position:absolute;inset:0;opacity:0;width:100%;max-width:none}
}
.sq-tabs{display:flex;gap:8px;align-items:center;margin:0 0 10px}
.sq-tabs .bs-seg{flex:1 1 auto}
.sq-volgende-kort{flex:none;width:auto;margin:0}
.sq-waarde{display:flex;gap:12px;align-items:center;padding:10px 12px;margin-bottom:12px;border-radius:12px;background:var(--ul-vlak,#F8F5EF);border:1px solid var(--ul-rand,#E6E0D6)}
.sq-waarde-getal{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums;min-width:84px;text-align:center}
.sq-waarde-tekst{display:flex;flex-direction:column;gap:2px}
.sq-waarde-tekst small{color:var(--ul-muted,#5b6472)}
.sq-waarde.goed{background:#E3F2E8;border-color:#9BD3AE}.sq-waarde.goed .sq-waarde-getal{color:#1d5c34}
.sq-waarde.slecht{background:#FBE9E4;border-color:#EDB8A8}.sq-waarde.slecht .sq-waarde-getal{color:#8a2c12}
.dark .sq-waarde.goed{background:#16341f;border-color:#2e6b44}.dark .sq-waarde.goed .sq-waarde-getal{color:#a8e0bb}
.dark .sq-waarde.slecht{background:#3a1d14;border-color:#7a3a24}.dark .sq-waarde.slecht .sq-waarde-getal{color:#f3c1b0}
.sq-stand{gap:12px}
/* Startquiz onder Leren: geen tweede titelbalk, alleen de stand als navy strook (31-10-2026) */
.sq-standrij{display:flex;justify-content:flex-end}
.sq-standrij .sq-stand{cursor:default}
/* Startquiz analyse 31-10-2026 (2): kop met niveau, wedstrijdvorm, jouw start en resultaat; subtabs Veld/Spel/Double dummy */
.sq-onthul{display:flex;flex-direction:column;gap:14px}
.sq-hero{margin-bottom:14px}
.sq-hero .lr-hero-getal.goed{color:#7fe0a3}.sq-hero .lr-hero-getal.slecht{color:var(--ul-oranje-op,#F2A36B)}
.sq-hero .lr-groen{color:#7fe0a3}
.sq-hero-kaart{font-weight:800}
.sq-hero .sq-su-h{color:#ff8a80}.sq-hero .sq-su-d{color:#8fb3ff}.sq-hero .sq-su-c{color:#7fe0a3}
.sq-hero .sq-su-s{color:#fff}
.sq-sub{display:flex;gap:4px;border-bottom:2px solid var(--ul-rand,#E6E0D6)}
.sq-sub-b{flex:1 1 0;min-height:44px;padding:0 12px;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;background:none;color:var(--ul-muted,#5b6472);font:inherit;font-weight:700;font-size:15px;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sq-sub-b:hover{color:var(--ul-tekst,#1f2a44)}
.sq-sub-b.on{color:var(--ul-navy,#1E2A44);border-bottom-color:var(--v59-oranje,#C2410C)}
.sq-sub-in{min-height:220px}
.sq-sub-in .sq-dd{margin-top:0;padding-top:0;border-top:0}
.sq-twee,.sq-spel-twee{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px 24px;align-items:start}
.sq-volgende-onder{margin-top:4px}
/* double dummy: biedresultaat, par, tabel en de starts aan tafel */
.sq-dd-bied{display:flex;flex-direction:column;gap:6px}
.sq-dd-bied p{margin:0}
.sq-ddtab{border-collapse:separate;border-spacing:0;margin:6px 0 2px;font-variant-numeric:tabular-nums;border:1px solid var(--ul-rand,#E6E0D6);border-radius:12px;overflow:hidden;min-width:260px}
.sq-ddtab th,.sq-ddtab td{padding:7px 14px;text-align:center;font-size:15px;border-bottom:1px solid var(--ul-rand,#E6E0D6)}
.sq-ddtab thead th{background:var(--ul-navy,#1E2A44);color:#fff;font-size:12px;letter-spacing:.06em}
.sq-ddtab tbody th{background:var(--ul-vlak,#F8F5EF);font-weight:800}
.sq-ddtab tbody tr:last-child th,.sq-ddtab tbody tr:last-child td{border-bottom:0}
.sq-ddtab td.maakt{background:#E3F2E8;color:#1d5c34;font-weight:700}
.sq-ddtab td.geboden{outline:2px solid var(--v59-oranje,#C2410C);outline-offset:-2px;font-weight:800}
.sq-ddv{display:inline-block;min-width:28px;padding:1px 8px;border-radius:999px;font-size:13px;font-weight:800;text-align:center;background:var(--ul-vlak,#F8F5EF)}
.sq-ddv.down{background:#FBE9E4;color:#8a2c12}.sq-ddv.maakt{background:#E3F2E8;color:#1d5c34}
.sq-dd-veld{margin-top:10px;padding-top:10px;border-top:1px solid var(--ul-rand,#E6E0D6)}
.sq-dd-veld p{margin:4px 0 8px}
.sq-ddveld{display:flex;flex-direction:column;gap:4px}
.sq-ddveld-rij{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:10px;align-items:center;padding:6px 10px;border-radius:10px;background:var(--ul-vlak,#F8F5EF);font-size:14px}
.sq-ddveld-rij.versloeg{background:#EEF7F1}
.sq-ddveld-v{display:inline-flex;gap:8px;align-items:center;white-space:nowrap}
.dark .sq-rk-tegel,.dark .sq-ddveld-rij,.dark .sq-ddtab tbody th{background:#1A2130}
.dark .sq-ddtab td.maakt,.dark .sq-ddveld-rij.versloeg{background:#1F3A2A;color:#a8e0bb}

/* ── Bied spellen 31-10-2026: breder, duidelijke navigatie per set, overzicht met focus en tabellen ── */
@media(min-width:1024px){ body[data-schil="normaal"]:has(.bs-wrap){--n-kolom:1180px} }
/* navigatie binnen een set */
.bs-setnav{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;padding:10px 12px;border-radius:14px;background:var(--ul-kaart);border:1px solid var(--ul-rand);box-shadow:0 2px 8px rgba(30,42,68,.06)}
.bs-nav-terug{min-height:44px;padding:0 14px;border-radius:10px;border:1.5px solid var(--ul-navy);background:var(--ul-kaart);color:var(--ul-navy);font:inherit;font-weight:700;cursor:pointer}
.dark .bs-nav-terug{color:var(--ul-tekst);border-color:var(--ul-tekst)}
.bs-nav-chips{display:flex;flex-wrap:wrap;gap:6px;flex:1 1 auto;justify-content:center}
.bs-nav-chip{width:40px;height:40px;border-radius:10px;border:1.5px solid var(--ul-rand);background:var(--ul-kaart);color:var(--ul-tekst);font:inherit;font-weight:800;cursor:pointer;position:relative}
.bs-nav-chip.bs-nav-jij{background:var(--ul-oranje-tint);border-color:var(--ul-oranje);color:var(--ul-oranje-tekst)}
.bs-nav-chip.bs-nav-wacht{background:var(--ul-chip);color:var(--ul-gedempt);border-style:dashed}
.bs-nav-chip.bs-nav-klaar{background:var(--ul-groen-tint);border-color:var(--ul-groen);color:var(--ul-groen)}
.bs-nav-chip.bs-nav-weg{opacity:.45}
.bs-nav-chip.on{outline:3px solid var(--ul-navy);outline-offset:2px}
.dark .bs-nav-chip.on{outline-color:var(--ul-tekst)}
.bs-nav-pijlen{display:flex;gap:6px}
.bs-nav-pijl{min-height:44px;padding:0 14px;border-radius:10px;border:1px solid var(--ul-rand-knop);background:var(--ul-kaart);color:var(--ul-tekst);font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.bs-nav-pijl:disabled{opacity:.4;cursor:default}
.bs-nav-volg:not(:disabled){background:var(--ul-oranje);border-color:var(--ul-oranje);color:#fff}
.bs-nav-alle.on{background:var(--ul-navy);border-color:var(--ul-navy);color:#fff}
.bs-nav-sprong{margin:0;padding:8px 12px;border-radius:10px;background:var(--ul-oranje-tint);color:var(--ul-oranje-tekst);font-weight:600;font-size:14px}
@media(max-width:600px){ .bs-nav-pijl span{display:none} .bs-nav-chips{order:3;flex-basis:100%;justify-content:flex-start} .bs-setnav{gap:8px} }
/* bron en double dummy onder de uitslag */
.bs-bron{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;padding:8px 0 2px;font-size:14px;border-top:1px solid var(--ul-rand2);margin-top:8px}
.bs-bron-link{color:var(--ul-oranje-tekst);font-weight:700;text-decoration:none}
.bs-dd-res{display:inline-block;min-width:24px;text-align:center;padding:0 6px;border-radius:999px;font-weight:800;font-size:12px}
.bs-dd-res.maakt{background:var(--ul-groen-tint);color:var(--ul-groen)}
.bs-dd-res.down{background:var(--ul-kosten-tint,#fff7f2);color:var(--ul-rood)}
/* overzicht: focus-hero, tabellen, twee kolommen */
.bs-hub-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:16px;padding:20px;border-radius:16px;background:var(--ul-navy);color:#fff}
@media(min-width:900px){ .bs-hub-hero{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);padding:24px 28px} }
.bs-hub-hero-links{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.bs-hub-hero p{margin:0;color:var(--ul-licht);font-size:14px;line-height:1.5}
.bs-hub-eyebrow{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ul-licht)}
.bs-hub-titel{margin:0;font-family:var(--ul-kopfont);font-size:26px;line-height:1.2;color:#fff}
.bs-hub-hero .bs-knop{background:transparent;color:#fff;border-color:#5b6a8f}
.bs-hub-tegels{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bs-hub-tegel{background:var(--ul-navy2);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:2px}
.bs-hub-tegel span,.bs-hub-tegel small{font-size:13px;color:var(--ul-licht)}
.bs-hub-tegel b{font-size:24px;font-variant-numeric:tabular-nums}
.bs-hub-tegel.accent b{color:var(--ul-oranje-op,#f2a679)}
.bs-hub-kolommen{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
@media(min-width:1024px){ .bs-hub-kolommen{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)} }
.bs-hub-links,.bs-hub-rechts{display:flex;flex-direction:column;gap:12px;min-width:0}
.bs-tabel{width:100%;border-collapse:collapse;font-size:14px;margin-top:6px}
.bs-tabel th{text-align:left;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ul-gedempt);font-weight:700;padding:6px 8px;border-bottom:1px solid var(--ul-rand)}
.bs-tabel td{padding:10px 8px;border-bottom:1px solid var(--ul-rand2);vertical-align:middle}
.bs-tabel .r{text-align:right}
.bs-tr-klik{cursor:pointer}
.bs-tr-klik:hover td,.bs-tr-klik:focus-visible td{background:var(--ul-oranje-tint)}
.bs-chev{color:var(--ul-gedempt);font-weight:700}
.bs-voortgang{display:inline-block;width:70px;height:8px;border-radius:999px;background:var(--ul-chip);overflow:hidden;vertical-align:middle}
.bs-voortgang i{display:block;height:100%;background:var(--ul-groen)}
.bs-badge{display:inline-block;min-width:26px;padding:2px 8px;border-radius:999px;font-weight:800;text-align:center}
.bs-badge.jij{background:var(--ul-oranje);color:#fff}
.bs-tabel .bs-plus{color:var(--ul-groen)} .bs-tabel .bs-min{color:var(--ul-rood)}
@media(max-width:600px){ .bs-tabel th:nth-child(2),.bs-tabel td:nth-child(2){display:none} }
/* wedstrijdvorm-keuze in dezelfde vormgeving als de niveauknoppen (31-10-2026) */
.sq-vorm-k{background:var(--ul-creme);border:0;border-radius:10px;padding:3px 3px 3px 12px;min-height:50px;color:var(--ul-navy)}
.sq-vorm-k select{font-size:16px;font-weight:700;color:var(--ul-navy);min-height:44px;padding:0 10px;border-radius:8px}
.sq-vorm-k select:focus-visible{outline:2px solid var(--ul-navy)}
.dark .sq-vorm-k,.dark .sq-vorm-k select{color:var(--ul-tekst)}
/* Startquiz: biedverloop als kompas vanuit de starter (Dafydd 31-10-2026) — Wij (partner) boven, Zij | Zij midden, Wij (jij) onder */
.sq-kompas{display:grid;gap:8px;margin:10px 0 4px;max-width:520px;margin-left:auto;margin-right:auto}
.sq-k-midden{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.sq-k-vak{border:1px solid var(--ul-rand);border-radius:12px;background:var(--ul-kaart,#fff);padding:8px 10px;min-width:0}
.sq-k-boven,.sq-k-onder{width:min(100%,260px);justify-self:center}
.sq-k-kop{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:13px}
.sq-k-stoel{color:var(--ul-grijs,#5C6472);font-weight:600}
.sq-k-rol{font-size:11px;font-weight:700;padding:2px 7px;border-radius:9px;background:var(--ul-creme,#F3EFE8)}
.sq-k-leider .sq-k-rol{background:var(--ul-navy,#1F2A44);color:#fff}
.sq-k-gever{font-size:10px;font-weight:800;width:16px;height:16px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ul-rand);color:var(--ul-grijs,#5C6472)}
.sq-k-jij{border-color:var(--ul-oranje,#D35400);box-shadow:inset 0 0 0 1px var(--ul-oranje,#D35400)}
.sq-k-jij .sq-k-kop b{color:var(--ul-oranje-tekst,#A04000)}
.sq-k-leider{border-width:2px}
.sq-k-biedingen{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.sq-k-biedingen li{display:inline-flex;align-items:baseline;gap:3px;font-weight:800;font-size:16px}
.sq-k-biedingen li small{font-size:10px;font-weight:600;color:var(--ul-grijs,#5C6472)}
.sq-k-biedingen li.sq-k-pas{font-weight:500;color:var(--ul-grijs,#5C6472);font-size:14px}
.dark .sq-k-vak{background:var(--ul-chip,#242b36)}
.dark .sq-k-rol{background:#2f3a4a;color:var(--ul-tekst,#E6E9EE)}
.dark .sq-k-leider .sq-k-rol{background:#E6E9EE;color:#12161d}
.dark .sq-k-jij .sq-k-kop b{color:#FFB37A}

/* 31-10-2026: wachten op de partner — alleen de wachtregel, over de volle breedte */
.bs-status-wacht{justify-content:flex-start}
.bs-status-wacht .bs-pil{max-width:100%;white-space:normal}
.bs-status-wacht{flex-wrap:wrap;gap:8px}
.bs-wijzig{min-height:40px;padding:0 14px;margin-left:auto;white-space:nowrap}
.bs-link{border:0;background:none;padding:0 0 0 4px;font:inherit;font-weight:700;color:var(--ul-oranje-tekst,#B23A16);text-decoration:underline;cursor:pointer}
/* 31-10-2026: uitslag bovenaan, tabbladen Bieden / Het veld / Het spel */
.bs-utabs{margin:4px 0 0;background:var(--ul-kaart,#fff);border-radius:12px 12px 0 0;padding:0 8px}
.bs-utab-in{min-height:260px}
.bs-utab-in>.bs-vlak{border-top-left-radius:0;border-top-right-radius:0}
.bs-veldvlak .bs-vt{max-width:720px}
.bs-betekenis{margin:4px 0 2px;font-size:15px;color:var(--ul-tekst,#1f2a44)}
/* Startquiz-vraag 31-10-2026: hero, biedverloop als tabel vanaf de gever, hand ernaast */
.sq-vraaghero{margin-bottom:4px}
.sq-hero-contract{display:inline-flex;align-items:baseline;gap:2px}
.sq-vraaghero .ul-su-h,.sq-vraaghero .ul-su-d{color:#ff8a80}
.sq-vraag-twee{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
@media (min-width:900px){.sq-vraag-twee{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}}
.sq-vraag-twee .bs-kop small{font-family:inherit;font-size:14px;font-weight:600;color:var(--ul-muted,#5b6472);margin-left:6px}
.sq-vt{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;margin:8px 0 4px;border:1px solid var(--ul-rand,#E6E0D6);border-radius:12px;overflow:hidden}
.sq-vt th{padding:8px 6px;text-align:center;vertical-align:top;border-bottom:2px solid var(--ul-rand,#E6E0D6);background:var(--ul-vlak,#F8F5EF)}
.sq-vt th.sq-vt-kw{box-shadow:inset 0 3px 0 #c62828}.sq-vt th.sq-vt-nkw{box-shadow:inset 0 3px 0 #2e7d4f}
.sq-vt-naam{display:block;font-weight:800;font-size:15px}
.sq-vt-wie{display:block;font-size:12px;color:var(--ul-muted,#5b6472)}
.sq-vt-gever{display:inline-block;margin-top:4px;padding:1px 8px;border-radius:999px;background:var(--ul-navy,#1E2A44);color:#fff;font-size:11px;font-weight:700}
.sq-vt td{padding:9px 6px;text-align:center;font-size:18px;font-weight:700;border-bottom:1px solid var(--ul-rand2,#efe9df)}
.sq-vt tbody tr:last-child td{border-bottom:0}
.sq-vt .sq-vt-jij{background:#FDF1E8}
.sq-vt th.sq-vt-jij{background:#FBE3D3;color:var(--ul-oranje-tekst,#B23A16)}
.sq-vt td.sq-vt-pas{font-weight:500;font-size:15px;color:var(--ul-muted,#5b6472)}
.sq-vt td.sq-vt-eerste{box-shadow:inset 0 0 0 2px var(--ul-navy,#1E2A44);border-radius:8px}
.sq-vt td.sq-vt-eind{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.sq-ik .sq-kaart{min-width:44px;height:48px;font-size:19px}
.sq-ik .bs-bev{margin-top:10px}
.dark .sq-vt th{background:#1A2130}.dark .sq-vt .sq-vt-jij{background:#3a2418}.dark .sq-vt th.sq-vt-jij{background:#4a2a18}
/* Bied spellen 31-10-2026 (3): partner koppelen prominent, chat per spel, nieuw-badges */
.bs-koppel{display:flex;flex-direction:column;gap:12px;border:2px solid var(--v59-oranje,#C2410C)}
.bs-koppel-eerst{background:var(--ul-oranje-tint,#FDF1E8)}
.bs-koppel-kop p{margin:4px 0 0;color:var(--ul-muted,#5b6472);font-size:14px}
.bs-koppel-twee{display:grid;grid-template-columns:minmax(0,1fr);gap:14px}
@media (min-width:760px){.bs-koppel-twee{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.bs-koppel-blok{position:relative;padding:12px 14px 12px 50px;border-radius:12px;background:var(--ul-kaart,#fff);border:1px solid var(--ul-rand,#E6E0D6)}
.bs-koppel-nr{position:absolute;left:14px;top:12px;width:26px;height:26px;border-radius:50%;background:var(--v59-oranje,#C2410C);color:#fff;font-weight:800;display:flex;align-items:center;justify-content:center;font-size:14px}
.bs-koppel .bs-p-code b{font-size:26px;letter-spacing:.12em}
.bs-badge.chat{background:#E8F0FE;color:#1d4fd8;border-color:#bcd0fb}
.bs-badge.nieuw{background:#FFF1C2;color:#7a5600;border-color:#f0d78a}
.bs-badge{display:inline-block;padding:1px 8px;border-radius:999px;border:1px solid transparent;font-size:12px;font-weight:700;white-space:nowrap}
.bs-nav-chip.bs-nav-chat{position:relative}
.bs-nav-chip.bs-nav-chat::after{content:"";position:absolute;top:3px;right:3px;width:8px;height:8px;border-radius:50%;background:#1d4fd8}
.bs-chat{display:flex;flex-direction:column;gap:10px}
.bs-chat .bs-kop small{font-family:inherit;font-size:13px;font-weight:600;color:var(--ul-muted,#5b6472);margin-left:6px}
.bs-chat-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;max-height:320px;overflow-y:auto}
.bs-chat-m{align-self:flex-start;max-width:80%;padding:8px 12px;border-radius:14px 14px 14px 4px;background:var(--ul-vlak,#F3EFE8);display:flex;flex-direction:column;gap:2px}
.bs-chat-m.ik{align-self:flex-end;border-radius:14px 14px 4px 14px;background:#E8F0FE}
.bs-chat-tekst{font-size:15px;line-height:1.4;white-space:pre-wrap;overflow-wrap:anywhere}
.bs-chat-m small{font-size:11px;color:var(--ul-muted,#5b6472)}
.bs-chat-invoer{display:flex;gap:8px}
.bs-chat-invoer input{flex:1 1 auto;min-width:0;min-height:44px}
.dark .bs-chat-m{background:#1A2130}.dark .bs-chat-m.ik{background:#1c2c4a}.dark .bs-koppel-blok{background:#151B27}.dark .bs-koppel-eerst{background:#2a1d14}
.bs-vink{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.bs-vink input{width:20px;height:20px;margin-top:2px;flex:none}
.bs-vink span{display:flex;flex-direction:column;gap:2px}
.bs-vink small{color:var(--ul-muted,#5b6472);font-size:13px}

/* 31-10-2026 — tabblad Systemen: welk basissysteem verklaart het tafelverloop, met betekenis per bod */
.bs-sys{display:flex;flex-direction:column;gap:10px}
.bs-sys-kanten{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:640px){.bs-sys-kanten{grid-template-columns:1fr}}
.bs-sys-kant{border:1px solid var(--ul-rand);border-radius:12px;padding:10px;min-width:0}
.bs-sys-oordeel{margin:4px 0 8px;font-weight:600}
.bs-sys-chips{display:flex;flex-wrap:wrap;gap:6px}
.bs-sys-chip{border:1px solid var(--ul-rand);background:var(--ul-kaart,#fff);color:var(--ul-gedempt);border-radius:999px;padding:4px 10px;font:500 13px/18px var(--ul-font,inherit);cursor:pointer;opacity:.75}
.bs-sys-chip.ok{border-color:var(--ul-nkw-rand);background:var(--ul-nkw-tint);color:var(--ul-nkw-tekst);opacity:1;font-weight:700}
.bs-sys-chip.on{outline:2px solid var(--ul-oranje);outline-offset:1px;opacity:1}
.bs-sys-lijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.bs-sys-rij{display:grid;grid-template-columns:92px 1fr 22px;gap:10px;align-items:baseline;padding:7px 10px;border-radius:10px;border:1px solid var(--ul-rand2,var(--ul-rand))}
.bs-sys-zij{background:var(--ul-rand2,transparent)}
.bs-sys-bod small{color:var(--ul-gedempt)}
.bs-sys-uitleg{min-width:0;overflow-wrap:anywhere}
.bs-sys-ander{color:var(--ul-kw-tekst)}
.bs-sys-teken{text-align:center;font-weight:700}
.bs-sys-zelfde .bs-sys-teken{color:var(--ul-nkw-tekst)}
.bs-sys-anders .bs-sys-teken{color:var(--ul-kw-tekst)}