/* app/ui-laag-club-scan.css — Club-scan, fase 1 (UI-laag stap 9; Voorbeeld 7, Club-scan.dc.html,
   390 px). Maten en kleuren uit het artboard; tokens uit app/ui-laag.css (--ul-*), dus ook donker.
   Afwijkingen van het artboard, bewust: tikdoelen 44 px (artboard 40), de hoofdknop in
   --ul-oranje-knop (wit op #d9622b haalt geen 4,5:1), en geen camerablok (fase 2). */
.ulscan{display:flex;flex-direction:column;gap:12px;min-width:0;max-width:430px;margin:0 auto;color:var(--ul-tekst);font-family:'DM Sans',system-ui,sans-serif}

/* navy kop: club · tafel, spelchip, vraag, slotregel */
.ulscan-kop{background:var(--ul-navy);color:#fff;border-radius:16px;padding:20px 20px 18px;display:flex;flex-direction:column;gap:6px}
.ulscan-koprij{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.ulscan-eyebrow{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ul-licht);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ulscan-spelchip{background:var(--ul-navy2);border-radius:999px;padding:4px 10px;font-size:12px;font-weight:700;white-space:nowrap;flex:none}
.ulscan-titel{margin:0;font-family:var(--ul-kopfont);font-size:26px;font-weight:700;line-height:1.1;color:#fff}
.ulscan-slot{margin:0;display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ul-licht)}
.ulscan-slot .ul-ic{color:var(--ul-oranje-op);flex:none}

/* kaarten */
.ulscan-kaart{background:var(--ul-kaart);border:1px solid var(--ul-rand);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:8px;min-width:0;box-sizing:border-box}
.ulscan-eyebrow2{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--ul-gedempt);font-weight:600}
.ulscan-gever{justify-content:space-between}
.ulscan-gever .ul-seg-btn{min-width:44px}
.ulscan-vast .ul-seg-btn:not(.on){opacity:.45;pointer-events:none}
.ulscan-status{margin:0;font-size:13px;color:var(--ul-gedempt);display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.ulscan-status b{color:var(--ul-tekst);font-size:15px}

/* biedbox: 1–7, dan ♣ ♦ ♥ ♠ SA pas dbl/rdbl — twee rijen van zeven, zoals het artboard */
.ulscan-bbxrij{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.ulscan-bbx{border:1px solid var(--ul-rand);background:var(--ul-kaart);color:var(--ul-tekst);font-family:inherit;font-size:15px;font-weight:700;
  border-radius:8px;min-height:44px;min-width:0;padding:0;cursor:pointer;display:flex;align-items:center;justify-content:center}
.ulscan-bbx:hover:not(:disabled){border-color:var(--ul-navy)}
.ulscan-bbx:focus-visible{outline:3px solid var(--ul-oranje);outline-offset:2px}
.ulscan-bbx.on{background:var(--ul-navy);border-color:var(--ul-navy);color:#fff}
.dark .ulscan-bbx.on{background:var(--ul-tekst);color:var(--ul-creme)}
.ulscan-bbx:disabled{cursor:default;opacity:.35}
.ulscan-k-c{color:var(--ul-su-c)} .ulscan-k-d{color:var(--ul-su-d)} .ulscan-k-h{color:var(--ul-su-h)} .ulscan-k-s{color:var(--ul-su-s)}
.ulscan-pas{color:var(--ul-gedempt);font-size:14px}
.ulscan-dbl{color:var(--ul-rood);font-size:14px}

/* Bridgemate-tegels */
.ulscan-tegels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.ulscan-tegel{background:var(--ul-kaart);border:1px solid var(--ul-rand);border-radius:12px;padding:10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.ulscan-tegel-lbl{font-size:11px;color:var(--ul-gedempt)}
.ulscan-tegel-num{font-size:16px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ulscan-min{color:var(--ul-rood)}
.ulscan-noot{margin:0;font-size:13px;color:var(--ul-gedempt);line-height:1.45}
.ulscan-midden{text-align:center}
.ulscan-melding{margin:0;border-radius:10px;padding:8px 10px;font-size:13px}
.ulscan-melding.ok{background:var(--ul-groen-tint);color:var(--ul-groen)}
.ulscan-melding.fout{background:var(--ul-oranje-tint);border:1px solid var(--ul-oranje-rand);color:var(--ul-oranje-tekst)}

/* knoppen onderaan */
.ulscan-voet{display:flex;flex-direction:column;gap:8px;margin-top:4px}
.ulscan-knop{border:0;background:var(--ul-oranje-knop);color:#fff;font-family:inherit;font-size:16px;font-weight:600;border-radius:12px;padding:14px;
  min-height:52px;cursor:pointer;text-align:center;text-decoration:none;display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.ulscan-knop:hover:not(:disabled){background:var(--ul-oranje)}
.ulscan-knop:disabled{opacity:.45;cursor:default}
.ulscan-knoppen{display:flex;gap:8px}
.ulscan-knop2{flex:1;border:1px solid var(--ul-rand-knop);background:var(--ul-kaart);color:var(--ul-navy);font-family:inherit;font-size:14px;font-weight:600;
  border-radius:12px;padding:12px;min-height:48px;cursor:pointer}
.dark .ulscan-knop2{color:var(--ul-tekst)}
.ulscan-knop2:disabled{opacity:.45;cursor:default}
.ulscan-knop:focus-visible,.ulscan-knop2:focus-visible{outline:3px solid var(--ul-oranje);outline-offset:2px}

/* terugknop boven de kop: .n-terug is gemaakt voor de navy schilkop; hier staat hij op crème */
.n-terug.ulscan-terug{color:var(--ul-navy);opacity:1;font-weight:600}
.dark .n-terug.ulscan-terug{color:var(--ul-tekst)}

/* spelscherm › Bieden: per tafel een klein raster */
.ulscan-bieden{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.ulscan-bieden-kop{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ul-gedempt);font-weight:600;margin-bottom:6px}
.ulscan-bieden-bron{text-transform:none;letter-spacing:0;font-weight:500;background:var(--ul-chip);border-radius:999px;padding:2px 8px;margin-left:6px}