.ms-board {
  display: grid;
  gap: 2px;
  background: rgba(20, 20, 58, 0.6);
  border: 1px solid rgba(19, 103, 229, 0.25);
  border-radius: 10px;
  padding: 8px;
  user-select: none;
  touch-action: manipulation;
}
.ms-cell {
  width: 30px; height: 30px;
  display: grid; place-items: center;
  font-weight: 700; font-size: 16px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  border-radius: 4px;
  cursor: pointer;
  transition: transform 0.08s;
  font-family: 'Space Grotesk', sans-serif;
  box-shadow: inset -2px -2px 4px rgba(0,0,0,0.3), inset 2px 2px 4px rgba(255,255,255,0.15);
}
.ms-cell:hover:not(.revealed):not(.flag) { transform: scale(1.06); filter: brightness(1.15); }
.ms-cell.revealed {
  background: rgba(255, 255, 255, 0.06);
  box-shadow: none;
  cursor: default;
}
.ms-cell.flag {
  background: linear-gradient(135deg, #ef4444, #b91c1c);
}
.ms-cell.mine {
  background: linear-gradient(135deg, #dc2626, #7f1d1d);
  animation: boom 0.4s ease;
}
@keyframes boom { from {transform: scale(0.5);} to {transform: scale(1);} }
.n1 { color: #38bdf8; }
.n2 { color: #34d399; }
.n3 { color: #ef4444; }
.n4 { color: #1367e5; }
.n5 { color: #f97316; }
.n6 { color: #6366f1; }
.n7 { color: #fde047; }
.n8 { color: #fff; }
@media (max-width: 540px) {
  .ms-cell { width: 24px; height: 24px; font-size: 13px; }
}