/* Klimba: Rekenland, Plus en min. Bouwt voort op de stijlen van het tafelmenu en de les. */

/* 8 stappen: 4 per rij (telefoon, tablet), 8 naast elkaar op een breed scherm */
#pmGrid.tables{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:1000px) and (orientation:landscape){#pmGrid.tables{grid-template-columns:repeat(8,minmax(0,1fr))}}
#pmGrid.tables.five{grid-template-columns:repeat(5,minmax(0,1fr))}
#pmGrid.tables.three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:1000px) and (orientation:landscape){#pmGrid.tables.three{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(min-width:1000px) and (orientation:landscape){#pmGrid.tables.five{grid-template-columns:repeat(10,minmax(0,1fr))}}
#pmGrid .tbl .n{font-size:clamp(20px,min(6vw,4.4vh),44px)}
#pmGrid .tbl .pml{font:800 clamp(10.5px,min(2.9vw,1.6vh),15px)/1.1 "Nunito",sans-serif;text-align:center;padding:0 2px}
#pmGrid .tbl[aria-pressed="true"] .pml{color:#fff}
#pmGrid.learn .tbl .pml{color:#fff}

/* les: 3 stappen */
.pm-lsteps{grid-template-columns:repeat(3,1fr)}
.pm-rek{width:100%;display:flex;justify-content:center}
.pm-rek svg{width:min(100%,440px,58vh);height:auto}
#helper .pm-rek svg{width:min(100%,400px)}


/* diploma's */
.pm-medals{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(min-width:700px){.pm-medals{grid-template-columns:repeat(8,minmax(0,1fr))}}
/* twee rijen medailles (tafels en plus en min) moeten samen op het scherm passen */
#diplomaScreen .medal svg{max-width:clamp(40px,min(12vw,7.6vh),110px)}
#diplomaScreen .medals{gap:clamp(6px,1vh,14px) clamp(6px,1.4vw,14px)}
#diplomaScreen .bigdip{margin-bottom:clamp(8px,1.4vh,20px)}
.diptabs{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);margin:0 0 clamp(10px,1.8vh,20px)}
.dipgroup.hidden{display:none}

/* delen: stippen in groepjes */
.pm-rek svg.dlgroups{width:min(100%,420px);height:auto;max-height:min(40vh,360px)}
#helper .pm-rek svg.dlgroups{max-height:min(34vh,300px)}

/* plus en min tot 100: lege getallenlijn met sprongen */
.pm-rek svg.numline{width:min(100%,520px);height:auto;max-height:min(30vh,240px)}

/* dubbelen en halveren: twee groepjes blokken */
.pm-rek svg.dhblocks{width:min(100%,420px);height:auto;max-height:min(30vh,240px)}

/* grote keersommen: rechthoek-schema */
.pm-rek svg.gkschema{width:min(100%,460px);height:auto;max-height:min(30vh,250px)}
/* 6 tabbladen op het diplomascherm: op een smal scherm 2 rijen van 3 */
.diptabs .shopsec{font-size:clamp(11px,min(3.2vw,1.7vh),15px);line-height:1.15;padding-left:4px;padding-right:4px}
@media(max-width:699px){.diptabs{grid-auto-flow:row;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px}.diptabs .shopsec{font-size:clamp(10px,2.8vw,13px);padding:4px 2px}.diptabs .shopsec .e{font-size:clamp(16px,2.6vh,22px)}}
/* 6 medailles: 2 rijen van 3 (breed: alles naast elkaar) */
#gkMedals,#gtMedals,#gdMedals,#brMedals{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(min-width:700px){#gkMedals,#gtMedals,#gdMedals,#brMedals{grid-template-columns:repeat(6,minmax(0,1fr))}}

