/* Zinnenbouwer: eigen thema (bouwplaats). Maten in scènepixels (scène 1600 × 900, zie gedeeld/spelbasis-v1.css). */
:root { --mlp-vak: var(--mlp-taal, #3e63dd); --sb-hoofd: #d9822b; --sb-knop: #7a4a12; --sb-titel: #ffd84a; --sb-titelrand: #5a3510; --sb-rand: #d9822b;
  --sb-lucht: linear-gradient(#bfe6ff 0%, #e3f4ff 50%, #f1d9a6 51%, #e2c07f 100%); }
.sb-stage .sb-titel { font-size: 112px; }

/* opdrachtkaart */
.sb-stage .zb-kaart { display: flex; align-items: center; gap: 24px; padding: 10px 18px 10px 14px; min-height: 130px; border-radius: 30px; background: rgba(255,255,255,.96); box-shadow: 0 8px 0 rgba(0,0,0,.14); max-width: 1100px; }
.zb-plaatje { width: 130px; height: 130px; object-fit: contain; }
.zb-emoji { font-size: 100px; line-height: 1; width: 130px; text-align: center; }
.sb-stage .zb-opdracht { margin: 0; font-size: 40px; font-weight: 700; color: #16313b; max-width: 700px; }
.sb-stage .zb-luister { position: static; width: 96px; height: 96px; flex: none; }

/* steiger met plekken */
.zb-bouw { position: relative; padding: 18px 26px 30px; border-radius: 20px; background: repeating-linear-gradient(90deg, transparent 0 236px, rgba(122,74,18,.35) 236px 246px);
  border-bottom: 18px solid #b07a3c; box-shadow: 0 10px 0 rgba(0,0,0,.12); }
.zb-steiger { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: 12px; max-width: 1180px; }
.zb-plek { min-width: 150px; height: 104px; border-radius: 14px; border: 5px dashed rgba(90,53,16,.45); background: rgba(255,255,255,.55); display: flex; }
.zb-plek.vol { border-color: transparent; background: none; min-width: 0; }
.zb-tekenplek { min-width: 96px; }
.zb-eindteken { align-self: flex-end; font-size: 80px; font-weight: 700; color: #5a3510; line-height: 1; margin-left: -4px; }
.zb-steiger.af .zb-blok { animation: zb-hop .5s ease both; }
@keyframes zb-hop { 40% { transform: translateY(-14px); } }

/* blokken */
.zb-onder { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px; max-width: 1220px; }
.zb-stapel, .zb-tekens { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; min-height: 104px; }
.zb-tekens { padding-left: 20px; border-left: 6px dotted rgba(90,53,16,.35); }
.sb-stage .zb-blok { min-width: 104px; height: 104px; padding: 0 24px; border-radius: 14px; border: 0; cursor: pointer; touch-action: manipulation;
  background: var(--k, #3e63dd); color: #fff; font: 700 50px/1 var(--mlp-letter); letter-spacing: 1px;
  box-shadow: inset 0 -10px 0 rgba(0,0,0,.18), 0 6px 0 rgba(0,0,0,.2); text-shadow: 0 2px 0 rgba(0,0,0,.25); }
.sb-stage .zb-blok.zb-teken { background: #fff; color: #16313b; text-shadow: none; font-size: 64px; min-width: 96px; border: 5px solid #16313b; }
.sb-stage .zb-blok:active { transform: translateY(4px); box-shadow: inset 0 -10px 0 rgba(0,0,0,.18), 0 2px 0 rgba(0,0,0,.2); }
.sb-stage .zb-blok:focus-visible { outline: 8px solid var(--mlp-warm, #f2b705); outline-offset: 4px; }
.zb-blok.goed { outline: 6px solid var(--mlp-goed, #2e9d5b); outline-offset: 3px; }
.zb-blok.fout { outline: 6px solid var(--mlp-fout, #d64545); outline-offset: 3px; animation: zb-wiebel .45s ease 2; }
.zb-blok.weg { opacity: .25; pointer-events: none; text-decoration: line-through; }
@keyframes zb-wiebel { 25% { margin-left: -8px; } 75% { margin-left: 8px; } }
.sb-stage .zb-klaar { min-width: 220px; height: 96px; font-size: 40px; }
.zb-klaar[disabled] { opacity: .45; }

body.zonder-beweging .zb-blok { animation: none !important; transition: none !important; }
/* ballon linksboven (boven Pien), zodat hij de steiger niet bedekt */
.sb-stage[data-scherm="ronde"] .sb-ballon { left: 40px; top: 150px; bottom: auto; max-width: 400px; font-size: 28px; }