/* Martha 3D startscherm (20-10-2026, klus "3D account en drie werelden"). Kaal en leesbaar; de game-laag (Camila) komt hierop. */
.m3d-start { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 18px;
  background: rgba(8, 12, 28, .96); overflow-y: auto; -webkit-overflow-scrolling: touch; }
.m3d-start[hidden] { display: none; }
.m3d-start-kaart { width: 100%; max-width: 420px; background: var(--paper, #fff); color: var(--ink, #111); border: 1px solid var(--ax-rand);
  border-radius: 18px; padding: 18px 16px; margin: auto; }
.m3d-start-titel { margin: 0 0 8px; font-size: 26px; font-weight: 900; }
.m3d-start-zin { margin: 0 0 14px; font-size: 15px; line-height: 1.4; }
.m3d-start-form { display: flex; flex-direction: column; gap: 10px; margin: 0 0 10px; }
.m3d-start-veld { font: inherit; font-size: 16px; min-height: 48px; padding: 0 12px; border: 1.5px solid var(--ax-rand-sterk); border-radius: 12px; background: #fff; color: #111; }
.m3d-start-knop { font: inherit; font-weight: 800; font-size: 16px; min-height: 48px; border: 1px solid var(--ax-rand); border-radius: 14px;
  background: var(--accent, #ffd23f); color: #111; cursor: pointer; }
.m3d-start-knop.groot { display: block; width: 100%; min-height: 60px; font-size: 19px; margin: 0 0 12px; }
.m3d-start-link, .m3d-start-terug { font: inherit; font-size: 15px; min-height: 48px; background: none; border: 0; color: inherit; text-decoration: underline; cursor: pointer; padding: 0 4px; }
.m3d-start-link.klein { font-size: 13px; }   /* 25-10 Camila nr 5: opacity weg, 7,9:1 */
/* 25-10-2026 (mailcode): tabbladen Inloggen | Account maken bovenaan de kaart */
.m3d-start-tabs { display: flex; gap: 4px; padding: 4px; margin: 0 0 14px; border: 1px solid var(--ax-rand); border-radius: 14px; }
.m3d-start-tab { flex: 1; font: inherit; font-weight: 800; font-size: 16px; min-height: 44px; border: 0; border-radius: 10px; background: none; color: inherit; cursor: pointer; }
.m3d-start-tab[aria-selected="true"] { background: var(--accent, #ffd23f); color: #111; }
.m3d-start-eigenaar { margin: 14px 0 0; font-size: 12px; opacity: .7; }
.m3d-start-fout { margin: 10px 0 0; font-size: 14px; font-weight: 700; }
.m3d-uitleg { font-size: 14px; line-height: 1.45; margin: 0 0 12px; }
.m3d-uitleg p, .m3d-uitleg ol { margin: 0 0 8px; }
.m3d-uitleg ol { padding-left: 20px; }
.pl-wereld-zin { margin: 4px 2px 10px; font-size: 14px; line-height: 1.4; }

/* ===== 25-10-2026 schets E "wit met app-iconen" (Alex: "gewoon wit, niet meer gemengd met iets"; vervangt schets A, klus "Ailex
   startscherm E inbouwen", Osvaldo naar Camila's schets). Effen wit achter alle stappen, inkt #262A4D. Op de stap keuze staat de
   iconenkring (startscherm.js wereld()) boven de knoppen; maten in cqw van een vlak van 412 x 540, zodat hij meeschaalt.
   Met #m3dStart in de kiezer, want kleur.css (html .m3d-start ...) en game.css (.m3g-aan #m3dKnopInloggen) komen later en
   maakten de knop Inloggen wit op wit (speelgoed.css: --m3g-wit en --m3g-kaart allebei var(--kaart)). */
html #m3dStart { font-family: 'SgRond', system-ui, sans-serif; overflow-x: hidden; background: #FFFFFF; color: #262A4D; }
html #m3dStart .m3d-start-kaart { position: relative; z-index: 1; border: 1px solid #E3E6FF; border-radius: 28px; background: #FFFFFF; color: #262A4D;
  box-shadow: 0 20px 40px -24px rgba(51, 65, 184, .45); font-family: inherit; }
html #m3dStart .m3d-start-titel { color: #3341B8; }
html #m3dStart :is(.m3d-start-zin, .m3d-uitleg) { color: #262A4D; }
html #m3dStart .m3d-start-veld { border: 1.5px solid #9AA0C8; background: #F6F7FF; color: #262A4D; }
html #m3dStart .m3d-start-veld::placeholder { color: #5A5F86; opacity: 1; }
html #m3dStart .m3d-start-veld:focus-visible { outline: 3px solid #3341B8; outline-offset: 1px; }
html #m3dStart .m3d-start-knop { border: 0; border-radius: 16px; font-weight: 800; color: #FFFFFF;
  background: linear-gradient(135deg, #4F5FF0, #3341B8); box-shadow: 0 4px 0 #262A8A; transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
html #m3dStart .m3d-start-knop:active { transform: translateY(3px); box-shadow: 0 1px 0 #262A8A; }
html #m3dStart :is(.m3d-start-knop, .m3d-start-link, .m3d-start-terug, .m3d-start-tab):focus-visible { outline: 3px solid #262A4D; outline-offset: 2px; }
html #m3dStart :is(.m3d-start-link, .m3d-start-terug) { color: #3341B8; font-weight: 700; text-underline-offset: 3px; }
html #m3dStart .m3d-start-tabs { border: 1px solid #C8CBEE; background: #F6F7FF; }
html #m3dStart .m3d-start-tab { color: #262A4D; }
html #m3dStart .m3d-start-tab[aria-selected="true"] { background: linear-gradient(135deg, #4F5FF0, #3341B8); color: #FFFFFF; }
html #m3dStart .m3d-start-fout { color: #B3123F; }

/* keuze: iconenkring boven, knoppen eronder, alles op hetzelfde wit (zoals de schets op 412 x 915) */
html #m3dStart[data-stap="keuze"] { padding: 0; flex-direction: column; align-items: stretch; justify-content: flex-end; }
#m3dStart .ax-wereld { position: relative; flex: 1 1 auto; min-height: 150px; overflow: hidden; container-type: size; }
#m3dStart .ax-doos { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%;
  width: min(100cqw, 100cqh * 412 / 540, 560px); aspect-ratio: 412 / 540; container-type: inline-size; }   /* tablet: niet opgeblazen */
#m3dStart .ax-decor { position: absolute; inset: 0; }
#m3dStart .ax-decor i { position: absolute; display: block; }
#m3dStart .ax-decor svg { display: block; width: 100%; height: 100%; }
#m3dStart .ax-hoofd { width: 41.26cqw; height: 41.26cqw; animation: ax-wiebel 4s ease-in-out infinite; }
@keyframes ax-wiebel { 0%, 100% { transform: rotate(-3deg) scale(1); } 50% { transform: rotate(3deg) scale(1.04); } }
#m3dStart .ax-kring { width: 12.14cqw; height: 12.14cqw; }
#m3dStart .ax-zweef { animation: ax-zweef var(--t, 4s) ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes ax-zweef { 0%, 100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-1.94cqw) rotate(4deg); } }
#m3dStart .ax-logo { position: absolute; top: 79.6%; left: 0; right: 0; margin: 0; text-align: center; font: 800 18.4cqw/1 'SgRond', system-ui, sans-serif;
  letter-spacing: .02em; text-shadow: 0 1cqw 0 rgba(38, 42, 77, .18); outline: none; }
#m3dStart .ax-logo span { display: inline-block; animation: ax-hup 4s ease-in-out infinite; }
#m3dStart .ax-logo span:nth-child(2) { animation-delay: .15s; } #m3dStart .ax-logo span:nth-child(3) { animation-delay: .3s; }
#m3dStart .ax-logo span:nth-child(4) { animation-delay: .45s; } #m3dStart .ax-logo span:nth-child(5) { animation-delay: .6s; }
@keyframes ax-hup { 0%, 85%, 100% { transform: translateY(0); } 92% { transform: translateY(-2cqw); } }
html #m3dStart[data-stap="keuze"] .m3d-start-kaart { flex: none; width: 100%; max-width: none; margin: 0; border: 0; border-radius: 0; box-shadow: none;
  padding: 6px 26px calc(24px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; align-items: center; gap: 16px; }
html #m3dStart[data-stap="keuze"] .m3d-start-kaart > * { width: 100%; max-width: 420px; margin: 0; }
html #m3dStart[data-stap="keuze"] .m3d-start-zin { font-size: 17px; line-height: 1.4; font-weight: 600; text-align: center; }
html #m3dStart[data-stap="keuze"] .m3d-start-knop.groot { min-height: 56px; font-size: 18px; }
html #m3dStart #m3dKnopNieuw { margin-top: 6px; }
html #m3dStart #m3dKnopInloggen { background: #FFFFFF; color: #3341B8; border: 2.5px solid #3341B8; box-shadow: 0 4px 0 #C8CBEE; }
html #m3dStart #m3dKnopInloggen:active { box-shadow: 0 1px 0 #C8CBEE; }
html #m3dStart[data-stap="keuze"] .m3d-start-link { min-height: 44px; font-size: 15px; }
/* lage schermen (liggend, klein): de kring krimpt mee, de knoppen blijven heel; heel laag mag de laag scrollen */
@media (max-height: 560px) { html #m3dStart[data-stap="keuze"] { justify-content: flex-start; }
  html #m3dStart[data-stap="keuze"] .m3d-start-kaart { gap: 10px; padding-top: 22px; } }
@media (prefers-reduced-motion: reduce) { #m3dStart, #m3dStart * { animation: none !important; transition: none !important; } }
html.ju-rustig #m3dStart, html.ju-rustig #m3dStart * { animation: none !important; }