/* Bouwmeester: eigen thema (bouwterrein, blauwdruk). Maten in scènepixels (scène 1600 × 900). */
:root { --mlp-vak: var(--mlp-rekenen); --sb-hoofd: #2b6cb0; --sb-knop: #1d3f6e; --sb-titel: #ffd84a; --sb-titelrand: #1d3f6e; --sb-rand: #2b6cb0;
  --sb-lucht: linear-gradient(#cfe8ff 0%, #eaf5ff 50%, #b9dc9a 51%, #8fc56f 100%); }
.sb-stage .sb-titel { font-size: 120px; }
.sb-stage .bm-opdracht { margin: 0; padding: 10px 30px; border-radius: 26px; background: rgba(255,255,255,.95); font-size: 36px; font-weight: 700; text-align: center; box-shadow: 0 6px 0 rgba(0,0,0,.12); max-width: 1200px; }
.bm-soort { display: inline-block; padding: 2px 16px; margin-right: 8px; border-radius: 14px; color: #fff; font-size: 32px; }
.bm-soort.opp { background: #2e9d5b; }
.bm-soort.omtrek { background: #c8742c; }
.bm-plaat { width: 900px; height: 380px; padding: 6px 20px; border-radius: 26px; background: rgba(255,255,255,.88); box-shadow: 0 8px 0 rgba(0,0,0,.12);
  background-image: linear-gradient(rgba(43,108,176,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(43,108,176,.07) 1px, transparent 1px); background-size: 30px 30px; }
.bm-svg { width: 100%; height: 100%; display: block; overflow: visible; }
.bm-cel { fill: #e9edf0; stroke: none; transition: fill .2s; shape-rendering: crispEdges; }
.bm-cel.lijn { stroke: #8a99a3; stroke-width: 2; }
.bm-vlak.tegels .bm-cel { fill: #e6d3b3; }
.bm-vlak.tegels .bm-cel.lijn { stroke: #a88b5f; stroke-width: 3; }
.bm-vlak.gras .bm-cel { fill: #a8d98a; }
.bm-vlak.gras .bm-cel.lijn { stroke: rgba(60,120,40,.35); }
.bm-vlak.water .bm-cel { fill: #8fd3f4; }
.bm-vlak.vloer .bm-cel { fill: #f3dcb0; }
.bm-vlak.vloer .bm-cel.lijn { stroke: #b58b4f; stroke-width: 3; }
.bm-cel.aan { fill: #ffd84a !important; }
.bm-cel.hint { fill: #fff3c4 !important; stroke: #f2b705 !important; stroke-width: 3; }
.bm-rand line { stroke-linecap: round; transition: stroke .2s; }
.bm-rand.muur line { stroke: #1d3f6e; stroke-width: 7; }
.bm-rand.hek line { stroke: #8b5a2b; stroke-width: 10; stroke-dasharray: 2 8; }
.bm-rand line.aan { stroke: #e4473a !important; stroke-dasharray: none; stroke-width: 10; }
.bm-rand line.hint { stroke: #f2b705 !important; stroke-width: 10; }
.bm-paal { fill: #6b4220; }
.bm-maten text { font: 700 34px var(--mlp-letter); fill: #1d3f6e; paint-order: stroke; stroke: #fff; stroke-width: 6px; }
.bm-telgetal { font: 700 26px var(--mlp-letter); fill: #5a3510; pointer-events: none; }
.bm-keuzes { display: flex; gap: 22px; justify-content: center; }
.sb-stage .bm-keuze { min-width: 200px; height: 104px; padding: 0 24px; border-radius: 24px; border: 6px solid #fff; background: var(--sb-hoofd); color: #fff; cursor: pointer;
  font: 700 40px var(--mlp-letter); box-shadow: 0 8px 0 rgba(0,0,0,.22); touch-action: manipulation; }
.bm-keuze b { font-size: 52px; }
.sb-stage .bm-keuze:active { transform: translateY(4px); box-shadow: 0 4px 0 rgba(0,0,0,.22); }
.sb-stage .bm-keuze:focus-visible { outline: 8px solid var(--mlp-warm, #f2b705); outline-offset: 4px; }
.bm-keuze[data-uitslag="goed"] { background: var(--mlp-goed, #2e9d5b); }
.bm-keuze[data-uitslag="fout"] { background: #e9eef0; color: #8a9aa0; border-style: dashed; }
.sb-stage .sb-speelveld { gap: 18px; }
body.zonder-beweging .bm-cel, body.zonder-beweging .bm-rand line { transition: none; }
/* ballon linksboven (boven Daan), zodat hij de tekening niet bedekt */
.sb-stage[data-scherm="ronde"] .sb-ballon { left: 30px; top: 150px; bottom: auto; max-width: 380px; font-size: 28px; }