.pm-spel{--pm-keuze:#ffe7a3;--pm-buurt:#eef1fb;--pm-zelfde:#dfe5fb;--pm-fout:#e5484d;--pm-breed:min(100vw, 34rem);max-inline-size:36rem;padding-block:1rem 2rem}.pm-spel__kop{justify-content:space-between;align-items:center;gap:1rem;display:flex}.pm-spel__titel{font-family:var(--kern-font-heading);font-size:1.6rem;font-weight:800}.pm-niveaus{background:var(--kern-surface);border:1px solid var(--kern-border);border-radius:99rem;grid-template-columns:repeat(4,1fr);gap:.25rem;margin-block:.8rem;padding:.25rem;display:grid}.pm-niveau{min-block-size:2.4rem;font:inherit;color:var(--kern-text-muted);cursor:pointer;background:0 0;border:0;border-radius:99rem;font-size:.88rem;font-weight:700}.pm-niveau[aria-pressed=true]{background:var(--kern-primary);color:var(--kern-primary-contrast)}.pm-bord{align-content:start;justify-items:center;min-block-size:12rem;display:grid}.pm-bord__melding{color:var(--kern-text-muted);padding-block:3rem}.pm-bord .pm-raster{--vak:min(3.4rem, calc((var(--pm-breed) - 2.2rem) / var(--n)));touch-action:manipulation;-webkit-user-select:none;user-select:none}.pm-bord .pm-raster--futo{--vak:min(3.4rem, calc((var(--pm-breed) - 2.2rem) / (var(--n) * .75)))}.pm-bord .pm-raster--nono{--vak:min(2.2rem, calc((var(--pm-breed) - 6rem) / var(--n)))}.pm-bord button.pm-vak{background:var(--kern-surface);cursor:pointer;-webkit-tap-highlight-color:transparent;border-block-start:0;border-inline-start:0;margin:0;padding:0;font-family:inherit}.pm-bord .pm-vak.pm-vak--buurt{background:var(--pm-buurt)}.pm-bord .pm-vak.pm-vak--zelfde{background:var(--pm-zelfde)}.pm-bord .pm-vak.pm-vak--gekozen{background:var(--pm-keuze);box-shadow:inset 0 0 0 3px var(--kern-accent)}.pm-bord .pm-vak.pm-vak--fout{color:var(--pm-fout);background:#fde8e8}.pm-bord .pm-vak--gegeven{cursor:default}.pm-bord .pm-vak--vol{background:var(--kern-text)}.pm-bord .pm-vak--gestreept{background:var(--kern-text);color:#ffffff8c}.pm-bord .pm-vak--kruis:after{content:"";background:var(--kern-border);border-radius:50%;block-size:30%;inline-size:30%}.pm-bord .pm-vak--cirkel:before{content:"";border:2px solid var(--kern-primary);border-radius:50%;position:absolute;inset:12%}.pm-raster--binair .pm-vak--b0,.pm-raster--binair .pm-vak--b1{font-size:calc(var(--vak) * .55)}.pm-notities{grid-template-columns:repeat(var(--k), 1fr);block-size:100%;inline-size:100%;font-size:calc(var(--vak) * .22);color:var(--kern-text-muted);padding:2px;font-weight:600;line-height:1;display:grid}.pm-notities span{place-items:center;display:grid}.pm-bord .pm-groepen{justify-content:center;max-inline-size:none}.pm-bord .pm-groep{grid-template-columns:repeat(var(--k), 3rem)}.pm-bord .pm-tegel{block-size:3rem;font:inherit;color:var(--kern-text);cursor:pointer;border:0;font-size:1.1rem;font-weight:700}.pm-tegel--gekozen{background:var(--kern-primary)!important;color:var(--kern-primary-contrast)!important}.pm-tegel--fout{background:var(--pm-fout)!important}.pm-tegel--leeg{color:var(--kern-text-muted)}.pm-bord .pm-piramide .pm-vak{inline-size:min(3.4rem, calc((var(--pm-breed) - 3rem) / 7));block-size:2.6rem;font-size:1rem}.pm-spel__melding{text-align:center;min-block-size:1.4rem;color:var(--kern-text-muted);margin-block:.5rem;font-size:.92rem}.pm-toetsen{grid-template-columns:repeat(var(--toetsen,9), 1fr);gap:.35rem;display:grid}.pm-toets{border:1px solid var(--kern-border);border-radius:var(--kern-radius);background:var(--kern-surface);min-block-size:3rem;font:inherit;color:var(--kern-primary);cursor:pointer;touch-action:manipulation;font-size:1.35rem;font-weight:700}.pm-toets:active{background:var(--pm-zelfde)}.pm-gereedschap{flex-wrap:wrap;justify-content:center;gap:.4rem;margin-block-start:.7rem;display:flex}.pm-knop{border:1px solid var(--kern-border);background:var(--kern-surface);min-block-size:2.75rem;font:inherit;color:var(--kern-text);cursor:pointer;border-radius:99rem;justify-content:center;align-items:center;padding-inline:.9rem;font-size:.9rem;font-weight:700;text-decoration:none;display:inline-flex}.pm-knop[aria-pressed=true]{background:var(--kern-text);color:var(--kern-surface)}.pm-knop--hoofd{background:var(--kern-primary);border-color:var(--kern-primary);color:var(--kern-primary-contrast)}.pm-knop--rond{inline-size:2.75rem;padding:0;font-size:1.1rem}.pm-klaar{border:1px solid var(--kern-border);border-block-start:4px solid var(--kern-primary);border-radius:var(--kern-radius);background:var(--kern-surface);text-align:center;margin-block-start:1rem;padding:1.2rem}.pm-klaar__titel{font-family:var(--kern-font-heading);font-size:1.5rem;font-weight:800}.pm-klaar__cijfers{justify-content:center;gap:2rem;margin-block:.8rem;display:flex}.pm-klaar__cijfers dt{color:var(--kern-text-muted);font-size:.8rem}.pm-klaar__cijfers dd{font-variant-numeric:tabular-nums;margin:0;font-size:1.3rem;font-weight:800}.pm-klaar__knoppen{flex-wrap:wrap;justify-content:center;gap:.5rem;display:flex}[data-klaar="1"] .pm-bord .pm-vak:not(.pm-vak--zwart):not(.pm-vak--gestreept):not(.pm-vak--vol){background:#eaf6ee;transition:background .6s}.pm-uitleg{border-radius:var(--kern-radius-lg);max-block-size:calc(100dvh - 2rem);inline-size:min(34rem,100vw - 2rem);box-shadow:var(--kern-shadow);color:var(--kern-text);border:0;padding:1.3rem}.pm-uitleg::backdrop{background:#1b213373}.pm-uitleg__regels{margin-block:.8rem;padding-inline-start:1.2rem;line-height:1.55}.pm-uitleg__regels li+li{margin-block-start:.35rem}.pm-uitleg__voorbeeld{flex-wrap:wrap;gap:1rem;margin-block:.8rem;display:flex}.pm-uitleg__voorbeeld figure{margin:0}.pm-uitleg__voorbeeld figcaption{color:var(--kern-text-muted);margin-block-end:.3rem;font-size:.82rem;font-weight:700}.pm-uitleg__voorbeeld .pm-raster{--vak:min(1.7rem, calc((100vw - 5rem) / 2 / var(--n)))}.pm-uitleg__tip{border-radius:var(--kern-radius);background:var(--kern-surface-muted);margin-block:.8rem 1rem;padding:.7rem .9rem;line-height:1.5}.pm-niveaus:has(.pm-niveau--dag){grid-template-columns:repeat(5,1fr)}.pm-niveau--dag{color:var(--kern-accent)}.pm-niveau--dag[aria-pressed=true]{background:var(--kern-accent);color:#fff}.pm-stappen{scrollbar-width:none;gap:.35rem;margin-block:.6rem .8rem;display:flex;overflow-x:auto}.pm-stap{border:1px solid var(--kern-border);background:var(--kern-surface);min-block-size:2.5rem;font:inherit;color:var(--kern-text);cursor:pointer;border-radius:99rem;flex:none;align-items:center;gap:.4rem;padding-inline:.35rem .8rem;font-size:.85rem;font-weight:700;display:inline-flex}.pm-stap__nr{background:var(--kern-surface-muted);border-radius:50%;place-items:center;block-size:1.75rem;inline-size:1.75rem;font-size:.8rem;display:grid}.pm-stap--nu{border-color:var(--kern-primary);box-shadow:0 0 0 1px var(--kern-primary)}.pm-stap--klaar .pm-stap__nr{color:#fff;background:#2f9e5b}.pm-stappen--klein .pm-stap{cursor:default}.pm-stappen__nu{color:var(--kern-text-muted);margin:0;font-size:.95rem}.pm-mixkeus{border:1px solid var(--kern-border);border-radius:var(--kern-radius);background:var(--kern-surface);margin-block:.8rem;padding:1.1rem}.pm-mixkeus__soorten{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem;margin-block:.8rem;display:grid}.pm-vink{border:1px solid var(--kern-border);border-radius:var(--kern-radius);cursor:pointer;align-items:center;gap:.55rem;min-block-size:2.75rem;padding-inline:.7rem;font-weight:600;display:flex}.pm-vink input{block-size:1.15rem;inline-size:1.15rem;accent-color:var(--kern-primary)}.pm-vink:has(input:checked){border-color:var(--kern-primary);background:var(--pm-buurt)}.pm-vandaag{border:1px solid var(--kern-border);border-block-start:4px solid var(--kern-accent);border-radius:var(--kern-radius);background:var(--kern-surface);box-shadow:var(--kern-shadow);gap:.6rem;margin-block-start:1.6rem;padding:1.2rem;display:grid}.pm-vandaag__knoppen{flex-wrap:wrap;gap:.5rem;display:flex}.pm-beloning:empty{display:none}.pm-beloning{text-align:start;gap:.5rem;margin-block:.6rem;display:grid}.pm-beloning__regels{flex-wrap:wrap;justify-content:center;gap:.4rem .9rem;font-weight:700;display:flex}.pm-beloning__xp{color:var(--kern-primary)}.pm-beloning__reeks{color:var(--kern-accent)}.pm-badge--nieuw{border-color:var(--kern-accent);background:#fff8f4}.pm-bord .pm-vak.pm-vak--hint{background:#d6f5e3;box-shadow:inset 0 0 0 3px #2f9e5b}.pm-bord .pm-vak.pm-vak--hintbij{background:#eef9f2}.pm-tegel--hint{box-shadow:inset 0 0 0 3px #2f9e5b}.pm-hintbalk{justify-content:center;margin-block-end:.5rem;display:flex}.pm-knop--hint{border-color:#9ad6b2}.pm-niveau--slot:after{content:" 🔒";font-size:.75em}.pm-spel__melding a,.pm-bord__melding a{color:var(--kern-primary);font-weight:700}