/* Mijn Leerplein - spelbasis-v1.css (5 oktober 2026)
   Opmaak van de speelscène (spelbasis-v1.js): vaste scène van 1600 × 900 die meeschaalt, zoals Woordkluis,
   Speurneus en Tafelarena. Alle maten hieronder zijn in scènepixels. Knoppen minstens 88 px, zodat ze ook in
   het kleinste ingebedde venster (1100 × 490, schaal 0,54) nog 48 px zijn.
   Het eigen thema per spel (kleuren via --sb-*, wereld, figuren) staat in de style.css van het spel. */

body.sb { margin: 0; overflow: hidden; background: var(--sb-rand, #1d3b45); }
.sb-buiten { position: fixed; inset: 0; overflow: hidden; background: var(--sb-rand, #1d3b45); }
.sb-stage { position: absolute; left: 0; top: 0; width: 1600px; height: 900px; transform-origin: 0 0; overflow: hidden;
  font-family: var(--mlp-letter); color: var(--mlp-tekst); font-size: 30px; line-height: 1.35; user-select: none; -webkit-user-select: none; }
.sb-bg { position: absolute; inset: 0; background: var(--sb-lucht, linear-gradient(#cfeefc, #eaf8ff 55%, #cdeab9 56%, #b6dfa1)) center / cover no-repeat; }
.sb-stage[data-scherm="ronde"] .sb-bg::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,.12); }
.sb-scene { position: absolute; inset: 0; }
.sb-draai { display: none; }
body.sb-staand .sb-draai { display: block; position: fixed; left: 8px; right: 8px; bottom: 8px; z-index: 50; padding: 10px 14px; border-radius: 12px; background: #fff; font: 700 16px/1.3 var(--mlp-letter); color: var(--mlp-tekst); text-align: center; box-shadow: 0 4px 12px rgba(0,0,0,.25); }

/* ronde knoppen in de hoeken (terug links; hulp, opnieuw luisteren en geluid rechts) */
.sb-hoek { position: absolute; top: 22px; display: flex; gap: 16px; z-index: 20; }
.sb-links { left: 24px; } .sb-rechts { right: 24px; }
.sb-rond { width: 92px; height: 92px; border-radius: 50%; border: 4px solid #fff; background: var(--sb-knop, #16313b); color: #fff; display: grid; place-items: center; cursor: pointer; box-shadow: 0 6px 0 rgba(0,0,0,.25); padding: 0; touch-action: manipulation; }
.sb-rond svg { width: 46px; height: 46px; stroke: currentColor; fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sb-rond:active { transform: translateY(4px); box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.sb-rond:focus-visible, .sb-knop:focus-visible, .sb-plek:focus-visible { outline: 6px solid var(--mlp-warm); outline-offset: 4px; }
.sb-rond[aria-pressed="false"] { opacity: .55; }
.sb-rond.sb-hulp { background: var(--mlp-warm); color: #4a2a00; }

/* grote knoppen */
.sb-stage .sb-knop { min-height: 96px; min-width: 200px; padding: 14px 40px; border-radius: 26px; border: 4px solid #fff; background: #fff; color: var(--mlp-tekst); font: 700 36px/1.1 var(--mlp-letter); cursor: pointer; box-shadow: 0 8px 0 rgba(0,0,0,.22); touch-action: manipulation; }
.sb-stage .sb-knop.sb-hoofd { background: var(--sb-hoofd, var(--mlp-hoofd)); color: #fff; }
.sb-knop:active { transform: translateY(5px); box-shadow: 0 3px 0 rgba(0,0,0,.22); }
.sb-onder { position: absolute; right: 40px; bottom: 34px; display: flex; gap: 22px; z-index: 15; }

/* figuur met spreekballon */
.sb-figuur { position: absolute; z-index: 5; pointer-events: none; transition: left .4s, bottom .4s, height .4s; }
.sb-figuur img { height: 100%; width: auto; display: block; filter: drop-shadow(0 10px 12px rgba(0,0,0,.25)); }
.sb-figuur[data-plek="groot"] { left: 70px; bottom: 0; height: 700px; }
.sb-figuur[data-plek="hoek"] { left: 20px; bottom: 0; height: 430px; }
.sb-figuur[data-plek="ronde"] { left: 10px; bottom: 0; height: 380px; }
.sb-figuur-leeg { display: none; }
.sb-figuur.sb-geen-figuur .sb-figuur-leeg { display: block; position: absolute; left: 30px; bottom: 0; width: 170px; height: 70%; border-radius: 90px 90px 30px 30px; background: rgba(255,255,255,.55); border: 4px dashed rgba(22,49,59,.35); }
.sb-ballon { position: absolute; z-index: 16; max-width: 560px; padding: 22px 30px; border-radius: 30px; background: #fff; color: var(--mlp-tekst); font-size: 32px; font-weight: 700; line-height: 1.25; box-shadow: 0 8px 18px rgba(0,0,0,.18); }
.sb-ballon::after { content: ''; position: absolute; left: 50px; bottom: -26px; border: 18px solid transparent; border-top: 22px solid #fff; border-bottom: 0; }
.sb-stage[data-scherm="start"] .sb-ballon { left: 330px; top: 430px; max-width: 400px; }
.sb-stage[data-scherm="kaart"] .sb-ballon { left: 230px; bottom: 380px; max-width: 420px; }
.sb-stage[data-scherm="ronde"] .sb-ballon, .sb-stage[data-scherm="klaar"] .sb-ballon { left: 170px; bottom: 360px; max-width: 520px; font-size: 30px; }
.sb-ballon.sb-in { animation: sb-ballon .25s ease-out; }
@keyframes sb-ballon { from { transform: scale(.85); opacity: 0; } }

/* startscherm */
.sb-titelblok { position: absolute; left: 640px; right: 60px; top: 120px; text-align: center; }
.sb-stage .sb-titel { margin: 0; font-size: 132px; line-height: 1; font-weight: 700; color: var(--sb-titel, #fff); letter-spacing: 2px;
  -webkit-text-stroke: 4px var(--sb-titelrand, #16313b); paint-order: stroke fill; text-shadow: 0 8px 0 var(--sb-titelrand, #16313b), 0 14px 24px rgba(0,0,0,.25); }
.sb-stage .sb-ondertitel { margin: 18px 0 0; font-size: 36px; font-weight: 700; color: #fff; text-shadow: 0 3px 6px rgba(0,0,0,.55); }
.sb-paneel { position: absolute; background: rgba(255,255,255,.94); border: 5px solid #fff; border-radius: 34px; box-shadow: 0 14px 30px rgba(0,0,0,.22); padding: 30px 40px; }
.sb-startpaneel { left: 760px; right: 120px; top: 400px; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.sb-startpaneel > .sb-label, .sb-startpaneel > .sb-doel, .sb-startpaneel > .sb-schakel { grid-column: 1 / -1; }
.sb-label { margin: 0; font-size: 26px; font-weight: 700; color: var(--mlp-zacht); }
.sb-merk { color: var(--mlp-hoofd); }
.sb-doel { margin: 0; font-size: 30px; }
.sb-schakel { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 96px; padding: 10px 22px; border-radius: 22px; background: var(--mlp-vlak); cursor: pointer; }
.sb-schakel small { font-size: 22px; color: var(--mlp-zacht); }
.sb-schakel input { appearance: none; -webkit-appearance: none; flex: none; width: 104px; height: 60px; border-radius: 999px; background: #c5d3d6; position: relative; cursor: pointer; margin: 0; }
.sb-schakel input::after { content: ''; position: absolute; top: 7px; left: 7px; width: 46px; height: 46px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 2px 4px rgba(0,0,0,.2); }
.sb-schakel input:checked { background: var(--mlp-hoofd); }
.sb-schakel input:checked::after { transform: translateX(44px); }
.sb-stage .sb-startpaneel .sb-knop { width: 100%; min-width: 0; }
.sb-stage .sb-startpaneel .sb-hoofd { order: 0; }

/* levelkaart */
.sb-stage .sb-kaartkop { position: absolute; left: 0; right: 0; top: 30px; margin: 0; text-align: center; font-size: 56px; color: #fff; -webkit-text-stroke: 3px var(--sb-titelrand, #16313b); paint-order: stroke fill; text-shadow: 0 5px 0 var(--sb-titelrand, #16313b); }
.sb-stage .sb-plek { position: absolute; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 6px; background: none; border: 0; padding: 0; cursor: pointer; font-family: var(--mlp-letter); touch-action: manipulation; }
.sb-plek-rond { width: 150px; height: 150px; border-radius: 50%; display: grid; place-items: center; font-size: 72px; font-weight: 700; color: #fff; background: var(--sb-hoofd, var(--mlp-hoofd)); border: 8px solid #fff; box-shadow: 0 10px 0 rgba(0,0,0,.25), 0 16px 26px rgba(0,0,0,.25); }
.sb-plek.nu .sb-plek-rond { animation: sb-puls 1.6s ease-in-out infinite; border-color: var(--mlp-warm); }
@keyframes sb-puls { 50% { transform: scale(1.07); } }
.sb-plek.dicht .sb-plek-rond { background: #8a9a9e; }
.sb-slot { width: 64px; height: 64px; stroke: #fff; fill: none; stroke-width: 2.2; }
.sb-plek-naam { padding: 6px 18px; border-radius: 16px; background: #fff; font-size: 28px; font-weight: 700; color: var(--mlp-tekst); box-shadow: 0 4px 0 rgba(0,0,0,.18); white-space: nowrap; }
.sb-plek-sterren { font-size: 34px; letter-spacing: 3px; line-height: 1; text-shadow: 0 2px 3px rgba(0,0,0,.35); }
.sb-ster { color: rgba(255,255,255,.75); } .sb-ster.aan { color: #ffc531; }
.sb-schud { animation: sb-schud .35s; }
@keyframes sb-schud { 25% { margin-left: -8px; } 75% { margin-left: 8px; } }

/* ronde */
.sb-voortgang { position: absolute; left: 400px; right: 400px; top: 50px; gap: 10px; }
.sb-voortgang i { height: 20px; border-radius: 10px; background: rgba(255,255,255,.8); box-shadow: inset 0 0 0 3px rgba(22,49,59,.25); }
.sb-tijd { position: absolute; left: 400px; right: 400px; top: 84px; height: 16px; border-radius: 8px; background: rgba(255,255,255,.7); overflow: hidden; }
.sb-tijd i { display: block; height: 100%; background: var(--mlp-warm); transform-origin: left; transition: transform .1s linear; }
.sb-speelveld { position: absolute; left: 330px; right: 40px; top: 130px; bottom: 150px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; }
.sb-meld { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* afronding */
.sb-afronding { left: 470px; right: 170px; top: 140px; text-align: center; }
.sb-stage .sb-afronding h2 { margin: 0 0 6px; font-size: 64px; }
.sb-grootster { font-size: 110px; line-height: 1; letter-spacing: 10px; }
.sb-grootster .sb-ster { color: #d7e0e2; }
.sb-afronding ul { display: inline-block; text-align: left; margin: 14px 0; padding-left: 36px; font-size: 32px; }
.sb-nieuw { font-weight: 700; color: var(--mlp-goed); font-size: 34px; margin: 6px 0; }
.sb-munttekst { font-size: 24px; color: var(--mlp-zacht); margin: 6px 0 0; }
.sb-afronding .mlp-munten { font-size: 34px; padding: 10px 26px; }

/* film */
.sb-film { position: absolute; inset: 0; z-index: 60; background: #000; display: grid; place-items: center; }
.sb-film video { width: 100%; height: 100%; object-fit: contain; }
.sb-sla { position: absolute; right: 40px; bottom: 40px; }

/* slepen of tikken */
.sb-sleep { touch-action: none; cursor: grab; }
.sb-kloon { position: absolute; z-index: 90; pointer-events: none; margin: 0 !important; opacity: .95; filter: drop-shadow(0 14px 16px rgba(0,0,0,.25)); }
.sb-weg { opacity: .3; }
.sb-gekozen { outline: 8px solid var(--mlp-warm) !important; outline-offset: 6px; }
.sb-doel.sb-wacht { outline: 6px dashed var(--mlp-hoofd-licht); outline-offset: 6px; }
.sb-doel.sb-boven { outline: 8px solid var(--mlp-hoofd); outline-offset: 6px; }

.zonder-beweging .sb-plek.nu .sb-plek-rond, .zonder-beweging .sb-ballon.sb-in { animation: none; }