.ms-wrap { user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.ms-levels, .ms-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.ms-btn {
  font: inherit; font-weight: bold; padding: 4px 12px; background: var(--face); color: #000; cursor: pointer;
  border: 2px solid; border-color: var(--raised); box-shadow: inset -1px -1px #808080;
}
.ms-btn:active, .ms-btn.on { border-color: var(--sunken); box-shadow: inset 1px 1px #404040; background: #dfdfdf; }
.ms-panel { display: inline-block; max-width: 100%; background: var(--face); padding: 8px; border: 3px solid; border-color: var(--raised); }
.ms-head {
  display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; margin-bottom: 8px;
  border: 3px solid; border-color: var(--sunken);
}
.lcd { background: #000; color: #f00; font: bold 1.6rem/1 "Courier New", monospace; padding: 3px 6px; border: 2px solid; border-color: var(--sunken); }
#face { font-size: 1.5rem; width: 42px; height: 42px; padding: 0; line-height: 1; }
.ms-scroll { overflow-x: auto; max-width: 100%; }
#board { --cell: 24px; display: grid; width: max-content; border: 3px solid; border-color: var(--sunken); background: #808080; }
.c {
  width: var(--cell); height: var(--cell); display: flex; align-items: center; justify-content: center;
  font-weight: bold; font-size: 15px; cursor: pointer; background: var(--face);
  border: 3px solid; border-color: var(--raised);
}
.c.open { border: 1px solid #808080; cursor: default; }
.c.boom { background: #f00; }
.n1 { color: #0000ff; } .n2 { color: #008000; } .n3 { color: #ff0000; } .n4 { color: #000080; }
.n5 { color: #800000; } .n6 { color: #008080; } .n7 { color: #000; } .n8 { color: #808080; }
.ms-hint { margin: 10px 0 0; color: var(--muted); }
#win { margin-top: 12px; padding: 10px; background: #ffffe1; border: 1px solid #000; }
#win input { font: inherit; padding: 3px 6px; margin: 0 6px; border: 2px solid; border-color: var(--sunken); width: 10em; }
.lb { width: 100%; border-collapse: collapse; margin-top: 8px; }
.lb th, .lb td { text-align: left; padding: 4px 8px; border-bottom: 1px solid #c0c0c0; }
.lb tr.me td { background: #ffffa0; font-weight: bold; }

.menu { display: grid; gap: 12px; margin-top: 8px; }
.menu a { display: block; text-decoration: none; color: inherit; }
.menu a:hover .name { text-decoration: underline; }
.menu .ico { font-size: 1.6rem; margin-right: 6px; }