/* Muster Map */
.mm-grid { display: grid; grid-template-columns: 22px repeat(6, minmax(48px, 1fr)); gap: 2px; background: #d8ecc0; border: 4px solid #8a5a33; border-radius: 14px; padding: 6px; margin-inline: -6px; }
.mm-head, .mm-corner { display: flex; align-items: center; justify-content: center; font-weight: 900; font-size: 15px; }
.mm-north { font-size: 12px; color: #c0392b; }
.mm-cell { min-height: 48px; min-width: 48px; display: flex; align-items: center; justify-content: center; font-size: 24px; background: #a9d67e; border: 2px solid #7fae55; border-radius: 8px; padding: 0; color: var(--ink); }
button.mm-cell { cursor: pointer; touch-action: manipulation; }
.mm-cell.is-bull { background: repeating-linear-gradient(45deg, #f5c6c0 0 8px, #efb0a8 8px 16px); border-color: #c0392b; }
.mm-cell.is-path { box-shadow: inset 0 0 0 4px #ffd66b; }
.mm-cell.is-right { background: #c8f2c0; border-color: var(--green); }
.mm-cell.is-tried { background: #ffd9d4; }
.mm-cell:focus-visible { outline: 4px solid var(--focus); outline-offset: 1px; }
.mm-dog { animation: mm-bob 1s ease-in-out infinite alternate; }
@keyframes mm-bob { to { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .mm-dog { animation: none; } }
.mm-status, .mm-scale { margin: 0; text-align: center; font-weight: 800; }
.mm-pad { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-areas: ". n ." "w . e" ". s ."; gap: 8px; max-width: 320px; margin: 0 auto; width: 100%; }
.mm-arrow { flex-direction: column; min-height: 56px; font-size: 16px; gap: 0; padding: 4px; }
.mm-arrow span { font-size: 22px; }
.mm-arrow.is-N { grid-area: n; } .mm-arrow.is-S { grid-area: s; } .mm-arrow.is-E { grid-area: e; } .mm-arrow.is-W { grid-area: w; }
.mm-compass .mf-choice { font-size: 15px; min-height: 52px; padding: 4px; }