.ms .ms-face { font-size: 20px; padding: 4px 10px; line-height: 1; }
.ms .ms-mode { min-width: 104px; }
.ms-msg { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 14px; border-radius: 12px; margin-bottom: 10px; font-weight: 700; }
.ms-msg[hidden] { display: none; }
.ms-msg.ms-good { background: color-mix(in srgb, var(--good) 15%, var(--paper)); color: var(--good); }
.ms-msg.ms-bad { background: color-mix(in srgb, var(--bad) 13%, var(--paper)); color: var(--bad); }
.ms-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
.ms-board {
  --ms-size: 32px; display: grid; gap: 0; width: max-content; margin: 0 auto;
  border: 2px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--line);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.ms-cell {
  width: var(--ms-size); height: var(--ms-size); display: flex; align-items: center; justify-content: center;
  font-weight: 800; line-height: 1; cursor: pointer; font-variant-numeric: tabular-nums;
  background: color-mix(in srgb, var(--accent-2) 30%, var(--cell-alt));
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.35), inset -1px -1px 0 rgba(0,0,0,.12);
  border-right: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--line) 70%, transparent);
}
.ms-cell:hover { filter: brightness(1.06); }
.ms-cell.ms-open { background: var(--cell); box-shadow: none; cursor: default; }
.ms-cell.ms-open:hover { filter: none; }
.ms-cell.ms-flag { font-size: .85em; }
.ms-cell.ms-mine { font-size: .8em; }
.ms-cell.ms-boom { background: var(--bad); }
.ms-cell.ms-wrong { color: var(--bad); background: color-mix(in srgb, var(--bad) 18%, var(--cell)); }
.ms-cell.ms-cursor { outline: 3px solid var(--accent); outline-offset: -3px; }
.ms-n1 { color: #2563eb; } .ms-n2 { color: #16a34a; } .ms-n3 { color: #dc2626; } .ms-n4 { color: #7c3aed; }
.ms-n5 { color: #b45309; } .ms-n6 { color: #0891b2; } .ms-n7 { color: var(--ink); } .ms-n8 { color: var(--muted); }