/* ---------- UI/UX-controle (28-09-2026) ---------- */
/* diploma's: tabbladen 3 per rij met leesbare namen, medailles iets grotere letters */
@media(max-width:699px){
  .diptabs{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .diptabs .shopsec{flex-direction:row;justify-content:flex-start;gap:5px;font-size:clamp(12px,3.4vw,14px);padding:5px 6px;text-align:left;min-height:0}
  .diptabs .shopsec .e{font-size:clamp(15px,2.4vh,20px)}
}
#diplomaScreen .medal b{font-size:clamp(12px,min(3.3vw,1.8vh),16px)}
/* telefoon: minder lezen in het menu; de knoppen spreken voor zich, de regel onderaan zegt wat je oefent */
@media(max-aspect-ratio:3/4){
  #pmScreen .step{display:none}
  #pmScreen .modes{margin-top:6px}
  #pmScreen .mode{padding-top:5px;padding-bottom:5px}
  #pmScreen .mode .ico{width:clamp(26px,7vw,40px)}
}
@media(max-width:699px){.diptabs .shopsec{overflow-wrap:normal;hyphens:none}}
@media(max-width:380px){.diptabs .shopsec{font-size:12px;gap:4px;padding-left:5px;padding-right:4px}}
@media(max-width:400px){.diptabs .shopsec[data-dip="keersommen"]{font-size:11.5px;letter-spacing:-.35px}}   /* "keersommen" past dan in de derde kolom */

/* ---------- menu ontwerp A (28-09-2026): tegels, Door elkaar, stapscherm ---------- */
/* nog niet begonnen: witte tegel met gekleurde rand */
.tables.learn .tbl.fresh{background:#fff;color:var(--c);box-shadow:0 3px 0 rgba(35,48,82,.08)}
#pmGrid.learn .tbl.fresh .pml{color:var(--c)}
.dipmini{font-size:.95em;margin-left:3px;line-height:1}
.mixbtn{display:flex;flex-direction:column;align-items:center;gap:1px;width:100%;margin-top:clamp(10px,1.6vh,18px);border:3px dashed #c9cfe0;background:#fff;
  border-radius:clamp(16px,2.4vh,24px);padding:clamp(7px,1.1vh,12px);cursor:pointer;color:var(--ink);font:800 clamp(16px,min(4.6vw,2.6vh),26px)/1.1 "Baloo 2",sans-serif}
.mixbtn small{font:700 clamp(12px,1.6vh,15px) "Nunito",sans-serif;opacity:.6}
.mixline{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,1vh,10px)}
.mixgo{display:flex;gap:clamp(6px,1.4vw,12px);align-items:center;justify-content:center;flex-wrap:wrap}
.mixgo .go{min-width:0;padding-left:clamp(12px,3vw,24px);padding-right:clamp(12px,3vw,24px)}
.mixgo .go:disabled{opacity:.45}
/* stapscherm: wat ga je doen? */
#stepScreen .scroller{display:flex;flex-direction:column;gap:clamp(10px,1.6vh,18px)}
.sthero{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--c,#3aa9e0);color:#fff;border-radius:clamp(20px,3vh,30px);
  padding:clamp(10px,1.8vh,22px) 12px;text-align:center;box-shadow:0 6px 0 rgba(35,48,82,.16)}
.stico{display:inline-block;width:1.05em;height:1.05em;vertical-align:middle}
#pmGrid .tbl .n:has(.stico){width:auto}
#pmGrid .tbl .n .stico{width:1.45em;height:1.45em}
.sthero .sym .stico{width:1.3em;height:1.3em}
.sthero .sym{font:800 clamp(30px,min(9vw,5.4vh),60px)/1 "Baloo 2",sans-serif}
.sthero b{font:800 clamp(21px,min(6.2vw,3.6vh),40px)/1.1 "Baloo 2",sans-serif}
.sthero .dipok{font-weight:800;font-size:clamp(12.5px,1.8vh,16px);background:rgba(255,255,255,.22);border-radius:99px;padding:2px 10px;margin-top:4px}
.acts{display:flex;flex-direction:column;gap:clamp(8px,1.3vh,14px)}
.act{display:flex;align-items:center;gap:clamp(10px,2.4vw,16px);width:100%;border:3px solid rgba(35,48,82,.08);background:#fff;color:var(--ink);font-family:inherit;text-align:left;cursor:pointer;
  border-radius:clamp(16px,2.4vh,24px);padding:clamp(8px,1.3vh,14px) clamp(12px,3vw,18px);min-height:clamp(56px,8.6vh,96px);box-shadow:0 5px 0 rgba(35,48,82,.12)}
.act:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(35,48,82,.12)}
.act .ai{font-size:clamp(22px,3.6vh,34px);width:1.4em;text-align:center;flex:none}
.act .at{flex:1;min-width:0;display:flex;flex-direction:column}
.act b{font:800 clamp(19px,min(5.4vw,3.1vh),32px)/1.05 "Baloo 2",sans-serif}
.act small{font-weight:700;font-size:clamp(12px,1.7vh,16px);opacity:.65}
.act .as{display:flex;gap:1px;flex:none}
.act .as svg{width:clamp(13px,1.9vh,20px);height:clamp(13px,1.9vh,20px)}
.act.rec{background:#47a66c;background-image:var(--bplus);color:#fff;border-color:transparent;box-shadow:0 5px 0 #2f8a58}
.act.rec small{opacity:1;background:rgba(0,0,0,.24);border-radius:99px;padding:1px 8px;width:fit-content}
.act.act-toets{border-style:dashed;border-color:#e0a417}
.act.act-toets.rec{border-style:solid;background:#c78700;background-image:var(--bplus);box-shadow:0 5px 0 #996800}
.act.off{opacity:.45}
#stepScreen .roundrow{margin-top:auto;justify-content:center}
.mixgo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;max-width:460px}
.mixgo .go{width:100%;padding-left:8px;padding-right:8px;white-space:nowrap}
.mixgo .chip{order:3;grid-column:1 / -1;justify-self:center}
/* tafelmenu: berg weer zichtbaar (er is nu ruimte), grotere tegels */
#startScreen .hero{display:flex !important}
#tableGrid.tables{max-height:none;flex:none;grid-auto-rows:auto}
#tableGrid .tbl{min-height:clamp(70px,12vh,150px);max-height:none;aspect-ratio:auto}
/* breed scherm: stapscherm en Door elkaar niet over de hele breedte */
#stepScreen .sthero,#stepScreen .acts,#stepScreen .statline{width:100%;max-width:620px;margin-left:auto;margin-right:auto}
.mixbtn{max-width:620px;margin-left:auto;margin-right:auto}
/* icoon Oefenen: vier blokjes */
.act .ai .blk{width:1.1em;height:1.1em;display:block;margin:0 auto}
.act.rec .ai .blk rect{stroke:#fff;stroke-width:2.5}
.blkw{display:inline-block;width:1em;height:1em;margin-right:6px;vertical-align:-.14em;background:#fff;border-radius:5px;padding:1px}
/* Annuleren niet tegen de twee startknoppen aan (Mark, 28-09-2026) */
.mixgo{row-gap:clamp(14px,2.2vh,22px)}
.mixgo .chip{margin-top:2px}


/* ---------- opdracht en tegels (Mark, 28-09-2026): alles vol van kleur, ⭐ = klaar, geen randjes ---------- */
.donestar{position:absolute;top:clamp(3px,.6vh,7px);right:clamp(4px,1vw,8px);font-size:clamp(13px,2vh,20px);line-height:1;pointer-events:none}
.tbl[aria-pressed="true"] .donestar{display:none}
.rl-task{flex:none;width:100%;margin-top:clamp(12px,2vh,22px);border:0;cursor:pointer;font-family:inherit;text-align:left;color:#fff;background:var(--violet);
  border-radius:clamp(20px,3vh,32px);box-shadow:0 7px 0 #4d4690;padding:clamp(9px,1.5vh,16px) clamp(12px,2.4vw,20px);display:flex;align-items:center;gap:clamp(10px,2vw,16px)}
.rl-task:active{transform:translateY(4px);box-shadow:0 3px 0 #4d4690}
.rl-task .tk-ic{flex:none;width:clamp(40px,6.4vh,64px);height:clamp(40px,6.4vh,64px);border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:clamp(20px,3.2vh,32px)}
.rl-task .tk-tx{flex:1;min-width:0;display:flex;flex-direction:column}
.rl-task small{font-weight:800;font-size:clamp(11.5px,1.6vh,15px);opacity:.85}
.rl-task b{font:800 clamp(18px,min(5.2vw,3vh),32px)/1.05 "Baloo 2",sans-serif}
.rl-task .tk-sub{font-weight:800;font-size:clamp(11.5px,1.6vh,15px);opacity:.92;margin-top:2px}
.rl-task .tk-dots{display:flex;gap:4px;margin-top:5px}.rl-task .tk-dots i{flex:0 1 22px;height:clamp(6px,.9vh,9px);border-radius:5px;background:rgba(255,255,255,.3)}.rl-task .tk-dots i.on{background:#ffd24a}
.rl-task .tk-go{flex:none;background:#fff;color:var(--violet);border-radius:999px;padding:clamp(7px,1.1vh,12px) clamp(11px,2vw,18px);font:800 clamp(15px,2.2vh,22px) "Baloo 2",sans-serif}
.rl-task.done{background:#c78700;box-shadow:0 7px 0 #996800;cursor:default}
.rl-task.done:active{transform:none}
/* tegels in Rekenland: status onderaan (Nieuw / balkje 3/6 / Klaar!), ster rechtsboven als alles gehaald is */
.pt-st{display:flex;align-items:center;gap:6px;width:100%;font:800 clamp(10.5px,1.5vh,14px)/1 "Nunito",sans-serif;margin-top:clamp(2px,.5vh,6px);opacity:.95}
.pt-st .pb{flex:1;max-width:110px;height:clamp(5px,.8vh,8px);border-radius:6px;background:rgba(255,255,255,.3);overflow:hidden}
.pt-st .pb i{display:block;height:100%;background:#fff;border-radius:6px}
.parts.many .pt-st{grid-column:2}
.pt-star{color:inherit;text-shadow:none;font-size:clamp(14px,2.2vh,22px)}
/* beginscherm: opdracht onder het land */
.lc-task{display:inline-block;margin-top:4px;background:#fff;color:var(--ink);border-radius:999px;padding:2px 9px;font:800 clamp(11px,1.6vh,14px)/1.3 "Nunito",sans-serif;max-width:100%}
@media(max-height:760px){
  .rl-task{margin-top:clamp(8px,1.4vh,14px);padding-top:7px;padding-bottom:7px}
  .rl-task .tk-ic{width:38px;height:38px;font-size:19px}
  .rl-task .tk-dots{margin-top:3px}
  .rl-task .tk-sub{margin-top:0}
}
.rl-task b,.rl-task .tk-sub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rl-task.done .tk-sub{white-space:normal}
/* ---------- UI/UX ronde 3 ---------- */
/* ster voor het diploma rechtsonder, niet over de naam */
#pmGrid .donestar{top:auto;bottom:clamp(4px,.8vh,8px)}
/* tafels: grotere tegels, minder leegte */
#tableGrid .tbl{min-height:clamp(80px,14vh,170px)}
/* trucje: een lange zin in kleinere letters (bv. Klokland) */
.cstep.long{font-size:clamp(16px,min(4.6vw,2.6vh),26px);line-height:1.2}
/* lang antwoord op een knop (bv. "5 voor half 9"): op één regel */
.ans.long{font-size:clamp(17px,min(5.2vw,3.2vh),34px);line-height:1.1;padding:0 6px}
/* diplomascherm met 10 tabbladen (ook Klokland): compacter op een kleine telefoon */
@media(max-width:699px) and (max-height:700px){
  .diptabs{gap:4px;margin-bottom:8px}
  .diptabs .shopsec{padding:3px 5px;min-height:34px}
  #diplomaScreen .medal svg{max-width:clamp(36px,min(11vw,6.8vh),100px)}
}

/* B-plus: stapnaam op een donker rond labeltje, zodat de kleine tekst 4,5:1 haalt */
#pmGrid.learn .tbl .pml,#pmGrid .tbl[aria-pressed="true"] .pml{background:rgba(0,0,0,.24);border-radius:99px;padding:1px 8px;width:fit-content}
.pt-lbl{font-style:normal;background:rgba(0,0,0,.24);border-radius:99px;padding:2px 8px}

/* Splitshuisje (Tot 20, stap 1): getal in het dak, de twee delen in de kamers eronder */
.huisje{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;font-size:.6em;line-height:1}
.huisje .dak{position:relative;width:3.9em;height:1.5em;display:flex;align-items:flex-end;justify-content:center;padding-bottom:.06em}
.huisje .dak svg{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.huisje .dak b{position:relative;font-size:.86em;color:var(--ink)}
.huisje .kamers{display:flex;background:#fff;border:.08em solid #2a2f55;border-top-width:.06em;border-radius:0 0 .14em .14em;margin-top:-.02em}
.huisje .kamer{min-width:1.85em;padding:.14em .1em;text-align:center;color:#233052}
.huisje .kamer + .kamer{border-left:.08em solid #2a2f55}
.huisje .kamer.vraag{background:#eef6ff;color:#1a7cad}
/* moeilijk: het invulvak is de kamer zelf, zonder stippelrand */
.huisje .box{font-size:1em;min-width:0;padding:0;border:0;border-radius:0;background:none;color:inherit;line-height:inherit;display:inline}
.huisje .box.filled{color:#233052}
.huisje .box.right{background:none;color:#1f8355}
.huisje .kamer.vraag:has(.box.right){background:#e3f6ea}
.hq .huisje{font-size:.9em}
.flash .huisje{font-size:.7em}

/* Door elkaar (13-10-2026): lijnpictogram in plaats van emoji; opdracht op de landkaart als hetzelfde labeltje als de rest */
.mixbtn .mixt{display:inline-flex;align-items:center;gap:8px;font:inherit}
.mixbtn .mixic{width:1.15em;height:1.15em;fill:none;stroke:var(--violet,#6f67ab);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.mixbtn small{opacity:.75}
.lc-txt .lc-task{display:inline-flex;align-items:center;gap:5px;background:rgba(0,0,0,.24);color:#fff;font:800 clamp(12.5px,min(3.4vw,1.9vh),19px) "Nunito",sans-serif;padding:1px 9px;margin-top:0}
.tkico{width:1.05em;height:1.05em;flex:none;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.rl-task .tk-ic .tkico{width:58%;height:58%;color:var(--violet,#6f67ab)}
.rl-task.done .tk-ic .tkico{color:#e07a1f}
#pmTask{margin:0 0 clamp(8px,1.4vh,14px)}
/* lage schermen: opdrachtbalk compacter, zodat het landscherm met opdracht niet scrollt (13-10-2026, gemeten op 360×640) */
@media (max-height:700px){
  .rl-task{margin-top:6px;padding-top:7px;padding-bottom:7px}
  .rl-task .tk-ic{width:34px;height:34px}
  .rl-task .tk-dots{display:none}
}
@media (max-height:700px){
  #hubScreen.has-task .parts.many .parttile{min-height:46px;padding-top:3px;padding-bottom:3px}
  #hubScreen.has-task .parts.many{gap:8px}
}
@media (max-height:700px){ #hubScreen.has-task .parts:not(.many) .parttile{min-height:clamp(70px,11vh,180px)} }
/* gekleurde tekening op een wit rondje (Klokland-stappen, 13-10-2026) */
.stepart{display:inline-flex;align-items:center;justify-content:center;width:1.5em;height:1.5em;border-radius:50%;background:#fff;box-shadow:inset 0 -3px 0 rgba(0,0,0,.12);vertical-align:middle;flex:none}
.stepart svg{width:86%;height:86%;display:block}
#pmGrid .tbl .n:has(.stepart){width:auto}
.tbl.off .stepart,.tbl.straks .stepart{opacity:.55;filter:grayscale(.6)}
/* Eenheid tussen de onderdelen (13-10-2026, Mark): kop met tekening zoals bij Tafels; elk teken op een wit rondje */
.pm-hero .heroart{flex:none;display:block;width:clamp(56px,min(17vw,11vh),125px)}   /* even groot als de berg bij Tafels */
.pm-hero .heroart svg{display:block;width:100%;height:auto}
.stepart.txt,.stepart.icon{font:800 1em/1 "Baloo 2",sans-serif;letter-spacing:-.02em}
.stepart.txt.lang{font-size:.72em}
.stepart.icon .stico{width:72%;height:72%}
#pmGrid .tbl .n .stepart{font-size:inherit}
.tables .tbl .n .stepart{width:1.45em;height:1.45em;font-size:.82em}
@media(max-width:620px) and (orientation:portrait){
  #pmScreen .hero{margin:0 0 4px}
  #pmScreen .hero .heroart{width:clamp(46px,8vh,64px)}
  #pmScreen .bubble{display:none}
  #pmScreen .hero h1{font-size:clamp(22px,6vw,30px)}
}
@media(orientation:landscape) and (max-height:800px){
  #pmScreen .hero .heroart{width:clamp(48px,9vh,72px)}
  #pmScreen .bubble{display:none}
  #pmScreen .hero h1{font-size:clamp(22px,4.2vh,34px)}
}
.stepart.txt b{font:800 1em/1 "Baloo 2",sans-serif;letter-spacing:-.03em}
.stepart.txt b.s1{font-size:.9em}.stepart.txt b.s2{font-size:.62em}.stepart.txt b.s3{font-size:.46em}
/* tien smalle tegels (Delen): zoals de tafels alleen het teken in het rondje; de naam blijft voor schermlezers (13-10-2026) */
#pmGrid.five .tbl .pml{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#pmGrid.five{max-height:none}   /* geen grens van 24vh zoals bij het oude tafelmenu: er is ruimte genoeg */
#pmGrid.five .stepart.txt b.s2{font-size:.68em}

/* Stappen zoals de tafels (13-10-2026, Mark: "Tafels is rustiger" en "eenheid in alle tegels"): elke cel = staande tegel even hoog als de tafels
   (alleen teken en sterren) met de naam eronder in dezelfde cel; vaste ruimte voor twee regels, zodat elke rij gelijk is */
#pmGrid.tables{max-height:none;flex:none;grid-auto-rows:auto;align-items:start;--lbl:clamp(12px,min(3.4vw,1.75vh),16px);gap:clamp(14px,2.2vh,22px) clamp(8px,1.4vw,14px)}
.pmcell{display:flex;flex-direction:column;align-items:stretch;gap:clamp(5px,.8vh,8px);min-width:0}
#pmGrid .tbl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:clamp(80px,14vh,170px);max-height:none;aspect-ratio:auto;padding:7px 2px;text-align:center}
#pmGrid .tbl .n{font-size:clamp(24px,min(8vw,5.4vh),64px);width:auto}
#pmGrid .tbl .n .stepart{width:1.45em;height:1.45em;font-size:.82em}
.pmname{display:block;min-height:calc(var(--lbl) * 2.3);color:#233052;font:800 var(--lbl)/1.15 "Nunito",sans-serif;text-align:center;cursor:pointer;
  overflow-wrap:normal;hyphens:manual;padding:0;margin:0 -4px}
.pmcell:has(.tbl.off) .pmname{color:#6b7386}
@media(min-width:1000px) and (orientation:landscape){#pmGrid .tbl .n{font-size:clamp(24px,min(3vw,5vh),52px)}}
@media(max-width:620px) and (orientation:portrait){#pmGrid.tables{padding-left:6px;padding-right:6px}}
/* tablet en breed: een stappentegel precies even breed als een tafeltegel (5 of 10 op een rij); op de telefoon iets breder voor de naam */
@media(min-width:621px){
  #pmGrid.tables:not(.five){width:min(880px,80%);margin-left:auto;margin-right:auto}
  #pmGrid.tables.three{width:min(660px,60%)}
  #pmGrid.tables.five{width:min(1100px,100%);margin-left:auto;margin-right:auto}
}
/* Door elkaar bij de tafels even breed als bij de andere onderdelen (14-10-2026) */
#startScreen .scroller > .mixbtn{max-width:620px}
/* Desktop zoals de iPad (14-10-2026, Mark: "op een iPad mooier van de breedte"): tafels 2 rijen van 5, stappen even breed als een tafeltegel
   (4 per rij bij 8 stappen, 3 bij 5-6, Delen 5), tegels groeien mee met de hoogte */
@media(min-width:1000px) and (orientation:landscape){
  #tableGrid.tables,#pmGrid.tables{--gw:min(780px,100%);column-gap:clamp(8px,1.4vw,14px);margin-left:auto;margin-right:auto;max-height:none}
  #tableGrid.tables,#pmGrid.tables.five{grid-template-columns:repeat(5,minmax(0,1fr));width:var(--gw)}
  #pmGrid.tables:not(.five){grid-template-columns:repeat(4,minmax(0,1fr));width:calc(var(--gw) * .8)}
  #pmGrid.tables.three{grid-template-columns:repeat(3,minmax(0,1fr));width:calc(var(--gw) * .6)}
  #tableGrid .tbl,#pmGrid .tbl{min-height:clamp(84px,17vh,190px);max-height:none;aspect-ratio:auto}
  #tableGrid .tbl .n,#pmGrid .tbl .n{font-size:clamp(26px,min(4vw,5.4vh),60px)}
  #pmGrid.tables{--lbl:clamp(13px,1.9vh,17px)}
}

/* Landscherm (Rekenland, Taalland) met dezelfde tegels als de menu's (14-10-2026, Mark): staande tegel met de tekening op het witte rondje,
   wit voortgangsbalkje, gouden ster als alles af is, de naam eronder in donkere letters. Telefoon 4 per rij; tablet en breed zoals de tafels (5 per rij) */
#rlParts.tables{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-height:none;flex:none;grid-auto-rows:auto;align-items:start;margin-top:clamp(8px,1.4vh,16px);
  --lbl:clamp(12px,min(3.4vw,1.75vh),16px);gap:clamp(12px,2vh,22px) clamp(8px,1.4vw,14px);padding:10px 6px 8px}
#rlParts .tbl{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:clamp(6px,1vh,10px);min-height:clamp(80px,14vh,170px);padding:7px 2px;border-width:3px}
#rlParts .tbl .n{font-size:clamp(24px,min(8vw,5.4vh),64px);line-height:1}
#rlParts .tbl .n .stepart{width:1.45em;height:1.45em;font-size:.82em}
#rlParts .hbar{display:block;width:58%;height:clamp(5px,.7vh,8px);border-radius:9px;background:rgba(255,255,255,.38);overflow:hidden}
#rlParts .hbar i{display:block;height:100%;min-width:0;background:#fff;border-radius:9px}
#rlParts .donestar{top:auto;bottom:clamp(4px,.8vh,8px)}
#rlParts .rl-kop{margin:0 4px -4px}
@media(min-width:621px){
  #rlParts.tables{--gw:100%;margin-left:auto;margin-right:auto;width:calc(var(--gw) * .8)}
  #rlParts.tables[data-n="9"],#rlParts.tables[data-n="10"]{grid-template-columns:repeat(5,minmax(0,1fr));width:var(--gw)}
}
@media(min-width:1000px) and (orientation:landscape){
  #rlParts.tables{--gw:min(780px,100%);--lbl:clamp(13px,1.9vh,17px)}
  #rlParts .tbl{min-height:clamp(84px,17vh,190px)}
  #rlParts .tbl .n{font-size:clamp(26px,min(4vw,5.4vh),60px)}
}
#rlParts .tbl:not(.off){background-image:var(--bglans)}
/* kleine telefoon: landtegels iets lager, zodat opdracht en kopjes Voor jou/Straks erbij passen */
@media(max-height:700px){#rlParts .tbl{min-height:clamp(62px,10.5vh,80px);gap:5px}#rlParts.tables{row-gap:10px;padding-top:6px}#rlParts .tbl .n{font-size:clamp(22px,min(7vw,4.6vh),40px)}}
#tableGrid.tables{column-gap:clamp(8px,1.4vw,14px)}   /* zelfde tussenruimte als stappen en landtegels: overal even brede tegels */
/* voortgang als stipjes, één per stap: telbaar voor kinderen (14-10-2026, Mark: geen procent) */
#rlParts .hdots{display:flex;flex-wrap:nowrap;justify-content:center;gap:clamp(2px,min(.5vw,.4vh),3px);max-width:94%}
#rlParts .hdots i{flex:none;width:clamp(4px,min(1.4vw,1.2vh),9px);height:clamp(4px,min(1.4vw,1.2vh),9px);border-radius:50%;background:rgba(255,255,255,.38)}
#rlParts .hdots i.on{background:#fff}
@media(max-width:400px){#rlParts .hdots{gap:1.5px}#rlParts .hdots i{width:4.5px;height:4.5px}}

/* Diploma = gouden rand om het witte rondje, als een medaille (14-10-2026, Mark: "een ster bij de sterretjes is dubbel op").
   Zelfde bij stappen, tafels en landtegels (daar: alles af); geen losse ster meer */
#pmGrid .donestar,#tableGrid .donestar,#rlParts .donestar{display:none}
.tbl.done .stepart{box-shadow:0 0 0 clamp(3px,.45vh,5px) #ffc542,0 0 0 clamp(4.5px,.62vh,7px) #2a2f55,inset 0 -3px 0 rgba(0,0,0,.12)}
/* telefoon staand: landtegels iets lager, zodat drie rijen met de kopjes Voor jou en Straks passen */
@media(max-width:620px) and (orientation:portrait){#rlParts .tbl{min-height:clamp(62px,11vh,110px)}#rlParts.tables{row-gap:clamp(10px,1.6vh,18px)}}