#mm-wrap{font-family:'Segoe UI',Arial,sans-serif;background:linear-gradient(160deg,#050e1d,#0b1e38,#0e2844);min-height:520px;padding:20px;color:#c9daea;box-sizing:border-box;user-select:none}
.mm-title{text-align:center;font-size:2rem;font-weight:700;color:#5dade2;letter-spacing:.1em;margin-bottom:18px;text-shadow:0 0 20px rgba(93,173,226,.4)}

/* setup */
.mm-setup-box{max-width:400px;margin:0 auto;display:flex;flex-direction:column;gap:14px;align-items:center}
.mm-setup-section{width:100%;display:flex;flex-direction:column;gap:6px;align-items:center}
.mm-setup-label{font-size:.75rem;color:#4a7494;text-transform:uppercase;letter-spacing:.1em;font-weight:600}
.mm-toggle-row{display:flex;gap:7px;flex-wrap:wrap;justify-content:center}
.mm-tog{background:#0d1f35;border:2px solid #1e4d7b;border-radius:9px;padding:8px 18px;color:#7fb3d3;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .15s}
.mm-tog.mm-active{background:#1a6fb5;border-color:#5dade2;color:#fff}
.mm-tog:hover:not(.mm-active){border-color:#5dade2}
.mm-level-desc{font-size:.75rem;color:#4a7494;margin-top:2px}
.mm-name-row{display:flex;flex-direction:column;gap:4px;width:100%}
.mm-name-row label{font-size:.75rem;color:#7fb3d3}
.mm-name-row input{background:#0d1f35;border:1px solid #1e4d7b;border-radius:8px;padding:8px 12px;color:#dce9f5;font-size:.92rem;outline:none;width:100%;box-sizing:border-box}
.mm-name-row input:focus{border-color:#5dade2}
#mm-names{width:100%;display:flex;flex-direction:column;gap:8px}

/* buttons */
.mm-btn{border:none;border-radius:10px;padding:10px 26px;font-size:.95rem;font-weight:700;cursor:pointer;transition:filter .15s,transform .1s}
.mm-btn:hover:not(:disabled){filter:brightness(1.15);transform:translateY(-1px)}
.mm-btn:active{transform:translateY(0)}
.mm-btn:disabled{opacity:.35;cursor:default}
.mm-btn-primary{background:#1a6fb5;color:#fff}
.mm-btn-secondary{background:#0d2241;color:#7fb3d3;border:1px solid #1e4d7b}

/* code entry */
.mm-ce-slots{display:flex;gap:10px;margin:10px 0}
.mm-ce-hint{font-size:.75rem;color:#4a7494;text-align:center;font-style:italic}

/* palette */
.mm-palette{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:10px 0}
.mm-color-btn{width:44px;height:44px;border-radius:50%;border:3px solid rgba(255,255,255,.15);cursor:pointer;transition:transform .12s,border-color .12s;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.mm-color-btn:hover{transform:scale(1.15);border-color:rgba(255,255,255,.6)}
.mm-color-btn.mm-selected{border-color:#fff;transform:scale(1.12);box-shadow:0 0 12px rgba(255,255,255,.4)}

/* slots */
.mm-slot{width:44px;height:44px;border-radius:50%;border:2.5px solid #1e4d7b;background:#071428;cursor:pointer;transition:border-color .15s;box-shadow:inset 0 2px 6px rgba(0,0,0,.5)}
.mm-slot.mm-slot-active{border-color:#5dade2;box-shadow:0 0 10px rgba(93,173,226,.4)}
.mm-slot.mm-slot-filled{border-color:rgba(255,255,255,.3)}

/* game header */
.mm-game-header{display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.mm-gh-player{font-size:.85rem;font-weight:600;color:#7fb3d3}
.mm-gh-level{font-size:.75rem;background:#0d2241;border:1px solid #1e4d7b;border-radius:6px;padding:3px 10px;color:#5dade2}
.mm-gh-tries{font-size:.75rem;color:#4a7494}

/* board */
.mm-board{display:flex;flex-direction:column;gap:6px;max-width:360px;margin:0 auto 12px;max-height:420px;overflow-y:auto;padding:4px 2px}
.mm-row{display:flex;align-items:center;gap:8px;background:#071428;border:1px solid #0d2241;border-radius:10px;padding:7px 10px;transition:border-color .2s}
.mm-row.mm-row-active{border-color:#5dade2;background:#091c34}
.mm-row-num{font-size:.7rem;color:#2a4a6e;min-width:18px;text-align:right}
.mm-row-pegs{display:flex;gap:7px}
.mm-row-peg{width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.15);background:#0d2241;box-shadow:inset 0 2px 4px rgba(0,0,0,.4)}
.mm-row-feedback{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-left:auto}
.mm-fb-dot{width:13px;height:13px;border-radius:50%;background:#0d2241;border:1px solid #1e3d5e}
.mm-fb-dot.mm-fb-black{background:#1a1a1a;border-color:#555}
.mm-fb-dot.mm-fb-white{background:#e8e8e8;border-color:#aaa}

/* controls */
.mm-controls{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:360px;margin:0 auto}
.mm-controls .mm-palette{margin:0}
.mm-ctrl-btns{display:flex;gap:10px}

/* handoff */
.mm-handoff-icon{font-size:3rem;text-align:center}
.mm-handoff-msg{font-size:1rem;font-weight:600;text-align:center;color:#c9daea}
.mm-handoff-warn{font-size:.75rem;color:#4a7494;font-style:italic;text-align:center}

/* result */
.mm-result-inner{max-width:400px;margin:0 auto 16px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:12px}
.mm-res-icon{font-size:3.5rem}
.mm-res-title{font-size:1.6rem;font-weight:700}
.mm-res-code{display:flex;gap:8px;justify-content:center;margin:4px 0}
.mm-res-code-peg{width:38px;height:38px;border-radius:50%;border:2px solid rgba(255,255,255,.2);box-shadow:0 2px 6px rgba(0,0,0,.4)}
.mm-res-sub{font-size:.85rem;color:#7fb3d3}


/* legend */
.mm-legend{display:flex;max-width:360px;margin:0 auto 10px;background:#071428;border:1px solid #0d2241;border-radius:10px;overflow:hidden}
.mm-lg-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:1;padding:9px 6px;text-align:center}
.mm-lg-item+.mm-lg-item{border-left:1px solid #0d2241}
.mm-lg-dot{width:16px;height:16px;border-radius:50%;flex-shrink:0}
.mm-lg-dot.mm-lg-black{background:#1a1a1a;border:2px solid #555}
.mm-lg-dot.mm-lg-white{background:#e8e8e8;border:2px solid #aaa}
.mm-lg-dot.mm-lg-empty{background:#0d2241;border:2px solid #1e3d5e}
.mm-lg-label{color:#4a7494;font-size:.62rem;font-weight:500;line-height:1.3}