fix: centreer letter- en cijferdoelvakken

Gewijzigde functionaliteiten:

- Centreert doelvakken in letter-, reken-, klok-, geld-, plaatswaarde- en wereldwidgets.

- Houdt lange woordrijen scrollbaar zonder de eerste vakken af te snijden.

- Centreert kleinere geplaatste cijferblokken binnen hun doelvak.

- Verwijdert de links uitgelijnde compacte woordrij.

Tests: 160 geslaagd.

VERSION

@@ -1 +1 @@
-0.4.51-beta
+0.4.52-beta

public/css/teach.css

@@ -813,7 +813,7 @@
   }
   .slot.droptarget{border-color:var(--green); background:#e3f6ea; transform:scale(1.06);}
   .slot .ghost{font-size:30px; font-weight:800; color:#c2cddc; height:40px; display:flex; align-items:center;}
-  .slot.filled{border-style:solid; border-color:transparent; background:transparent; padding:0;}
+  .slot.filled{border-style:solid; border-color:transparent; background:transparent; padding:0; justify-content:center;}
   .slot.filled .ghost,.slot.filled .slot-dots{display:none;}
   .slot.shake{animation:shake .35s;}
   @keyframes shake{
@@ -2003,6 +2003,16 @@ body.dark .world-fact{background:#1d3b2a;color:#a9e5b7}body.dark .world-fact .wo
 .place-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.place-actions .tbtn:not(.ghost){background:var(--green);color:#fff}
 @media(max-width:480px){.place-task-card{padding:12px}.place-level-control>span{display:none}.place-top{gap:5px}.place-digit-tray.lg-tray{gap:7px;padding:9px}}
 
+/* Letter- en cijferdoelen staan intrinsiek in het midden. safe center
+   valt bij een te lange woordrij terug op het begin van de scrollstrook,
+   zodat de eerste vakken bereikbaar blijven in plaats van links af te snijden. */
+.lg-slots,.mt-slots,.clock-answer-slots,.money-answer-slots,.place-answer-slots,.world-spell-word{
+  width:max-content;max-width:100%;margin-inline:auto;justify-content:safe center;
+}
+.lg-slots,.mt-slots{overflow-x:auto;scrollbar-width:thin}
+.lg-slots>.slot,.mt-slots>.slot,.clock-answer-slots>.slot,.money-answer-slots>.slot,
+.world-spell-word>.slot,.place-answer-slots>.place-slot-col{flex:none}
+
 /* ============================================================
    Kindvriendelijke spel-laag
    Eén accent, duidelijke missies en tastbare bediening voor elk widgettype.
@@ -2061,7 +2071,7 @@ body.dark .world-fact{background:#1d3b2a;color:#a9e5b7}body.dark .world-fact .wo
   .lg-pic{font-size:clamp(42px,16cqi,60px)}
   .lg-pic img{width:clamp(58px,20cqi,76px);height:clamp(58px,20cqi,76px)}
   .lg-instr{padding:6px 8px;font-size:13px}
-  .lg-slots{width:100%;max-width:100%;justify-content:flex-start;gap:7px;overflow-x:auto;padding:3px 1px 8px}
+  .lg-slots{gap:7px;overflow-x:auto;padding:3px 1px 8px}
   .lg-tray{gap:7px;min-height:0;max-height:44%;overflow:auto;padding:8px}
   .lg-kbd{gap:5px;padding:7px}
   .lg-kbd button{width:36px;height:42px;font-size:18px}

public/js/core.js

@@ -2,7 +2,7 @@
 "use strict";
 /* version — shown until /api/version resolves (or if the fetch fails, e.g. offline).
    Kept in sync by hand with the VERSION file at the repo root on every release. */
-const VERSION = "0.4.51-beta";
+const VERSION = "0.4.52-beta";
 (function(){
   const tag = document.getElementById("verTag");
   tag.textContent = "v"+VERSION;

test/widgets.test.js

@@ -303,6 +303,26 @@ test('elk geldspel gebruikt geldige niveaugrenzen en realistische productcategor
  }
 });
 
+test('letter- en cijferdoelvakken blijven gecentreerd en lange woorden blijven bereikbaar',async()=>{
+ const css=await readFile('public/css/teach.css','utf8');
+ const start=css.indexOf('/* Letter- en cijferdoelen staan intrinsiek in het midden.');
+ const end=css.indexOf('/* ============================================================',start);
+ assert.ok(start>0&&end>start,'gedeelde doelvakregel ontbreekt');
+ const centered=css.slice(start,end);
+ for(const selector of [
+  '.lg-slots','.mt-slots','.clock-answer-slots','.money-answer-slots',
+  '.place-answer-slots','.world-spell-word',
+ ])assert.ok(centered.includes(selector),selector+' mist expliciete centrering');
+ for(const declaration of [
+  'width:max-content','max-width:100%','margin-inline:auto','justify-content:safe center',
+  'overflow-x:auto','scrollbar-width:thin',
+ ])assert.ok(centered.includes(declaration),declaration+' ontbreekt bij de doelvakken');
+ assert.match(css,/\.slot\.filled\{[^}]*justify-content:center/,'geplaatst blok staat niet midden in het vak');
+ const compact=css.slice(css.indexOf('@container widget (max-width:520px)'));
+ assert.doesNotMatch(compact,/\.lg-slots\{[^}]*width:100%/,'compacte woordrij mag niet links worden uitgerekt');
+ assert.doesNotMatch(compact,/\.lg-slots\{[^}]*justify-content:flex-start/,'compacte woordrij mag niet links worden vastgezet');
+});
+
 test('alle geregistreerde widgets hebben mobiele dekking en passen op een 320px-bord',async()=>{
  const [board,pupil,css]=await Promise.all([
   readFile('public/js/board.js','utf8'),