/* ===== Memory Match (CSS 3D card flips) ===== */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
#mbands{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:4px}
.mband{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:150px;padding:12px 8px;border-radius:22px;border:3px solid var(--btnb);background:var(--btn);text-align:center;position:relative;box-shadow:0 6px 0 #0005,0 10px 18px #0004}
.mband .bi{font-size:44px;line-height:1.1;filter:drop-shadow(0 3px 4px #0006)}
.mband b{font-size:20px}.mband small{font-size:13px;opacity:.85;font-weight:600}.mband em{font-style:normal;font-size:11.5px;opacity:.75;font-weight:500;margin-top:4px;line-height:1.25}
.mband[aria-checked=true]{background:var(--acc);color:#1a1a1a;border-color:#fff;transform:translateY(-2px)}
.mband[aria-checked=true] em,.mband[aria-checked=true] small{opacity:.85}
#mthemes{margin-top:2px}
.mcard.mt .big{font-size:50px}
#mmap .mapin{position:relative;width:100%;margin:8px 0 24px}
#mmap .path{position:absolute;left:0;top:0;width:100%;pointer-events:none}
#mmap .path path{fill:none;stroke:var(--acc);stroke-opacity:.45;stroke-width:6;stroke-dasharray:2 12;stroke-linecap:round;vector-effect:non-scaling-stroke}
#s-mlevels.vpk .node{width:78px;height:78px;margin:-39px 0 0 -39px;font-size:30px}
#s-mlevels.vpk .node small{font-size:14px}

/* stage + board */
#mstage{flex:1;position:relative;min-height:0;overflow:hidden;display:flex;align-items:center;justify-content:center}
#mboard{display:grid;justify-content:center;align-content:center;gap:var(--gap,10px);grid-template-columns:repeat(var(--cols,4),var(--cw,80px));grid-auto-rows:var(--ch,90px)}
#mfx{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:7}
.mm-card{--t:calc(var(--cw)*.075);position:relative;display:block;width:var(--cw);height:var(--ch);padding:0;margin:0;min-height:0;border:0;border-radius:0;background:none;perspective:760px;cursor:pointer;color:#222;font:inherit;touch-action:manipulation;outline:none}
.mm-card:active{filter:none;transform:none}
.mm-shadow{position:absolute;left:4%;right:4%;bottom:-5%;height:16%;border-radius:50%;background:radial-gradient(ellipse at center,#000a 0,#0000 70%);filter:blur(3px);transition:transform .4s,opacity .4s;opacity:.8}
.mm-card.up .mm-shadow{transform:scaleX(1.06);opacity:.55}
.mm-lift{position:absolute;inset:0;display:block;transform-style:preserve-3d}
.mm-in{position:absolute;inset:0;display:block;transform-style:preserve-3d;transform:rotateX(-9deg) rotateY(6deg);transition:transform .6s cubic-bezier(.3,1.25,.5,1)}
.mm-card:hover .mm-in{transform:rotateX(-12deg) rotateY(3deg)}
.mm-card.up .mm-in,.mm-card.up:hover .mm-in{transform:rotateX(-9deg) rotateY(186deg)}
.mm-card.fl .mm-lift{animation:mm-lift .6s ease-out}
.mm-card.bounce .mm-lift{animation:mm-bounce .8s cubic-bezier(.3,1.4,.5,1)}
.mm-card.no .mm-lift{animation:mm-wobble .55s ease-in-out}
.mm-card.hnt .mm-lift{animation:mm-hint .55s ease-in-out 5}
.mm-card.hnt::after,.mm-card:focus-visible::after{content:"";position:absolute;inset:-6px;border-radius:calc(var(--cw)*.2);border:4px solid var(--acc);box-shadow:0 0 14px var(--acc);pointer-events:none}
.mm-card:focus-visible::after{border-color:#fff;box-shadow:0 0 0 3px #000a,0 0 14px #fff}
.mm-side{position:absolute;display:block;background:var(--cc1);filter:brightness(.62);backface-visibility:visible}
.mm-side.l{left:calc(var(--t)/-2);top:calc(var(--cw)*.11);width:var(--t);height:calc(100% - var(--cw)*.22);transform:rotateY(90deg)}
.mm-side.r{left:calc(100% - var(--t)/2);top:calc(var(--cw)*.11);width:var(--t);height:calc(100% - var(--cw)*.22);transform:rotateY(90deg)}
.mm-side.t{top:calc(var(--t)/-2);left:calc(var(--cw)*.11);height:var(--t);width:calc(100% - var(--cw)*.22);transform:rotateX(90deg)}
.mm-side.b{top:calc(100% - var(--t)/2);left:calc(var(--cw)*.11);height:var(--t);width:calc(100% - var(--cw)*.22);transform:rotateX(90deg);filter:brightness(.45)}
.mm-cv,.mm-fc{position:absolute;inset:0;border-radius:calc(var(--cw)*.17);backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center}
.mm-cv{transform:translateZ(calc(var(--t)/2));background:radial-gradient(circle at 30% 25%,#ffffff55,#0000 45%),repeating-linear-gradient(45deg,#ffffff1c 0 8px,#0000 8px 16px),linear-gradient(145deg,var(--cc1),var(--cc2));border:calc(var(--cw)*.045) solid #fff;box-shadow:inset 0 0 0 calc(var(--cw)*.03) #0003}
.mm-cv i{font-style:normal;font-size:calc(var(--cw)*.5);font-weight:900;color:#fff;text-shadow:0 3px 0 #0004,0 0 14px #fff6;line-height:1}
.mm-fc{transform:rotateY(180deg) translateZ(calc(var(--t)/2));background:radial-gradient(circle at 30% 20%,#fff,#fff8e6 70%);border:calc(var(--cw)*.045) solid var(--cc1);box-shadow:inset 0 -6px 0 #0000001a;color:#26233a;text-align:center;line-height:1.05}
.mm-fc .g{display:block;font-size:calc(var(--cw)*.5);line-height:1.08;font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",system-ui,sans-serif}
.mm-fc .g.ltr{font-family:system-ui,"Arial Rounded MT Bold",Arial,sans-serif;font-weight:900;font-size:calc(var(--cw)*.66);color:var(--cc1);filter:brightness(.8);text-shadow:0 2px 0 #fff}
.mm-fc .g.wd{font-family:system-ui,"Arial Rounded MT Bold",Arial,sans-serif;font-weight:900;color:#26233a;font-size:calc(var(--cw)*.27)}
.mm-fc .g.wd.m{font-size:calc(var(--cw)*.21)}.mm-fc .g.wd.l{font-size:calc(var(--cw)*.165)}
.mm-fc .lb{display:block;font-weight:800;font-size:calc(var(--cw)*.17);margin-top:calc(var(--cw)*.02);color:#3b3560;letter-spacing:.01em}
.mm-fc .lb.m{font-size:calc(var(--cw)*.14)}
.mm-fc .g.hb{font-size:calc(var(--cw)*.4)}
.mm-card.done .mm-fc{box-shadow:inset 0 0 0 calc(var(--cw)*.03) #2fd16b,inset 0 -6px 0 #0000001a;background:radial-gradient(circle at 30% 20%,#fff,#e9ffe9 75%)}
.mm-card.done{cursor:default}
.mm-card.done .mm-shadow{opacity:.35}
@keyframes mm-lift{0%{transform:translateZ(0) translateY(0)}45%{transform:translateZ(calc(var(--cw)*.55)) translateY(calc(var(--cw)*-.08))}100%{transform:translateZ(0) translateY(0)}}
@keyframes mm-bounce{0%{transform:translateY(0) scale(1,1)}20%{transform:translateY(0) scale(1.1,.88)}45%{transform:translateY(calc(var(--cw)*-.22)) scale(.94,1.08)}70%{transform:translateY(0) scale(1.06,.94)}100%{transform:translateY(0) scale(1,1)}}
@keyframes mm-wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-5deg)}45%{transform:rotate(4deg)}70%{transform:rotate(-2.5deg)}}
@keyframes mm-hint{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(var(--cw)*-.1))}}
@keyframes mm-burst{0%{transform:translate(-50%,-50%) scale(.4) rotate(0);opacity:1}100%{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1) rotate(var(--rot));opacity:0}}
@keyframes mm-fall{0%{transform:translateY(0) rotate(0);opacity:1}100%{transform:translateY(var(--fy)) translateX(var(--fx)) rotate(var(--rot));opacity:.9}}
#mfx i{position:absolute;display:block;font-style:normal;pointer-events:none}
#mfx i.b{width:10px;height:10px;border-radius:3px;animation:mm-burst .9s ease-out forwards}
#mfx i.e{font-size:22px;line-height:1;animation:mm-burst 1.1s ease-out forwards}
#mfx i.fp{top:-24px;animation:mm-fall linear forwards}
#mfx i.fp.sq{width:10px;height:15px;border-radius:2px}
#mwin{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#000a;z-index:9}
#mwin[hidden]{display:none}
#mwin>div{background:var(--panel);padding:22px 24px;border-radius:22px;text-align:center;border:3px solid var(--acc);width:min(88vw,380px);animation:mm-pop .5s cubic-bezier(.2,1.5,.4,1) both}
#mwin h2{margin:0 0 8px;font-size:26px}#mwin p{margin:10px 0 16px;opacity:.95}
@keyframes mm-pop{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
#mtoast{white-space:nowrap;position:absolute;top:4px;left:50%;transform:translateX(-50%);background:var(--panel);border:2px solid var(--acc);padding:8px 16px;border-radius:22px;font-weight:800;z-index:8;pointer-events:none;max-width:96%;text-align:center;font-size:14px;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 12px #0005}
#mtoast[hidden]{display:none}
#mnav button{font-size:14px;white-space:nowrap}
#mnav button[aria-pressed=true]{background:var(--acc);color:#1a1a1a;border-color:#fff}
#mnav button#mSound[aria-pressed=false]{background:var(--btn);color:#eef}
#s-mgame.vpk #mnav button{min-height:62px;font-size:18px;border-radius:18px}
#s-mgame.vpk #mTimerBtn,#s-mgame.vpk #mMovesBox,#s-mgame.vpk #mTimeBox{display:none}
#s-mgame.vpk h2{font-size:20px}
#s-mgame.vpk .stats b{font-size:22px}
#s-mgame.vpk #mwin h2{font-size:30px}
#s-mgame.vpk #mwin button{min-height:60px;font-size:18px}
#s-mgame.vpk .stars{font-size:54px}
#s-mgame.elem #mTimeBox{display:none}#s-mgame.elem.timer #mTimeBox{display:block}
@media (min-width:700px){#s-mgame nav,#s-mgame .hint,#mstartbody{max-width:640px;margin-left:auto;margin-right:auto;width:100%}}
@media (max-height:520px) and (orientation:landscape){#s-mgame header.top{padding:2px 10px}#s-mgame nav button{min-height:40px}#s-mgame.vpk #mnav button{min-height:44px}#mHelp{display:none}#mbands .mband{min-height:110px}}
@media (prefers-reduced-motion:reduce){.mm-in{transition-duration:.01s}.mm-card.fl .mm-lift,.mm-card.bounce .mm-lift,.mm-card.no .mm-lift,.mm-card.hnt .mm-lift{animation:none}#mfx i{animation-duration:.01s!important}}
/* numbers & math cards */
.mm-fc .g.num{font-family:system-ui,"Arial Rounded MT Bold",Arial,sans-serif;font-weight:900;font-size:calc(var(--cw)*.6);color:var(--cc1);filter:brightness(.78);text-shadow:0 2px 0 #fff;line-height:1}
.mm-fc .g.num.m{font-size:calc(var(--cw)*.5)}.mm-fc .g.num.s{font-size:calc(var(--cw)*.38)}
.mm-fc .g.eq{font-family:system-ui,"Arial Rounded MT Bold",Arial,sans-serif;font-weight:900;font-size:calc(var(--cw)*.27);color:#26233a;white-space:nowrap;letter-spacing:-.01em}
.mm-fc .g.eq.m{font-size:calc(var(--cw)*.22)}.mm-fc .g.eq.s{font-size:calc(var(--cw)*.185)}
.mm-fc .g.cnts{display:flex;flex-wrap:wrap;justify-content:center;align-content:center;line-height:1.12;font-family:"Noto Color Emoji","Apple Color Emoji","Segoe UI Emoji",system-ui,sans-serif}
.mm-fc .g.cnts i{font-style:normal;display:block;line-height:1.1}
/* ---- 3 age bands + middle school ---- */
#mbands{grid-template-columns:repeat(3,1fr);gap:10px}
.mband{min-height:140px;padding:10px 6px;text-align:center}
@media (max-width:520px){#mbands{gap:6px}.mband{min-height:118px;padding:8px 3px}.mband .bi{font-size:32px}.mband b{font-size:15px;line-height:1.1}.mband small{font-size:11.5px}.mband em{font-size:10px}}
@media (max-width:340px){.mband b{font-size:13px}.mband em{display:none}}
.mm-fc .g.alg,.mm-fc .g.tx{font-family:system-ui,"Segoe UI",Arial,sans-serif;font-weight:800;color:#26233a;line-height:1.15;text-align:center;max-width:96%;max-height:94%;overflow:hidden;overflow-wrap:anywhere;hyphens:auto;white-space:normal}
.mm-fc .g.alg{font-weight:900;font-variant-numeric:tabular-nums;line-height:1.25}
.mm-fc .g.alg.an,.mm-fc .g.tx:not(.tm){color:#5a189a}
.mm-fc .g.tx.tm{color:#1b3a5c;font-weight:900}
.mm-fc .g.alg small{font-size:.8em;font-weight:700;opacity:.85}
.mm-fc .g.alg sup{font-size:.62em;vertical-align:.55em;line-height:0}
.fr{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;font-size:.82em;line-height:1.05;margin:0 .08em}
.fr>span:first-child{border-bottom:.09em solid currentColor;padding:0 .12em}
.fr>span{padding:0 .12em}
.rad{border-top:.08em solid currentColor;padding-top:.02em;margin-left:.02em}
#mmap .mapsec{position:absolute;left:50%;transform:translate(-50%,0);background:#fff3;border:2px solid #fff8;color:#fff;font-weight:900;font-size:14px;padding:4px 12px;border-radius:999px;white-space:nowrap;pointer-events:none;text-shadow:0 1px 2px #0008}