/* Martha 3D — game-laag (20-10-2026, klus "3D game-laag 2", Camila). Ontwerp: Diego "3D game onderzoek".
   Laadt NA styles.css, planning.css en startscherm.css; verandert niets aan die bestanden, alleen extra regels.
   Kleuren letterlijk uit Diego's voorstel (contrast nagerekend door hem): nachthemel #1E1650, kaart #2C2270,
   geel var(--yellow), Privé #FF8A5B, Werk #3FA7FF, Bedrijf #B57BFF, gelukt #4BE07A, fout #FF5C7A, gedimd #B9B3E6, inkt #111.
   Tekst op gekleurde knoppen is altijd #111 (wit op geel/koraal/blauw haalt geen AA).
   Alleen transform/opacity worden geanimeerd (haperen, lijstje v455). Animaties zitten op binnen-elementen
   (.m3g-pip-lijf, .m3g-bol i), nooit op .layer of #ui, want motion.js zet daar --rig/transform voor het kantelen. */

@font-face { font-family: "M3GRond"; src: url("rond.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }

:root {
  /* 25-10-2026 (klus "Ailex oude stijl weg nu"): geen nachtlucht meer, ook zonder de platte regels licht */
  --m3g-nacht: #DDE6FF; --m3g-nacht-hi: #F3E9FF; --m3g-kaart: #FFFFFF;
  --m3g-geel: var(--yellow); --m3g-geel-lo: #E0A800;
  --m3g-prive: #FF8A5B; --m3g-werk: #3FA7FF; --m3g-bedrijf: #B57BFF;
  --m3g-goed: #4BE07A; --m3g-fout: #FF5C7A; --m3g-dim: #6B6F99; --m3g-inkt: #262A4D; --m3g-wit: #FFFFFF;
  --m3g-wereld: var(--m3g-geel);
  --m3g-font: "M3GRond", "MarthaRond", system-ui, sans-serif;
  --m3g-veer: cubic-bezier(.34, 1.56, .64, 1);
}
[data-wereld="prive"] { --m3g-wereld: var(--m3g-prive); }
[data-wereld="werk"] { --m3g-wereld: var(--m3g-werk); }
[data-wereld="bedrijf"] { --m3g-wereld: var(--m3g-bedrijf); }
[data-wereld="chat"] { --m3g-wereld: var(--m3g-geel); }

/* ---------- basis: nachthemel ---------- */
.m3g { font-family: var(--m3g-font); color: var(--m3g-wit); font-size: 17px; line-height: 1.4; }
.m3g-hemel { background: radial-gradient(120% 70% at 50% 0%, var(--m3g-nacht-hi) 0%, var(--m3g-nacht) 62%); }
/* dunne gloed-rand in de wereldkleur, statisch (box-shadow wordt nooit geanimeerd) */
.m3g-gloed { box-shadow: inset 0 0 0 3px var(--m3g-wereld), inset 0 0 28px -8px var(--m3g-wereld); }

/* ---------- knoppen (snoepjesknop, zelfde idee als .b3d met --lift) ---------- */
.m3g-knop { --lift: 7px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 48px; min-height: 48px; padding: 0 20px; border: 1px solid var(--ax-rand); border-radius: 18px;
  font: 800 18px/1.1 var(--m3g-font); color: var(--m3g-inkt); background: var(--m3g-wereld); cursor: pointer;
  box-shadow: 0 var(--lift) 0 0 var(--m3g-inkt); transform: translateY(0); transition: transform 80ms ease-out, box-shadow 80ms ease-out;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.m3g-knop:active, .m3g-knop.is-in { transform: translateY(4px); box-shadow: var(--ax-diep); }
.m3g-knop:focus-visible { outline: 3px solid var(--m3g-wit); outline-offset: 3px; }
.m3g-knop.groot { display: flex; width: 100%; min-height: 64px; font-size: 20px; border-radius: 20px; }
.m3g-knop.geel { background: var(--m3g-geel); }
.m3g-knop.stil { background: var(--m3g-kaart); color: var(--m3g-wit); border-color: var(--m3g-dim); box-shadow: 0 var(--lift) 0 0 #120C38; }
.m3g-knop.klein { min-height: 48px; font-size: 16px; padding: 0 14px; }
.m3g-link { min-height: 48px; min-width: 48px; padding: 0 8px; background: none; border: 0; color: var(--m3g-dim);
  font: 700 14px var(--m3g-font); text-decoration: underline; cursor: pointer; }

/* ---------- Ramóns startscherm (#m3dStart) in game-jasje. Alleen klassen/ids uit startscherm.js. ---------- */
.m3d-start.m3g-aan { background: radial-gradient(120% 70% at 50% 0%, var(--m3g-nacht-hi) 0%, var(--m3g-nacht) 62%); }
.m3g-aan .m3d-start-kaart { background: var(--m3g-kaart); color: var(--m3g-wit); border: 1px solid var(--ax-rand);
  border-radius: 24px; box-shadow: 0 8px 0 0 #120C38; font-family: var(--m3g-font); }
.m3g-aan .m3d-start-titel { font-size: 32px; font-weight: 800; color: var(--m3g-geel); }
.m3g-aan .m3d-start-zin, .m3g-aan .m3d-uitleg { font-size: 17px; color: var(--m3g-dim); }
.m3g-aan .m3d-start-knop { border-radius: 20px; box-shadow: var(--ax-diep); background: var(--m3g-geel); color: var(--m3g-inkt);
  transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
.m3g-aan .m3d-start-knop:active { transform: translateY(4px); box-shadow: var(--ax-diep); }
.m3g-aan #m3dKnopInloggen { background: var(--m3g-kaart); color: var(--m3g-wit); border-color: var(--m3g-dim); box-shadow: 0 7px 0 0 #120C38; }
.m3g-aan .m3d-start-knop.groot { min-height: 64px; font-size: 20px; }
.m3g-aan .m3d-start-veld { border-radius: 14px; font-size: 18px; border: 1.5px solid var(--ax-rand-sterk); }
.m3g-aan .m3d-start-fout { color: var(--m3g-fout); }
.m3g-aan .m3d-start-link, .m3g-aan .m3d-start-terug, .m3g-aan .m3d-start-eigenaar { color: var(--m3g-dim); }
.m3g-schud { animation: m3g-schud 300ms ease-in-out; }
@keyframes m3g-schud { 0%, 100% { transform: translateX(0); } 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* ---------- onderbalk: woordje onder de knop, actieve knop omhoog met stipje, XP-ringetje ---------- */
.m3g-balk { display: flex; justify-content: space-around; align-items: flex-end; gap: 4px; padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: var(--m3g-nacht); border-top: 1px solid var(--ax-rand); }
.m3g-nb { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 56px; min-height: 56px;
  padding: 4px 2px; background: none; border: 0; color: var(--m3g-dim); font: 800 12px var(--m3g-font); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.m3g-nb .m3g-nb-bol { position: relative; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%;
  background: var(--m3g-kaart); border: 1.5px solid var(--ax-rand-sterk); box-shadow: var(--ax-diep); transition: transform 160ms var(--m3g-veer); }
.m3g-nb .m3g-nb-bol svg.ic { width: 22px; height: 22px; }
/* testklant ronde 4: de witte voorkant en de dikte van de 3D-knop (.face/.ex/.sh/.gloss) schoven mee in het rondje en lagen over het
   icoon (alleen witte ovalen). Het rondje tekent zijn eigen kleur en rand, dus die lagen hier weg en het icoon erboven. */
.m3g-nb .m3g-nb-bol > :is(.face, .ex, .sh, .gloss) { display: none; }
.m3g-nb .m3g-nb-bol > svg.ic { position: relative; color: var(--m3g-wit); }
.m3g-nb.is-on .m3g-nb-bol > svg.ic { color: var(--m3g-inkt); }
.m3g-nb.is-on { color: var(--m3g-wit); }
.m3g-nb.is-on .m3g-nb-bol { background: var(--m3g-wereld); color: var(--m3g-inkt); transform: translateY(-6px); }
.m3g-nb.is-on::after { content: ""; position: absolute; bottom: -2px; width: 6px; height: 6px; border-radius: 50%; background: var(--m3g-wereld); }
.nb-lbl { display: block; font: 800 12px/1 var(--m3g-font); letter-spacing: .01em; white-space: nowrap; }
/* XP-ringetje om een wereldknop (zelfde techniek als #kopTokVul: pathLength=100 + stroke-dasharray) */
.m3g-ring { position: absolute; inset: -6px; width: calc(100% + 12px); height: calc(100% + 12px); pointer-events: none; transform: rotate(-90deg); }
.m3g-ring circle { fill: none; stroke-width: 3.5; }
.m3g-ring .m3g-ring-bak { stroke: rgba(185, 179, 230, .25); }
.m3g-ring .m3g-ring-vul { stroke: var(--m3g-wereld); stroke-linecap: round; transition: stroke-dasharray 500ms ease-out; }
.m3g-ring.m3g-puls { animation: m3g-puls 420ms var(--m3g-veer); }
@keyframes m3g-puls { 50% { transform: rotate(-90deg) scale(1.18); } }
/* klant: geen rode stopknop (verkeerde tik), Diego punt onderbalk */
[data-rol="gebruiker"] [data-nav="uit"] { display: none; }

/* ---------- XP-balk per wereld ---------- */
.m3g-xpbalk { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-weight: 800; font-size: 15px; }
.m3g-xpbalk-bak { height: 14px; border-radius: 8px; background: rgba(0, 0, 0, .35); border: 1.5px solid var(--ax-rand-sterk); overflow: hidden; }
.m3g-xpbalk-vul { height: 100%; width: 100%; background: var(--m3g-wereld); transform-origin: left; transform: scaleX(0); transition: transform 500ms ease-out; }
.m3g-lv { display: inline-grid; place-items: center; min-width: 40px; height: 28px; padding: 0 8px; border-radius: 14px;
  background: var(--m3g-wereld); color: var(--m3g-inkt); border: 1.5px solid var(--ax-rand-sterk); font-weight: 800; font-size: 14px; }

/* ---------- toasts: "+10 XP" munt en badge-kaartje ---------- */
.m3g-toasts { position: fixed; left: 0; right: 0; top: calc(12px + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); z-index: 9800; display: flex; flex-direction: column;
  align-items: center; gap: 8px; pointer-events: none; }
.m3g-toast { display: inline-flex; align-items: center; gap: 8px; max-width: calc(100vw - 32px); padding: 10px 16px; border-radius: 18px;
  background: var(--m3g-kaart); color: var(--m3g-wit); border: 1px solid var(--ax-rand); box-shadow: var(--ax-diep);
  font: 800 16px var(--m3g-font); animation: m3g-toast-in 260ms var(--m3g-veer) both; }
.m3g-toast.weg { animation: m3g-toast-uit 220ms ease-in both; }
.m3g-toast .m3g-munt { width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--m3g-geel); border: 1.5px solid var(--ax-rand-sterk);
  display: grid; place-items: center; color: var(--m3g-inkt); font-size: 13px; }
.m3g-toast.xp b { color: var(--m3g-wereld); }
@keyframes m3g-toast-in { from { opacity: 0; transform: translateY(-24px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes m3g-toast-uit { to { opacity: 0; transform: translateY(-16px); } }
/* vliegende munt van de plek van de actie naar het ringetje */
.m3g-vlieg { position: fixed; z-index: 9700; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: var(--m3g-geel);
  border: 1.5px solid var(--ax-rand-sterk); pointer-events: none; transition: transform 600ms cubic-bezier(.5, -0.4, .6, 1), opacity 600ms ease-in; }

/* ---------- level-up feest ---------- */
.m3g-feest { position: fixed; inset: 0; z-index: 9850; display: grid; place-items: center; padding: 16px; pointer-events: none; }
.m3g-feest-kaart { max-width: min(360px, calc(100vw - 32px)); padding: 18px 22px; text-align: center; border-radius: 26px;
  background: var(--m3g-wereld); color: var(--m3g-inkt); border: 1px solid var(--ax-rand); box-shadow: var(--ax-diep);
  font: 800 26px/1.15 var(--m3g-font); animation: m3g-pop 420ms var(--m3g-veer) both; }
.m3g-feest-kaart small { display: block; margin-top: 6px; font-size: 16px; font-weight: 700; }
.m3g-feest.weg .m3g-feest-kaart { animation: m3g-toast-uit 260ms ease-in both; }
@keyframes m3g-pop { from { opacity: 0; transform: scale(.5); } 70% { transform: scale(1.06); } to { opacity: 1; transform: none; } }
/* confetti: hooguit 20 <i>, alleen transform/opacity, 1,2 s */
.m3g-confetti { position: fixed; inset: 0; z-index: 9840; overflow: hidden; pointer-events: none; }
.m3g-confetti i { position: absolute; top: -16px; width: 10px; height: 14px; border-radius: 3px; border: 1.5px solid var(--ax-rand-sterk);
  animation: m3g-val 1200ms cubic-bezier(.2, .6, .4, 1) forwards; }
@keyframes m3g-val { from { transform: translate(0, 0) rotate(0); opacity: 1; } to { transform: translate(var(--dx, 0), 105vh) rotate(var(--rot, 540deg)); opacity: .2; } }

/* ---------- het maatje Pip ---------- */
.m3g-pip { display: block; width: 120px; height: 120px; overflow: visible; }
.m3g-pip .m3g-pip-lijf { transform-box: fill-box; transform-origin: 50% 90%; animation: m3g-adem 3s ease-in-out infinite; }
.m3g-pip .m3g-pip-oog { transform-box: fill-box; transform-origin: center; animation: m3g-knip 5s infinite; }
.m3g-pip.huppel .m3g-pip-lijf { animation: m3g-huppel 400ms ease-out; }
.m3g-pip.wiebel .m3g-pip-lijf { animation: m3g-wiebel 700ms ease-in-out infinite; }
.m3g-pip [data-laag] { display: none; }
.m3g-pip[data-stadium="1"] [data-laag="ei"], .m3g-pip[data-stadium="2"] [data-laag~="muts"], .m3g-pip[data-stadium="3"] [data-laag~="vleugel"],
.m3g-pip[data-stadium="4"] [data-laag~="vleugel"], .m3g-pip[data-stadium="4"] [data-laag~="jas"],
.m3g-pip[data-stadium="5"] [data-laag~="vleugel"], .m3g-pip[data-stadium="5"] [data-laag~="jas"], .m3g-pip[data-stadium="5"] [data-laag~="kroon"] { display: inline; }
.m3g-pip[data-acc="prive"] [data-acc-laag="prive"], .m3g-pip[data-acc="werk"] [data-acc-laag="werk"], .m3g-pip[data-acc="bedrijf"] [data-acc-laag="bedrijf"] { display: inline; }
.m3g-pip [data-acc-laag] { display: none; }
.m3g-pip .m3g-pip-jas { fill: var(--m3g-wereld); }
@keyframes m3g-adem { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes m3g-knip { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes m3g-huppel { 0% { transform: translateY(0) scale(1, 1); } 25% { transform: translateY(0) scale(1.1, .9); } 55% { transform: translateY(-12px) scale(.94, 1.06); } 100% { transform: translateY(0) scale(1, 1); } }
@keyframes m3g-wiebel { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-8deg); } 75% { transform: rotate(8deg); } }

/* ---------- intro ---------- */
.m3g-intro { position: fixed; inset: 0; z-index: 9900; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 16px; text-align: center; background: radial-gradient(120% 70% at 50% 0%, var(--m3g-nacht-hi) 0%, var(--m3g-nacht) 62%);
  font-family: var(--m3g-font); color: var(--m3g-wit); }
.m3g-intro[hidden] { display: none; }
.m3g-intro-sla { position: absolute; top: calc(10px + max(env(safe-area-inset-top, 0px), var(--app-top, 0px))); right: 10px; z-index: 2; }
.m3g-intro-ster { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: var(--m3g-geel); opacity: .55; animation: m3g-drijf 6s linear infinite; }
@keyframes m3g-drijf { from { transform: translateY(0); } to { transform: translateY(-40px); opacity: 0; } }
.m3g-intro-podium { position: relative; width: 220px; height: 170px; flex: none; }
.m3g-intro-podium .m3g-pip { position: absolute; left: 50%; top: 50%; width: 110px; height: 110px; margin: -55px 0 0 -55px; }
.m3g-intro-flits { position: absolute; left: 50%; top: 50%; width: 80px; height: 80px; margin: -40px 0 0 -40px; border-radius: 50%; background: #fff; opacity: 0; transform: scale(0); }
.m3g-intro-bol { position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; opacity: 0; }
.m3g-intro-bol i { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; border: 1.5px solid var(--ax-rand-sterk); background: var(--m3g-wereld); color: var(--m3g-inkt); }
.m3g-intro-bol svg { width: 26px; height: 26px; }
.m3g-intro-tekst { min-height: 2.6em; margin: 0; font-size: 24px; font-weight: 800; max-width: 22ch; }
.m3g-intro-tekst span { display: inline-block; opacity: 0; transform: translateY(10px); transition: opacity 200ms, transform 200ms var(--m3g-veer); }
.m3g-intro-tekst span.aan { opacity: 1; transform: none; }
.m3g-intro-tik { font-size: 18px; color: var(--m3g-dim); animation: m3g-knipper 1.4s ease-in-out infinite; }
@keyframes m3g-knipper { 50% { opacity: .35; } }
.m3g-intro-xp { width: min(260px, 70vw); opacity: 0; transition: opacity 200ms; }
.m3g-intro-knoppen { display: flex; flex-direction: column; gap: 14px; width: min(360px, calc(100vw - 32px)); opacity: 0; transform: translateY(40px);
  transition: opacity 300ms, transform 400ms var(--m3g-veer); }
/* scènes via data-scene op .m3g-intro */
.m3g-intro[data-scene="barst"] .m3g-pip-lijf { animation: m3g-schud-ei 330ms ease-in-out 3; }
.m3g-intro[data-scene="barst"] .m3g-intro-flits { animation: m3g-flits 500ms 600ms ease-out forwards; }
@keyframes m3g-schud-ei { 25% { transform: rotate(-10deg); } 75% { transform: rotate(10deg); } }
@keyframes m3g-flits { from { opacity: 1; transform: scale(0); } to { opacity: 0; transform: scale(3); } }
.m3g-intro .m3g-intro-bol.vlieg { animation: m3g-bol-in 520ms var(--m3g-veer) forwards; }
@keyframes m3g-bol-in { from { opacity: 0; transform: translate(0, 140px) scale(.3); } to { opacity: 1; transform: translate(var(--bx), var(--by)) scale(1); } }
.m3g-intro[data-scene="draai"] .m3g-intro-baan, .m3g-intro[data-scene="xp"] .m3g-intro-baan, .m3g-intro[data-scene="eind"] .m3g-intro-baan { animation: m3g-draai 6s linear infinite; }
.m3g-intro-baan { position: absolute; inset: 0; }
@keyframes m3g-draai { to { transform: rotate(360deg); } }
.m3g-intro[data-scene="xp"] .m3g-intro-xp, .m3g-intro[data-scene="eind"] .m3g-intro-xp { opacity: 1; }
.m3g-intro[data-scene="xp"] .m3g-intro-xp .m3g-xpbalk-vul, .m3g-intro[data-scene="eind"] .m3g-intro-xp .m3g-xpbalk-vul { transform: scaleX(.35); }
.m3g-intro[data-scene="eind"] .m3g-intro-knoppen { opacity: 1; transform: none; }
/* liggend 844x390: podium naast tekst+knoppen */
@media (orientation: landscape) and (max-height: 500px) {
  .m3g-intro { flex-direction: row; flex-wrap: wrap; gap: 8px 24px; }
  .m3g-intro-podium { width: 180px; height: 150px; }
  .m3g-intro-tekst { font-size: 21px; }
  .m3g-intro-rechts { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .m3g-intro-knoppen { gap: 10px; }
  .m3g-intro-knoppen .m3g-knop.groot { min-height: 56px; }
}
.m3g-intro-rechts { display: contents; }
@media (orientation: landscape) and (max-height: 500px) { .m3g-intro-rechts { display: flex; } }

/* ---------- lege staat per wereld ---------- */
.m3g-leeg { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 22px 18px; text-align: center; border-radius: 24px;
  background: var(--m3g-kaart); border: 1px solid var(--ax-rand); box-shadow: 0 6px 0 0 #120C38, inset 0 0 0 2px var(--m3g-wereld); }
.m3g-leeg-ic { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 22px; background: var(--m3g-wereld); color: var(--m3g-inkt);
  border: 1px solid var(--ax-rand); animation: m3g-dobber 2.6s ease-in-out infinite; }
.m3g-leeg-ic svg { width: 38px; height: 38px; }
@keyframes m3g-dobber { 50% { transform: translateY(-6px); } }
.m3g-leeg h3 { margin: 0; font-size: 24px; font-weight: 800; color: var(--m3g-wereld); }
.m3g-leeg p { margin: 0; color: var(--m3g-dim); max-width: 32ch; }
.m3g-leeg .m3g-zeg { color: var(--m3g-wit); font-weight: 700; }
.m3g-leeg-knoppen { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; margin-top: 4px; }
.m3g-leeg-knoppen .m3g-knop { flex: 1 1 160px; }

/* ---------- notitietegels (notitietegels.js .nt-vak/.nt-ic) in game-stijl ---------- */
.m3g-tegels .nt-tegel, .m3g-tegel { border-radius: 22px; background: var(--m3g-kaart); color: var(--m3g-wit); border: 1px solid var(--ax-rand);
  box-shadow: 0 6px 0 0 #120C38, inset 0 0 0 2px var(--m3g-wereld); padding: 12px; }
.m3g-tegels .pl-lint { background: var(--m3g-wereld); color: var(--m3g-inkt); }
.m3g-tegels .nt-vak { background: rgba(0, 0, 0, .22); border: 1px solid var(--ax-rand); border-radius: 16px; color: var(--m3g-wit); }
/* geel vakje met eerste letter tot het AI-icoon klaar is (zelfde regel als styles.css .nt-ic, alleen ronder) */
.m3g-tegels .nt-ic { border-radius: 14px; background: var(--m3g-geel); color: var(--m3g-inkt); }
.m3g-tegels .nt-ic.echt { background: #1B1B22; animation: m3g-plof 300ms var(--m3g-veer); }
@keyframes m3g-plof { 0% { transform: scale(.6); } 70% { transform: scale(1.1); } 100% { transform: scale(1); } }
.m3g-tegels .nt-vak.klaar { opacity: .65; }
.m3g-tegels .nt-vink { color: var(--m3g-goed); }

/* ---------- geluidschakelaar ---------- */
.m3g-schakel { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 14px; border-radius: 18px;
  background: var(--m3g-kaart); border: 1px solid var(--ax-rand); font-weight: 800; cursor: pointer; }
.m3g-schakel input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.m3g-schakel-baan { position: relative; width: 60px; height: 34px; flex: none; border-radius: 17px; background: #120C38; border: 1px solid var(--ax-rand); }
.m3g-schakel-baan::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--m3g-dim);
  transition: transform 160ms var(--m3g-veer); }
.m3g-schakel input:checked + .m3g-schakel-baan { background: var(--m3g-goed); }
.m3g-schakel input:checked + .m3g-schakel-baan::after { transform: translateX(26px); background: var(--m3g-inkt); }
.m3g-schakel input:focus-visible + .m3g-schakel-baan { outline: 3px solid var(--m3g-wit); outline-offset: 2px; }

/* ---------- minder beweging: geen confetti, geen boog, geen adem; fades max 150 ms. Ook .device.flat (bestaande app-stand). ---------- */
@media (prefers-reduced-motion: reduce) {
  .m3g *, .m3g-intro *, .m3g-toast, .m3g-feest-kaart, .m3g-leeg-ic { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 150ms !important; }
  .m3g-confetti, .m3g-vlieg, .m3g-intro-ster { display: none !important; }
  .m3g-pip .m3g-pip-lijf, .m3g-pip .m3g-pip-oog, .m3g-leeg-ic, .m3g-intro-tik { animation: none !important; }
}
.m3g-rustig *, .device.flat .m3g * { animation: none !important; transition-duration: 150ms !important; }
.m3g-rustig .m3g-confetti, .m3g-rustig .m3g-vlieg, .device.flat .m3g-confetti { display: none !important; }