.mm-area { max-width:480px; }
.controls { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:14px; }
.stats { color:var(--muted); font-size:14px; }
.stats b { color:var(--ink); font-size:17px; }
.row { display:flex; align-items:center; gap:10px; padding:8px 12px; border:1px solid var(--rule); background:var(--panel); margin-bottom:8px; }
.input-row { position:sticky; top:0; z-index:5; }
.pegs { display:flex; gap:8px; flex:1; }
.peg-slot { width:42px; height:42px; border-radius:50%; border:1px solid var(--rule); background:var(--paper); cursor:pointer; transition:transform .1s; }
.peg-slot:hover { transform:scale(1.08); }
.history { display:flex; flex-direction:column-reverse; }
.history .row { animation:fade .18s ease; }
@keyframes fade { from { opacity:0; transform:translateY(-4px); } to { opacity:1; } }
.feedback { display:flex; flex-wrap:wrap; gap:4px; width:52px; }
.fb { width:10px; height:10px; border-radius:50%; }
.fb.black { background:var(--ink); }
.fb.white { background:var(--paper); border:1px solid var(--ink); }
.peg-color { width:32px; height:32px; border-radius:50%; border:1px solid var(--rule); display:inline-block; }
.color-0 { background:#e8564a; }
.color-1 { background:#f28a3a; }
.color-2 { background:#f5b642; }
.color-3 { background:#4cb944; }
.color-4 { background:#3d7bfd; }
.color-5 { background:#9b6cff; }
.over-panel { max-width:360px; margin:14px auto 0; padding:24px; text-align:center; }
.over-panel h2 { margin:0 0 6px; letter-spacing:-.03em; }
.secret-show { display:flex; gap:8px; justify-content:center; margin:10px 0 14px; }
@media (max-width:780px) { .peg-slot { width:38px; height:38px; } .controls { flex-direction:column; align-items:stretch; } .stats { text-align:center; } }