/* Multiplication games */
.mg{border:2px solid var(--ink);border-radius:18px;background:#fff;box-shadow:6px 6px 0 var(--pencil);padding:14px 18px 18px;margin:14px 0 28px}
.mg:fullscreen{overflow:auto;border-radius:0;box-shadow:none;padding:24px max(18px,calc(50vw - 420px))}
.mg button{font:inherit;cursor:pointer}
.mg-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.mg-fs{background:none;border:1.5px solid var(--line);border-radius:8px;padding:3px 10px;font-size:.85rem;color:var(--ink)}
.mg-setup p{margin:0 0 10px}
.mg-row{display:grid;grid-template-columns:90px 1fr;gap:6px 12px;align-items:start;padding:7px 0;border-bottom:1px dashed var(--line)}
.mg-lab{font-weight:700;font-size:.92rem;padding-top:6px}
.mg-opts{display:flex;flex-wrap:wrap;gap:6px}
.mg-o{border:1.5px solid var(--line);background:#fff;border-radius:999px;padding:5px 14px;font-weight:600;font-size:.92rem;color:var(--ink)}
.mg-o[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.mg-setup .btn{margin-top:14px}
.mg-best{color:var(--marker-dark);font-weight:700;margin-top:10px}
.mg-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px;justify-content:center}
.mg-res{text-align:center;padding:10px 0}
.mg-res h3{margin:0 0 6px;font-size:1.5rem}
.mg-medal{font-size:3rem;margin:0;line-height:1.2}
.mg-list{font-size:.9rem;color:var(--muted)}
.mg-fb{min-height:1.5em;text-align:center;margin:6px 0;font-weight:600}
.mg-fb.good{color:var(--marker-dark)}.mg-fb.bad{color:#c0392b}
.mg-stat{display:flex;justify-content:space-between;font-weight:700;margin-bottom:8px}
/* race */
.mg-track{background:#3b4252;border-radius:14px;padding:8px 10px;margin-bottom:10px}
.mg-lane{position:relative;height:46px;border-bottom:2px dashed rgba(255,255,255,.35)}
.mg-lane:last-child{border-bottom:0}
.mg-lane.you{background:rgba(255,201,60,.18);border-radius:8px}
.mg-name{position:absolute;left:4px;top:15px;font-size:.72rem;font-weight:700;color:#fff;opacity:.85}
.mg-car{position:absolute;left:46px;top:10px;transition:left .15s linear}
.mg-flag{position:absolute;right:2px;top:8px;font-size:1.4rem}
.mg-qrow{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px}
.mg-q{font-size:clamp(2rem,7vw,2.8rem);font-weight:700;font-variant-numeric:tabular-nums}
.mg-in{width:3.2em;font:inherit;font-size:clamp(2rem,7vw,2.8rem);font-weight:700;text-align:center;border:3px solid var(--ink);border-radius:14px;padding:0 6px}
.mg-qrow .mg-fb{flex-basis:100%}
.mg-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:280px;margin:6px auto 0}
.mg-pad button{border:1.5px solid var(--line);background:var(--grid);border-radius:12px;padding:10px 0;font-size:1.3rem;font-weight:700;color:var(--ink)}
.mg-pad .mg-ok{background:var(--marker);color:#fff;border-color:var(--marker)}
/* match */
.mg-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.mg-cards.c16{grid-template-columns:repeat(4,minmax(0,1fr))}.mg-cards.c20{grid-template-columns:repeat(5,minmax(0,1fr))}
.mg-card{position:relative;aspect-ratio:4/3;border:0;border-radius:12px;background:var(--ink);color:#fff;font-weight:700;font-size:clamp(1rem,3.6vw,1.5rem);box-shadow:0 3px 0 rgba(0,0,0,.2);transition:transform .15s}
.mg-card:hover{transform:translateY(-2px)}
.mg-card .mg-face{display:none}
.mg-card.up,.mg-card.done{background:#fff;color:var(--ink);border:2px solid var(--line)}
.mg-card.up .mg-face,.mg-card.done .mg-face{display:inline}.mg-card.up .mg-back,.mg-card.done .mg-back{display:none}
.mg-card .mg-face.fact{color:#2f4f9e}
.mg-card.done{background:#e6f4ee;border-color:var(--marker)}
.mg-card.miss{background:#fbeaea;border-color:#c0392b}
.mg-back{font-size:1.6rem;color:var(--pencil)}
/* bingo */
.mg-call{display:flex;flex-direction:column;align-items:center;gap:6px;background:var(--grid);border-radius:14px;padding:10px}
.mg-calllab{font-size:.85rem;color:var(--muted);margin-right:10px}
.mg-callq{font-size:clamp(2rem,7vw,2.6rem);font-weight:700}
.mg-clock{width:100%;max-width:340px;height:8px;background:#fff;border-radius:99px;overflow:hidden}
.mg-clock i{display:block;height:100%;background:#3b6fd8}.mg-clock i.low{background:#e67e22}
.mg-board{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;max-width:440px;margin:0 auto}
.mg-cell{aspect-ratio:1;border:2px solid var(--line);border-radius:10px;background:#fff;font-weight:700;font-size:clamp(1rem,4vw,1.4rem);color:var(--ink)}
.mg-cell.on{background:var(--pencil);border-color:#e0a800}
.mg-cell.free{font-size:.8rem}
.mg-cell.win{background:var(--marker);color:#fff;border-color:var(--marker)}
.mg-cell.shake{animation:mgshake .35s}
@keyframes mgshake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.mg-stat2{text-align:center;font-size:.9rem;color:var(--muted)}
/* arrays */
.mg-task{font-size:1.15rem;text-align:center;margin:4px 0 10px}
.mg-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;max-width:420px;margin:0 auto;touch-action:manipulation}
.mg-dot{aspect-ratio:1;border:0;border-radius:50%;background:#e3e9f4;padding:0}
.mg-dot.hov{background:#c7d4ee}
.mg-dot.on{background:#2f4f9e}
.mg-live{text-align:center;font-weight:700;margin:8px 0 0}
.mg-found{text-align:center;color:var(--marker-dark);font-weight:600;min-height:1.4em}
/* hub cards */
.mg-hub{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;list-style:none;padding:0;margin:12px 0 22px}
.mg-hub a{display:block;border:2px solid var(--ink);border-radius:14px;padding:14px 16px;text-decoration:none;color:var(--ink);background:#fff;box-shadow:4px 4px 0 var(--pencil);height:100%}
.mg-hub a:hover{transform:translateY(-2px)}
.mg-hub .ic{font-size:2rem;display:block}
.mg-hub strong{display:block;font-size:1.1rem;margin:4px 0}
.mg-hub span.d{font-size:.9rem;color:var(--muted)}
.mg-hub span.g{display:table;margin-top:6px;font-size:.78rem;font-weight:700;background:var(--grid);border-radius:99px;padding:2px 10px}
@media (max-width:640px){.mg{padding:12px 10px}.mg-row{grid-template-columns:1fr}.mg-lab{padding-top:0}.mg-cards.c20{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mg{position:relative;overflow:hidden}
.mg-confetti{position:absolute;inset:0;pointer-events:none}
.mg-confetti i{position:absolute;top:-30px;font-style:normal;animation:mgfall 2.2s ease-in forwards}
@keyframes mgfall{to{transform:translateY(560px) rotate(300deg);opacity:0}}
@media (max-width:640px){.mg-pad{max-width:none;gap:10px}.mg-pad button{padding:15px 0;font-size:1.55rem}.mg-o{padding:8px 14px;font-size:1rem}.mg-btns .btn{flex:1 1 100%;padding:14px}}

/* rulebook: 48px targets, 8px gaps */
.mg-opts,.mg-btns{gap:8px}
.mg-o,.mg-fs,.mg-btns .btn{min-height:48px}
.mg-pad{gap:8px}.mg-pad button{min-height:56px}
.mg-stars{font-size:2.2rem;margin:0;line-height:1.2}.mg-stars span{color:#c9cfdb}.mg-fb.wait{color:#9a6200}
.mg-more{margin-top:6px}.mg-more summary{min-height:48px;display:flex;align-items:center;cursor:pointer;font-weight:600}
.mg-task{font-size:1.5rem}
.mg-board.big .mg-cell{font-size:1.75rem;font-weight:700}
/* fraction mode (data-op="frac") */
.mgf{display:inline-flex;flex-direction:column;align-items:center;vertical-align:middle;line-height:1.05}.mgf>span:first-child{border-bottom:.09em solid currentColor;padding:0 .14em}.mgf .mgf-s{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.mgm{display:inline-flex;align-items:center;gap:.12em}.mgf-w{font-size:1.15em}
.mgfr .mg-q{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:clamp(1.5rem,6vw,2rem)}
.mg-qt{font-size:clamp(1.5rem,5.5vw,1.75rem);font-weight:700}.mg-qf{font-size:1.2em}
.mg-chs{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin:10px 0 4px}
.mg-ch{min-width:84px;min-height:84px;padding:8px 14px;border:2px solid var(--line);border-radius:14px;background:#fff;font-size:clamp(1.6rem,6vw,2rem);font-weight:700;color:var(--ink);box-shadow:0 3px 0 rgba(0,0,0,.12)}
.mg-ch:hover{border-color:var(--marker)}.mg-ch:active{transform:translateY(2px);box-shadow:none}
.mg-card .mgp{max-width:80%;height:auto;vertical-align:middle}
.mg-card.up .mg-face .mgp,.mg-card.done .mg-face .mgp{display:inline-block}
.mgfc .mg-callq{display:inline-flex;align-items:center;min-height:72px}
.mgfb{max-width:400px}.mgfb .mg-cell{font-size:clamp(1.3rem,5.5vw,1.7rem)}
.mgw{display:inline-block;font-size:.62em;line-height:1.15;font-weight:700;text-align:center;max-width:9em;overflow-wrap:anywhere}.mg-callq .mgw{font-size:.8em;max-width:12em}.mg-face .mgw{font-size:.95rem;overflow-wrap:normal;padding:0 3px}.mg-cards:has(.mgw){grid-template-columns:repeat(4,minmax(0,1fr))}@media (max-width:640px){.mg-cards:has(.mgw),.mg-cards.c20:has(.mgw){grid-template-columns:repeat(3,minmax(0,1fr))}.mg-face .mgw{font-size:.8rem}}@media (max-width:360px){.mg-face .mgw{font-size:.7rem}}