.mm-game { --mm-ink:#292445; --mm-muted:#706984; --mm-purple:#6d4de4; --mm-line:#e5def2; max-width:720px; margin-inline:auto; color:var(--mm-ink); font-family:inherit; text-align:center; min-width:0; }
.mm-game *, .mm-game *::before, .mm-game *::after { box-sizing:border-box; }
.mm-game button,.mm-game a { -webkit-tap-highlight-color:transparent; }
.mm-game button { font:inherit; cursor:pointer; touch-action:manipulation; }
.mm-game button:disabled { cursor:default; opacity:.58; }
.mm-game button:focus-visible,.mm-game a:focus-visible,.mm-game summary:focus-visible { outline:3px solid #8f72ef; outline-offset:3px; }
.mm-status { display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left; padding:4px 2px 14px; }
.mm-status strong { display:block; font-size:1.05rem; }
.mm-status small { display:block; color:var(--mm-muted); margin-top:3px; font-size:.77rem; }
.mm-score { text-align:right; font-size:1.04rem; font-weight:800; }
.mm-progress { height:6px; overflow:hidden; border-radius:20px; background:#eee8f8; margin-bottom:26px; }
.mm-progress span { display:block; height:100%; border-radius:inherit; background:#9c80ed; transition:width .18s ease; }
.mm-question { font-size:clamp(1.12rem,3vw,1.4rem); line-height:1.45; max-width:620px; margin:0 auto 22px; text-wrap:pretty; }
.mm-instruction { font-size:1.08rem; line-height:1.55; max-width:540px; margin:0 auto 18px; }
.mm-task-note { background:#f2edff; border-radius:12px; padding:10px 14px; line-height:1.5; margin:0 auto 20px; max-width:540px; }
.mm-grid { --mm-cols:4; display:grid; grid-template-columns:repeat(var(--mm-cols),minmax(0,1fr)); gap:8px; width:100%; max-width:440px; margin:20px auto; }
.mm-cell { border:1.5px solid var(--mm-line); border-radius:13px; min-width:0; min-height:50px; aspect-ratio:1; padding:5px; position:relative; display:flex; align-items:center; justify-content:center; background:#fcfaff; color:var(--mm-ink); overflow:hidden; }
.mm-game button.mm-cell { transition:background .12s,border-color .12s; }
.mm-game button.mm-cell:hover:not(:disabled) { border-color:#a88be9; background:#f2edff; }
.mm-cell.mm-selected { border-color:var(--mm-purple); background:#e9deff; box-shadow:inset 0 0 0 1px var(--mm-purple); }
.mm-cell.mm-correct { border-color:#519c88; background:#dbf5e9; }
.mm-coordinate { position:absolute; bottom:3px; right:5px; font-size:.57rem; font-weight:650; color:#777086; line-height:1; }
.mm-dot { color:#ada3bf; font-size:1.4rem; }
.mm-flower { font-size:clamp(1.7rem,6vw,2.5rem); color:#7953c9; }
.mm-symbol { display:inline-flex; align-items:center; justify-content:center; font-family:Arial,"Arial Unicode MS",sans-serif; font-variant-emoji:text; line-height:1.05; font-size:2rem; min-width:1em; color:inherit; }
.mm-cell .mm-symbol { font-size:clamp(1.35rem,5vw,2.1rem); }
.mm-number { font-weight:800; font-size:1.5rem; line-height:1.1; }
.mm-order { position:absolute; top:2px; left:3px; border-radius:50%; background:var(--mm-purple); color:white; font-size:.62rem; width:17px; height:17px; display:grid; place-items:center; }
.mm-step-number { font-size:1.65rem; color:#6141bc; }
.mm-token-row { display:flex; flex-wrap:wrap; justify-content:center; gap:9px; margin:22px auto; max-width:620px; }
.mm-token { position:relative; width:65px; height:78px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:9px; border:1.5px solid var(--mm-line); border-radius:13px; background:#fcfaff; padding:8px; }
.mm-token small { color:var(--mm-muted); font-size:.64rem; line-height:1; }
.mm-gap { font-size:1.8rem; color:var(--mm-purple); }
.mm-choices { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; width:100%; max-width:420px; margin:24px auto; }
.mm-choice { border:1.5px solid var(--mm-line); border-radius:14px; min-height:62px; padding:12px; background:white; color:var(--mm-ink); font-weight:800 !important; font-size:1.05rem !important; display:flex; align-items:center; justify-content:center; line-height:1.4; }
.mm-choice:hover:not(:disabled) { background:#f4efff; border-color:#9c80e3; }
.mm-choice.mm-selected { background:#e9deff; border-color:var(--mm-purple); box-shadow:inset 0 0 0 1px var(--mm-purple); }
.mm-palette { display:grid; grid-template-columns:repeat(auto-fit,minmax(48px,1fr)); gap:8px; max-width:540px; margin:18px auto; }
.mm-palette .mm-choice { min-height:58px; padding:8px 4px; }
.mm-palette .mm-choice:disabled { opacity:.3; }
.mm-answer-slots { display:flex; justify-content:center; flex-wrap:wrap; gap:7px; margin:20px auto; }
.mm-answer-slots > span { width:52px; height:60px; display:flex; align-items:center; justify-content:center; background:#f1ebfc; border:1.5px dashed #bea9e8; border-radius:11px; }
.mm-answer-slots small { color:#9a8cab; font-size:.75rem; }
.mm-answer-slots .mm-symbol { font-size:1.7rem; }
.mm-answer-slots .mm-number { font-size:1.2rem; }
.mm-selection-note { color:var(--mm-muted); font-size:.84rem; min-height:23px; margin:15px 0 5px; }
.mm-actions { display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:9px; margin-top:20px; }
.mm-button { border:1.5px solid var(--mm-line); border-radius:12px; min-height:46px; padding:12px 19px; color:var(--mm-ink); background:#fff; font-weight:800; line-height:1.3; text-decoration:none; display:inline-flex; align-items:center; justify-content:center; text-align:center; }
.mm-actions .mm-button:first-child { background:var(--mm-purple); border-color:var(--mm-purple); color:#fff; }
.mm-button:hover:not(:disabled) { filter:brightness(.96); }
.mm-pace { font-size:.8rem; line-height:1.5; color:var(--mm-muted); margin:15px auto; max-width:460px; }
.mm-hint { text-align:left; border-top:1px solid var(--mm-line); margin:24px auto 0; max-width:540px; padding-top:16px; font-size:.88rem; line-height:1.55; color:var(--mm-muted); }
.mm-hint summary,.mm-original summary { cursor:pointer; color:#685587; font-weight:750; min-height:30px; }
.mm-hint p { margin:8px 0; }
.mm-code-key { display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin:24px auto; max-width:540px; }
.mm-code-key > span { display:flex; align-items:center; gap:10px; background:#f4efff; padding:13px 18px; border-radius:13px; }
.mm-code-key b { font-size:1.35rem; }
.mm-feedback { border:1px solid #e7dff1; border-radius:20px; background:#fbf9ff; padding:22px; margin:18px 0; }
.mm-feedback.mm-success { border-color:#cae4da; background:#f4fcf8; }
.mm-feedback h3 { margin:0 0 12px; font-size:1.35rem; }
.mm-feedback > p { line-height:1.55; margin:8px auto 14px; max-width:560px; }
.mm-feedback .mm-grid { max-width:380px; }
.mm-feedback .mm-cell { background:#fff; }
.mm-feedback .mm-cell.mm-correct { background:#daf3e6; }
.mm-feedback .mm-cell { min-height:40px; }
.mm-solution { font-size:2.3rem; font-weight:850; padding:15px; }
.mm-solution .mm-symbol { font-size:3rem; }
.mm-original { border-top:1px solid var(--mm-line); margin-top:18px; padding-top:14px; }
.mm-rule { padding:12px 15px; border-radius:12px; background:#f1ebfc; font-weight:850; font-size:.95rem; max-width:450px; margin:18px auto; }
.mm-trial { color:var(--mm-muted); font-size:.8rem; margin:0; }
.mm-stimulus { min-height:150px; display:flex; align-items:center; justify-content:center; margin:12px auto; }
.mm-stimulus > .mm-symbol { font-size:5rem; }
.mm-rule-shape { display:flex; width:130px; height:130px; position:relative; align-items:center; justify-content:center; background:#dfd3fd; border:3px solid #7859b9; }
.mm-rule-shape b { font-size:2rem; color:#3b285f; }
.mm-shape-circle { border-radius:50%; }
.mm-shape-oval { height:95px; border-radius:50%; }
.mm-shape-square { border-radius:3px; }
.mm-shape-triangle { background:transparent; border:0; }
.mm-shape-triangle::before { content:''; position:absolute; inset:0; background:#7859b9; clip-path:polygon(50% 0,100% 100%,0 100%); }
.mm-shape-triangle::after { content:''; position:absolute; inset:7px 6px 4px; background:#dfd3fd; clip-path:polygon(50% 0,100% 100%,0 100%); }
.mm-shape-triangle b { position:relative; z-index:1; padding-top:27px; }
.mm-stream-feedback { padding:17px; background:#f7f2ff; border-radius:13px; line-height:1.5; margin:18px auto; max-width:490px; }
.mm-stream-feedback p { margin:7px 0 0; }
.mm-arrows { display:flex; flex-wrap:nowrap; justify-content:center; align-items:center; min-height:135px; gap:2px; margin:16px auto; max-width:100%; font-family:Arial,sans-serif; }
.mm-arrows span { flex:0 1 38px; min-width:0; font-size:clamp(1.4rem,5.5vw,2rem); font-weight:bold; line-height:1; }
.mm-scout-item { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding-bottom:4px; }
.mm-scout-item .mm-symbol { font-size:1.35rem; }
.mm-scout-item b { font-size:.93rem; line-height:1; }
.mm-target-key { display:flex; align-items:center; justify-content:center; gap:15px; color:#60479b; margin:8px auto; }
.mm-target-key > span:not(.mm-symbol) { font-size:.82rem; color:var(--mm-muted); }
.mm-ledger { min-height:220px; padding:30px; border:1px solid #dacff0; border-radius:24px; background:#f4efff; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; max-width:340px; margin:24px auto; }
.mm-ledger small { letter-spacing:.08em; font-size:.7rem; color:#7e6c9d; font-weight:850; }
.mm-ledger strong { font-size:3.5rem; font-weight:850; }
.mm-ledger > span { color:#7e6c9d; }
.mm-complete { padding:32px 14px; }
.mm-finish-glyph { font-size:3rem; background:#eee6ff; color:#7852cf; border-radius:24px; width:100px; height:100px; display:grid; place-items:center; margin:0 auto 22px; }
.mm-complete h2 { font-size:1.7rem; margin:10px 0; }
.mm-complete > p { line-height:1.6; max-width:480px; margin:12px auto; }
.mm-stars { color:#bb7810; font-size:2rem; letter-spacing:6px; }
@media(max-width:480px) {
  .mm-progress { margin-bottom:22px; }
  .mm-grid { gap:5px; }
  .mm-cell { border-radius:9px; min-height:42px; padding:3px; }
  .mm-coordinate { right:3px; bottom:2px; font-size:.5rem; }
  .mm-token { width:55px; height:68px; }
  .mm-token-row { gap:7px; }
  .mm-choices { gap:9px; }
  .mm-actions { gap:8px; }
  .mm-button { padding:12px 13px; font-size:.88rem; }
  .mm-feedback { padding:16px 10px; }
  .mm-feedback .mm-grid { gap:4px; }
  .mm-feedback .mm-cell { min-height:35px; }
  .mm-answer-slots > span { width:45px; height:53px; }
  .mm-scout-item { gap:2px; }
  .mm-scout-item .mm-symbol { font-size:1.05rem; }
  .mm-scout-item b { font-size:.76rem; }
  .mm-grid[style*="--mm-cols:6"] .mm-symbol { font-size:1.3rem; }
  .mm-grid[style*="--mm-cols:6"] .mm-scout-item .mm-symbol { font-size:1.05rem; }
  .mm-code-key > span { padding:10px 13px; }
}
@media(prefers-reduced-motion:reduce) { .mm-game *, .mm-game *::before, .mm-game *::after { transition:none !important; } }