.board-minesweeper {
  display: grid;
  gap: 2px;
  width: min(92vw, 28rem, calc(var(--n) * var(--ms-cell, 2rem)));
  margin: 0 auto;
  box-sizing: border-box;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.ms-cell {
  aspect-ratio: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 4px;
  font-weight: 700;
  font-size: clamp(0.75rem, 3.2vw, 1.125rem);
  line-height: 1;
  padding: 0;
  cursor: pointer;
  background: var(--ms-covered, #c9b8a8);
  color: #1a1a1a;
  box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}
.ms-cell.is-covered { background: var(--ms-covered, #c9b8a8); }
.ms-cell.is-flagged { background: #e8dcc8; color: #8b4513; }
.ms-cell.is-mine { background: #4a2020; color: #fff; }
.ms-cell.is-boom { background: #8b1e1e; color: #fff; font-size: 1.15rem; }
.ms-boom-mark { font-size: 1.35rem; line-height: 1; margin: 0; }
#boom .boom-heading {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  margin: 0;
  font-size: clamp(1.25rem, 4.2vw, 1.5rem);
  line-height: 1.2;
  font-weight: 750;
}
#boom .boom-card {
  padding: 16px 18px;
  background: var(--paper-bright, #fff9ed);
  border: none;
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(32, 22, 14, 0.16);
  color: var(--ink, #1a1a1a);
  max-height: none;
  overflow: visible;
}
#boom #boomText { margin: 8px 0 0; font-size: 0.95rem; line-height: 1.35; }
#boom .boom-actions { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin-top: 12px; }
#boom .boom-actions :is(button, a) {
  width: 100%;
  min-height: 44px;
  white-space: normal;
  text-align: center;
  line-height: 1.25;
  box-sizing: border-box;
}
#boomTitle:focus { outline: 2px solid var(--accent, #5c4a3d); outline-offset: 3px; }
@media (min-width: 768px) {
  #boom .boom-actions { flex-direction: row; flex-wrap: wrap; }
  #boom .boom-actions :is(button, a) { width: auto; flex: 1 1 9rem; }
}
.ms-cell.is-revealed { background: #f5f0e6; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08); cursor: default; }
.ms-cell.is-revealed.n1 { color: #1e5bb8; }
.ms-cell.is-revealed.n2 { color: #1a7a3c; }
.ms-cell.is-revealed.n3 { color: #c42b2b; }
.ms-cell.is-revealed.n4 { color: #3d2a8f; }
.ms-cell.is-revealed.n5 { color: #7a3b12; }
.ms-cell.is-revealed.n6 { color: #0d6e75; }
.ms-cell.is-revealed.n7 { color: #222; }
.ms-cell.is-revealed.n8 { color: #555; }
.ms-cell.is-selected { outline: 3px solid #187b40; outline-offset: 1px; z-index: 1; }
#playControls > button[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; }
.ms-cell.is-safe-start { box-shadow: inset 0 0 0 3px #187b40; }
.ms-cell.is-preview { pointer-events: none; opacity: 0.45; }
.ms-hud {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  justify-content: center;
  align-items: center;
  margin-bottom: 12px;
  font-size: 0.95rem;
}
.ms-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}
.ms-mode-row button[aria-pressed="true"] {
  background: var(--accent, #20553b);
  color: #fff;
}

.ms-cell { touch-action: manipulation; -webkit-touch-callout: none; }
#msRecovery { display: block; margin: 8px auto; min-height: 44px; }
.ms-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.ms-play-status {
  position: relative;
  min-width: 0;
}
.ms-play-status > .status {
  margin: 0.35rem 0 0;
  font-size: 0.95rem;
  line-height: 1.35;
  color: var(--muted, #666);
  overflow-wrap: anywhere;
}